Angular 6.1.1 - EventEmitter doesn't emit to parent component

Question

I have a parent/child component in my Angular app where the child component emits an event to parent when a row in a table is being clicked.

The child component is configured with Output event emitter as below:

@Output('rowSelect') rowSelect = new EventEmitter<any>();

onSelect($event, rowIndex) {
    if ($event.source.checked) {
      this.index =
        rowIndex;
      this.rowSelect.emit({'tenant': this.tenant, 'row': $event.source.value, 'index': this.origRowIndex.indexOf($event.source.value)});
      return;
    }
    else {
      this.rowSelect.emit({'row': {'sdwanprofile': 'UNCHECKED'}});
    }
  }

The parent component is binding the event emitter as below in template:

<fuse-predefined>
  (rowSelect) = "onButtonDisplay($event)">
</fuse-predefined>

This was working fine until I did upgrade to Angular 6.1.1

When I console.log on the parent component to verify the EventEmitter payload, it doesn't show any data emitted. If I console.log in the child component, I can see the payload.

So it looks like Output() is not emitted to parent component.

Below is the Angular packages current version:

    Angular CLI: 6.1.2
Node: 10.7.0
OS: darwin x64
Angular: 6.1.1
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.7.2
@angular-devkit/build-angular      0.7.2
@angular-devkit/build-optimizer    0.7.2
@angular-devkit/build-webpack      0.7.2
@angular-devkit/core               0.7.2
@angular-devkit/schematics         0.7.2
@angular/cdk                       6.4.2
@angular/cli                       6.1.2
@angular/flex-layout               6.0.0-beta.17
@angular/material                  6.4.2
@angular/material-moment-adapter   6.4.2
@ngtools/webpack                   6.1.2
@schematics/angular                0.7.2
@schematics/update                 0.7.2
rxjs                               6.2.2
typescript                         2.9.2
webpack                            4.9.2

I've checked the release notes and can't see any known issue. Is there any thing on Angular 6.1.x that would break it ?

Thanks in advance.

can you check it adding debug ponters rather than console logs? — Malindu Sandaruwan
onSelect() is triggered by a checkbox in a grid (ngx-datatable): <mat-checkbox [checked]="index === rowIndex" (change)="onSelect($event, rowIndex)" [value]="row"> </mat-checkbox> — Luca Brasi

Luca Brasi Luca Brasi · Accepted Answer · 2018-08-03T04:39:49

That was a simple syntax mistake:

Output event should be within the opening tag as below:

<fuse-predefined (rowSelect)="onButtonDisplay($event)">
</fuse-predefined>

Not sure how it got changed, maybe done by the IDE formatting the HTML code.

Angular 6.1.1 - EventEmitter doesn't emit to parent component

1 Answers