How to Add & Get Custom Attribute Value in Angular?

Hi Dev,

Today, i will let you know example of angular add custom attribute to element. if you want to see example of add custom attribute to html element angular then you are a right place.

if you have question about angular get custom attribute value then i will give simple example with solution. 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.

You can easily get and set custom attribute in angular 6, angular 7, angular 8, angular 9, angular 10, angular 11, angular 12, angular 13, angular 14, angular 15, angular 16 and angular 17 application:

1) Angular Set Custom Attribute Value

2) Angular Get Custom Attribute Value

You can see bellow screen shot and see bellow example:

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 - ItSolutionStuff.com</h1>
   
<ul>
  <li #studentID *ngFor="let student of students" [attr.data-id]="student.id">
    <button (click)="clickEvent(studentID)">{{ student.name }}</button>
  </li>
</ul>

You can see bellow preview:

I hope it can help you...