Pass parameters with EventEmitter

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

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."

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.