Angular2 obtener la identificación del elemento cliqueado

Tengo tal evento de clic

 <button (click)="toggle($event)" class="someclass" id="btn1"></button>
 <button (click)="toggle($event)" class="someclass" id="btn2"></button>

Estoy capturando el evento en mi parámetro de entrada de función y quiero saber exactamente en qué botón se hizo clic.

toggle(event) {

}

pero eventno tiene idpropiedad.

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

¿Cómo puedo encontrar un id?

ACTUALIZACIÓN: Plunkers son todos buenos, pero en mi caso tengo localmente:

event.srcElement.attributes.id- indefinido event.currentTarget.id- tiene el valor

Estoy usando Chrome última versión 49.0.2623.87 m

¿Podría ser una Material Design Litecosa? porque lo estoy usando.

Si desea tener acceso al idatributo del botón, puede aprovechar la srcElementpropiedad del evento:

import {Component} from 'angular2/core';

@Component({
  selector: 'my-app',
  template: `
    <button (click)="onClick($event)" id="test">Click</button>
  `
})
export class AppComponent {
  onClick(event) {
    var target = event.target || event.srcElement || event.currentTarget;
    var idAttr = target.attributes.id;
    var value = idAttr.nodeValue;
  }
}

Vea este plunkr: https://plnkr.co/edit/QGdou4?p=preview .

Vea esta pregunta:

• ¿Cómo puedo hacer que event.srcElement funcione en Firefox y qué significa?

Para usuarios de TypeScript:

    toggle(event: Event): void {
        let elementId: string = (event.target as Element).id;
        // do something with the id... 
    }

Finalmente encontré la forma más sencilla:

<button (click)="toggle($event)" class="someclass" id="btn1"></button>
<button (click)="toggle($event)" class="someclass" id="btn2"></button>

toggle(event) {
   console.log(event.target.id); 
}

Podría simplemente pasar un valor estático (o una variable de *ngForo lo que sea)

<button (click)="toggle(1)" class="someclass">
<button (click)="toggle(2)" class="someclass">

No es necesario aprobar todo el evento (a menos que necesite otros aspectos del evento de los que ha indicado). De hecho, no se recomienda. Puede pasar la referencia del elemento con solo una pequeña modificación.

import {Component} from 'angular2/core';

@Component({
  selector: 'my-app',
  template: `
    <button #btn1 (click)="toggle(btn1)" class="someclass" id="btn1">Button 1</button>
    <button #btn2 (click)="toggle(btn2)" class="someclass" id="btn2">Button 2</button>
  `
})
export class AppComponent {
  buttonValue: string;

  toggle(button) {
    this.buttonValue = button.id;
  }

}

Demostración de StackBlitz

Técnicamente, no necesita encontrar el botón en el que se hizo clic, porque ha pasado el elemento real.

Guiado angular

Cuando tu HTMLElementno tienes un id, nameo classpara llamar

luego usa

<input type="text" (click)="selectedInput($event)">

selectedInput(event: MouseEvent) {
   log(event.srcElement) // HTMInputLElement
}

hazlo así simplemente: (como se dice en el comentario, aquí está con un ejemplo con dos métodos)

import {Component} from 'angular2/core';

@Component({
    selector: 'my-app', 
    template: `
      <button (click)="checkEvent($event,'a')" id="abc" class="def">Display Toastr</button>
      <button (click)="checkEvent($event,'b')" id="abc1" class="def1">Display Toastr1</button>
    `
})
export class AppComponent {
  checkEvent(event, id){
    console.log(event, id, event.srcElement.attributes.id);
  }
}

demostración: http://plnkr.co/edit/5kJaj9D13srJxmod213r?p=preview

¡Puede usar su interfaz HTMLButtonElement que hereda de su padre HTMLElement!

De esta manera podrá tener autocompletado ...

<button (click)="toggle($event)" class="someclass otherClass" id="btn1"></button>

toggle(event: MouseEvent) {
    const button = event.target as HTMLButtonElement;
    console.log(button.id);
    console.log(button.className);
 }

Para ver toda la lista de HTMLElement de la documentación del World Wide Web Consortium (W3C)

Demostración de StackBlitz

Si desea tener acceso al idatributo del botón en angular 6 siga este código

`@Component({
  selector: 'my-app',
  template: `
    <button (click)="clicked($event)" id="myId">Click Me</button>
  `
})
export class AppComponent {
  clicked(event) {
    const target = event.target || event.srcElement || event.currentTarget;
    const idAttr = target.attributes.id;
    const value = idAttr.nodeValue;
  }
}`

tu iden el valor,

el valor de valuees myId.