Pass parameters with EventEmitter
<p>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 <a href="http://api.jqueryui.com/sortable/#event-start" rel="noreferrer">start</a> or <a href="http://api.jqueryui.com/sortable/#event-stop" rel="noreferrer">stop</a> sorting elements.</p>

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

<p>I currently have the following.</p>

<p>My directive:</p>



<pre class="lang-js prettyprint-override"><code>@Directive({
    selector: '[sortable]'
})
export class Sortable {
    @Output() stopSort = new EventEmitter();

    constructor(el: ElementRef) {
      console.log('directive');
        var options = {
          stop: (event, ui) =&gt; {
            this.stopSort.emit(); // How to pass the params event and ui...?
          }
        };

        $(el.nativeElement).sortable(options).disableSelection();
    }
}
</code></pre>

<p>And this is my <code>Component</code> that uses the event emiited by the directive:</p>

<pre class="lang-js prettyprint-override"><code>@Component({
  selector: 'my-app',
  directives: [Sortable],
  providers: [],
  template: `
    &lt;div&gt;
      &lt;h2&gt;Event from jQueryUI to Component demo&lt;/h2&gt;

      &lt;ul id="sortable" sortable (stopSort)="stopSort(event, ui)"&gt;
        &lt;li class="ui-state-default"&gt;&lt;span class="ui-icon ui-icon-arrowthick-2-n-s"&gt;&lt;/span&gt;Item 1&lt;/li&gt;
        &lt;li class="ui-state-default"&gt;&lt;span class="ui-icon ui-icon-arrowthick-2-n-s"&gt;&lt;/span&gt;Item 2&lt;/li&gt;
        &lt;li class="ui-state-default"&gt;&lt;span class="ui-icon ui-icon-arrowthick-2-n-s"&gt;&lt;/span&gt;Item 3&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  `
})
export class App {
  constructor() {

  }

  stopSort(event, ui) { // How do I get the 'event' and 'ui' params here?
    console.log('STOP SORT!', event);
  }
}
</code></pre>

<p>How can I get the <code>event</code> and <code>ui</code> params in my <code>stopSort()</code> function?</p>

<p>Here is a demo of what I have so far: <a href="http://plnkr.co/edit/5ACcetgwWWgTsKs1kWrA?p=info" rel="noreferrer">http://plnkr.co/edit/5ACcetgwWWgTsKs1kWrA?p=info</a></p>