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 · Accepted Answer · 2017-04-17 21:39:25Z

5

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);
}

answered Apr 17, 2017 at 21:39

Aravind

41.7k16 gold badges97 silver badges111 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Muirik Over a year ago

Thanks. I realize part of the complexity here is that I am passing from one component, to a view component, and then down to another component. So it's like a three step process. Do I therefore need two Outputs and EventEmitters - for each time the event is passed down, or is there a different way to handle this?

Aravind Over a year ago

Yup. if you want to avoid using more output and input you can go for state management techniques

Muirik Over a year ago

Thanks! Got it working now. Just to clarify, the issue came down to not having this <sub-component (sendFilter)="optionReceived($event)"> </sub-component>, and not realizing I needed to pass the Output and EventEmitter two times. Not sure why you listed the first @Output item as a "mistake"? Did you mean that could be the potential problem?

dak Over a year ago

Aravind I was wondering if you could comment on my issue How to create component dynamically with @Output EventEmitter

Aravind Over a year ago

@dak I'm not able to understand what you are trying to do there in that post!! I will be gald to help you

Collectives™ on Stack Overflow

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

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related