Pass parameters with EventEmitter

Question

I have a directive to initializes a jQueryUI sortable on a DOM element. The jQueryUI sortable also has a set of callback events that trigger on certain actions. For example, when you start or stop sorting elements.

I'd like to pass the return parameters from such an event through the emit() function, so I can actually see what happend in my callback function. I just haven't found a way to pass parameters through an EventEmiiter.

I currently have the following.

My directive:

@Directive({     selector: '[sortable]' }) export class Sortable {     @Output() stopSort = new EventEmitter();      constructor(el: ElementRef) {       console.log('directive');         var options = {           stop: (event, ui) => {             this.stopSort.emit(); // How to pass the params event and ui...?           }         };          $(el.nativeElement).sortable(options).disableSelection();     } } 

And this is my Component that uses the event emiited by the directive:

@Component({   selector: 'my-app',   directives: [Sortable],   providers: [],   template: `     <div>       <h2>Event from jQueryUI to Component demo</h2>        <ul id="sortable" sortable (stopSort)="stopSort(event, ui)">         <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>         <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>         <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>       </ul>     </div>   ` }) export class App {   constructor() {    }    stopSort(event, ui) { // How do I get the 'event' and 'ui' params here?     console.log('STOP SORT!', event);   } } 

How can I get the event and ui params in my stopSort() function?

Here is a demo of what I have so far: http://plnkr.co/edit/5ACcetgwWWgTsKs1kWrA?p=info

Answer 1

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

Answer 2

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