Using Output() and EventEmitter() to Pass Value in Angular App

Question

Last week I managed to get Output() and EventEmitter() working in my Angular app. But today I'm running into a problem in trying to implement this in another scenario. Not sure what I'm missing.

First off, in a sub-component that handles filters that are applied to a list of records I have this:

@Output() sendFilter = new EventEmitter();

optionClicked(option) {
    this.sendFilter.emit(option);
    console.log('Filter from filters comp is: ' + option.toolbarLabel);
    this.option = option;
}

The view for this filter component looks like this:

<md-checkbox *ngFor="let option of categoryFilters.options" 
   [(ngModel)]="option.value" (click)="optionClicked(option)">
   {{option.label}}
</md-checkbox>

So I am using "sendFilter" to emit "option". Then, in my other component, I assume this value should be received/pass into this function:

optionReceived(option) {
    console.log('Consulting: ' + option.toolbarLabel);
}

In the view for this component I have this:

<list-display [records]="records" (sendChange)="pageChange($event)" (sendFilter)="optionReceived(option)"></list-display>

However, only the event on the filter component logs to the console. The console.log I have right above here never happens. Shouldn't that "optionReceived()" function trigger automatically upon a new emit from the filter component?

I even tried adding "optionClicked(option)" to Angular's OnChanges life cycle hook:

ngOnChanges(option) {
    this.optionReceived(option.toolbarLabel);
}

... But still nothing logs to the console from that component.

What am I missing here?

Aravind Aravind · Accepted Answer · 2017-04-17T21:39:25

Assuming that your checkbox is inside the sub-component and you should be using as below

Mistake 1:

@Output() sendFilter = new EventEmitter<any>();

Mistake 2:

<sub-component (sendFilter)="optionReceived($event)"> </sub-component>

Implementing this method in yourparent component as

optionReceived(option:any){
        console.log('Consulting: ' + option.toolbarLabel);
}

Using Output() and EventEmitter() to Pass Value in Angular App

1 Answers