Hello Devs, 

In this tutorial, we will learn Angular Get Custom Attribute Value to HTML Element Example

This article will give you simple example of angular get attribute value. You just need to some step to done angular get element attribute value.

Follow this step by step guide below. 



src/app/app.component.ts

import { Component } from '@angular/core';

  

@Component({

  selector: 'my-app',

  templateUrl: './app.component.html',

  styleUrls: [ './app.component.css' ]

})

export class AppComponent  {

  name = 'Angular';

    

  students = [

    {id:1, name:"Hardik"},

    {id:2, name:"Vimal"},

    {id:3, name:"Harshad"},

  ]

  

  clickEvent(e){

    var id = e.getAttribute('data-id');

    console.log(id);

  }

}



src/app/app.component.html

<h1>angular add and get custom attribute to element - rathorji.in</h1>

   

<ul>

  <li #studentID *ngFor="let student of students" [attr.data-id]="student.id">

    <button (click)="clickEvent(studentID)">{{ student.name }}</button>

  </li>

</ul>



May this example help you.