title: How do you pass the element in Angular2 Typescript binding?
body: <p>How do I get the specific HTML dom element passed through a binding. Sorry if this is hard to understand, here's the code.</p>
  
  <blockquote>
    <p>donut-chart.html</p>
  </blockquote>
  
  <pre><code>&lt;div class="donut-chart" (donut)="$element"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>How do I pass the div element to donut?</p>
  
  <p>This is the TS</p>
  
  <blockquote>
    <p>dount-chart.ts</p>
  </blockquote>
  
  <pre><code>@Component({
    selector: 'donut-chart',
    template: require('./donut-chart.html'),
    directives: [Widget, MorrisChart],
    encapsulation: ViewEncapsulation.None,
    styles: [require('./donut-chart.scss')]
  })
  export class DonutChart implements OnChanges{
    @Input() height: number = 300;
    @Input() data: any[] = [{label: 'loading', value: '0', color: '#eee'}];
  
    morris3Options: any;
    donut: any;
  
    render(): void {
      jQuery(this.donut).css({height: this.height}); // safari svg height fix
      window['Morris']['Donut']({element: this.donut}, this.morris3Options);
    }
  </code></pre>
  
  <p>I want the donut variable to be the element without using class/id. I need to use multiple donuts and jQuery, so I need a way to get the unique donut.</p>