Pass parameters with EventEmitter
I can't add a comment, but just wanted to point out from Alpha Bravo's answer that you can pass this.event
, you just can't use property value shorthand:
this.stopSort.emit({ event : this.event, ui : this.ui });
Also note, if they are passed through the EventEmmiter as this.stopSort.emit({ val1, val2 });
then they would be accessed in the parent as:
hereIsHeight(value) {
console.log(`event = ${ value.val1 }`);
console.log(`ui = ${ value.val2 }`);
}
So avoiding the shorthand might be preferable in this type of situation to keep naming consistent.
pixelbits answer have changed a bit with final release. If you have multiple parameters, just pass it through as one object.
Child component:
this.stopSort.emit({event,ui});
@Output() stopSort= new EventEmitter<any>();
Parent Component:
hereIsHeight(value) {
console.log("Height = " + value.event);
console.log("Title = " + value.ui);
}
HTML in parent component:
<test-child1 (stopSort)="hereIsHeight($event)"></test-child1>
-- Also if you have values like: (with the "this" in front)
this.stopSort.emit({this.event,this.ui});
they will not work, you need to change them to something else and then pass through like:
let val1 = this.event;
let val2 = this.ui;
this.stopSort.emit({val1,val2});
*Update: Read Colin B's answer below for a way to pass values with "this."
EventEmitter supports one argument, which is passed as $event
to your event handler.
Wrap your parameters in an event object when you pass it to emit
:
this.stopSort.emit({ event:event, ui: ui });
Then, when you handle the event, use $event
:
stopSort($event) {
alert('event param from Component: ' +$event.event);
alert('ui param from Component: ' + $event.ui);
}
Demo Plnkr