Angular Add Custom Attribute to Element Example

Hello Devs, 

In this tutorial, we will learn Angular Add Custom Attribute to Element Example

In this section, you will do get and set custom attribute in angular 6, angular 7, angular 8 and angular 9 application:

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.