Angular2 get clicked element id

Question

I have such click event    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    I am catching the event in my function input param and want to find out what exactly button was clicked   toggle event         but event does not have an id property    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   How can I find an id   UPDATE  Plunkers are all good but in my case I have locally   event srcElement attributes id - undefined event currentTarget id - has the value  I am using chrome latest Version 49 0 2623 87 m  Could it be Material Design Lite thing  because I am using it

User · Answer

You can use its interface HTMLButtonElement that inherits from its parent HTMLElement    This way you will be able to have auto-completion      lt button  click   toggle  event   class  someclass otherClass  id  btn1  gt  lt  button gt   toggle event  MouseEvent        const button   event target as HTMLButtonElement      console log button id       console log button className        To see all list of HTMLElement from the World Wide Web Consortium  W3C  documentation  StackBlitz demo

User · Answer

If you want to have access to the id attribute of the button you can leverage the srcElement property of the event   import  Component  from  angular2 core     Component     selector   my-app     template         lt button  click   onClick  event   id  test  gt Click lt  button gt         export class AppComponent     onClick event        var target   event target    event srcElement    event currentTarget      var idAttr   target attributes id      var value   idAttr nodeValue          See this plunkr  https   plnkr co edit QGdou4 p preview   See this question    How can I make event srcElement work in Firefox and what does it mean

User · Answer

If you want to have access to the id attribute of the button in angular 6 follow this code    Component     selector   my-app     template         lt button  click   clicked  event   id  myId  gt Click Me lt  button gt         export class AppComponent     clicked event        const target   event target    event srcElement    event currentTarget      const idAttr   target attributes id      const value   idAttr nodeValue           your id in the value   the value of value is myId

User · Answer

There is no need to pass the entire event  unless you need other aspects of the event than you have stated   In fact  it is not recommended  You can pass the element reference with just a little modification   import  Component  from  angular2 core     Component     selector   my-app     template         lt button  btn1  click   toggle btn1   class  someclass  id  btn1  gt Button 1 lt  button gt       lt button  btn2  click   toggle btn2   class  someclass  id  btn2  gt Button 2 lt  button gt         export class AppComponent     buttonValue  string     toggle button        this buttonValue   button id           StackBlitz demo  Technically  you don t need to find the button that was clicked  because you have passed the actual element   Angular guidance

User · Answer

For nested html  use closest  lt button  click   quot toggle  event  quot  class  quot someclass quot  id  quot btn1 quot  gt       lt i class  quot fa fa-user quot  gt  lt  i gt   lt  button gt   toggle event        event target closest  button   as Element  id

User · Answer

When your HTMLElement doesn t have an id  name or class to call  then use  lt input type  quot text quot   click   quot selectedInput  event  quot  gt   selectedInput event  MouseEvent       log event srcElement     HTMInputLElement

User · Answer

Finally found the simplest way    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   toggle event       console log event target id

User · Answer

do like this simply   as said in comment here is with example with two methods   import  Component  from  angular2 core     Component       selector   my-app        template           lt button  click   checkEvent  event  a    id  abc  class  def  gt Display Toastr lt  button gt         lt button  click   checkEvent  event  b    id  abc1  class  def1  gt Display Toastr1 lt  button gt           export class AppComponent     checkEvent event  id       console log event  id  event srcElement attributes id           demo  http   plnkr co edit 5kJaj9D13srJxmod213r p preview

User · Answer

You can retrieve the value of an attribute by its name  enabling you to get the value of a custom attribute such as an attribute from a Directive   lt button  click   quot toggle  event  quot  id  quot btn1 quot  myCustomAttribute  quot somevalue quot  gt  lt  button gt    toggle  event  Event       const eventTarget  Element   event target as Element    const elementId  string   eventTarget id    const attribVal  string   eventTarget attributes  myCustomAttribute   nodeValue

User · Answer

You could just pass a static value  or a variable from  ngFor or whatever      lt button  click   toggle 1   class  someclass  gt   lt button  click   toggle 2   class  someclass  gt

User · Answer

For TypeScript users       toggle event  Event   void           let elementId  string    event target as Element  id             do something with the id

[angular] Angular2 get clicked element id

Examples related to angular