title: Pass parameters with EventEmitter
body: <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>