title: Angular2 get clicked element id
body: <p>I have such click event</p>
  
  <pre><code> &lt;button (click)="toggle($event)" class="someclass" id="btn1"&gt;&lt;/button&gt;
   &lt;button (click)="toggle($event)" class="someclass" id="btn2"&gt;&lt;/button&gt;
  </code></pre>
  
  <p>I am catching the event in my function input param and want to find out what exactly button was clicked.</p>
  
  <pre><code>toggle(event) {
  
  }
  </code></pre>
  
  <p>but <code>event</code> does not have an <code>id</code> property. </p>
  
  <pre><code>altKey: false
  bubbles: true
  button: 0
  buttons: 0
  cancelBubble: false
  cancelable: true
  clientX: 1198
  clientY: 29
  ctrlKey: false
  currentTarget: button#hdrbtn_notificaton.mdl-button.mdl-js-button.mdl-js-ripple-effect.mdl-button--icon
  defaultPrevented: false
  detail: 1
  eventPhase: 3
  fromElement: null
  isTrusted: true
  isTrusted: true
  layerX: -566
  layerY: 5
  metaKey: false
  movementX: 0
  movementY: 0
  offsetX: 22
  offsetY: 13
  pageX: 1198
  pageY: 29
  path: Array[13]
  relatedTarget: null
  returnValue: true
  screenX: 1797
  screenY: 148
  shiftKey: false
  sourceCapabilities: InputDeviceCapabilities
  srcElement: span.mdl-button__ripple-container
  target: span.mdl-button__ripple-container
  timeStamp: 1458032708743
  toElement: span.mdl-button__ripple-container
  type: "click"
  view: Window
  webkitMovementX: 0
  webkitMovementY: 0
  which: 1
  x: 1198
  y: 29
  </code></pre>
  
  <p>How can I find an <code>id</code>?</p>
  
  <p>UPDATE:
  <strong>Plunkers are all good</strong> but in my case I have locally:</p>
  
  <p><code>event.srcElement.attributes.id</code> - undefined
  <code>event.currentTarget.id</code> - has the value</p>
  
  <p>I am using chrome latest Version 49.0.2623.87 m</p>
  
  <p>Could it be <code>Material Design Lite</code> thing? because I am using it.</p>
  
  <p><a href="https://i.stack.imgur.com/mKBPM.png"><img src="https://i.stack.imgur.com/mKBPM.png" alt="enter image description here"></a></p>