title: Take control of my child components (md-button) in angular component code?
body: <p>I'm trying to take control of child MdButton components using @ViewChild:</p>
  
  <pre><code>// In my component:
  @ViewChild('add') private _add: MdButton;
  @ViewChild('upload') private _upload: MdButton;
  @ViewChild('del') private _del: MdButton;
  ...
  public btnClick = (e) =&gt; { console.log(e) }
  </code></pre>
  
  <p>Now I'm trying to find out which one of them was clicked: </p>
  
  <pre><code>/* In template: */
  &lt;button md-button #del (click)="btnClick($event)"&gt;Delete&lt;/button&gt;
  &lt;button md-button #change (click)="btnClick($event)"&gt;Change&lt;/button
  &lt;button md-button  #show (click)="btnClick($event)"&gt;Show&lt;/button&gt;
  </code></pre>
  
  <p>The problem is that I can't find out which one of my button was clicked beacouse #del, #show, etc. props are disappeared after rendering and actually I don't want to add extra id attribute or something like this. Is there a way to listen my buttons inside my component class code without dealing with DOM?</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>I did't find nice solution and ended up with this:</p>
  
  <pre><code>&lt;button md-raised-button #del (click)="_click.next('del')"&gt;Delete&lt;/button&gt;
  &lt;button md-raised-button #add (click)="_click.next('add')"&gt;Add&lt;/button&gt;
  </code></pre>
  
  <p>and</p>
  
  <pre><code>...
  @ViewChild('del') private _del: MdButton;
  @ViewChild('add') private _add: MdButton;
  
  private _click = new Subject(); 
  public clicked$ : Observable&lt;any&gt; = this._click.asObservable();
  ...
  this.clicked$.subscribe(x=&gt;console.log(`Button #${x} is clicked`));
  </code></pre>