Angular Get Custom Attribute Value to HTML Element Example

April 25, 2020 | Category : Angular

Hi

If you need to see example of how to get attribute value in angular. if you want to see example of get custom attribute value angular then you are a right place. We will look at example of angular get custom attribute value. let’s discuss about angular access html attribute.

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 - HDTuto.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...