How to Add & Get Custom Attribute Value in Angular?

By Hardik Savani | March 28, 2020 | Category : 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 and angular 9 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...




Hardik Savani
My name is Hardik Savani. I'm a full-stack developer, entrepreneur and owner of Aatman Infotech. I live in India and I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.
Follow Me: Github Twitter
***Do you want me hire for your Project Work? Then Contact US.

We are Recommending you: