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