How to Get the Id of the Clicked Element in Angular?

In Angular, it is often useful to get the ID of the element that was clicked by the user, especially, when we have similar elements(or buttons) on the page and we want to know which element is clicked by the user.

So, one way to check which element is clicked by the user is to get the clicked element’s id and put the if else conditions in the ts file to perform some specific action accordingly.

In this article, We will learn different ways to get the id of the clicked element in Angular.

1. Get the Clicked Element Id by Passing the $event Object from the Template

In this approach, we pass the $event object as an argument to the function that is bound to the (click) event of the element.

Let’s say we have two buttons in our template file. The first button has an id myBtn1 whereas the second button has an id myBtn2.

To get the Id of the clicked button, we have bound a function getElementId() to the (click) event of each button. So whenever the user clicks any button, the getElementId() function will be invoked.

<div>
    <button (click)="getElementId($event)" id="myBtn1">Button one</button>
    <button (click)="getElementId($event)" id="myBtn2">Button two</button>
</div>

Now, open up your component.ts file and add the below code. So, whenever you click any of the two buttons, the getElementId() function is invoked and prompts the Id of the clicked button.

getElementId(event:any){
  
  // Get the source element
  let element = event.target || event.srcElement || event.currentTarget;

  // Get the id of the source element
  let elementId = element.id;

  alert("The button's id is: " + elementId);  // Prompt element's id

}

Below is the outcome of the above code:

2. Get the Clicked Element Id using Template Reference Variable

Another way to get the clicked element Id is to use the template reference variable.

In Angular, a template reference variable is a variable that is declared in the template and can be used to refer to a specific DOM element, directive, or component.

Template reference variables are defined using the # symbol followed by the variable name eg. #myVar, and they can be used to access the properties and methods of the DOM element or directive that they are associated with.

In the following example, we have added a reference #btn1 to the first button and #btn2 to the second button. We then passed these references to the click event handler function to get the element’s Id.

<div>
    <button #btn1 (click)="getElementId(btn1)" id="myBtn1">Button one</button>
    <button #btn2 (click)="getElementId(btn2)" id="myBtn2">Button two</button>
</div>

Now, add the following code to your component.ts file:

getElementId(elemRef:any){
  
  // Get the element's reference
  let element = elemRef;

  // Get the Id of the element
  let elementId = element.id;

  alert("The button's id is: " + elementId);  // Prompt element's Id

}

Below is the outcome of the above code:

Conclusion

To get the Id of the clicked element in Angular, you can either pass the $event object to the click event handler function, or you can first create a template reference variable and then pass it to the click event handler.

Inside the click event handler function, you can easily get the Id of the clicked element by accessing the id attribute of the $event object eg. $event.target.id. OR if you have passed the element reference, you can directly access it from the element reference object using the id attribute, eg. refObj.id

Thanks for reading.