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...
Do you like below Tutorials ?
- Angular Json Pipe Example | Json Pipe in Angular 9/8/7
- Angular Slice Pipe Example | Slice Pipe in Angular 9/8/7
- Angular Uppercase Pipe Example | Uppercase Pipe in Angular 9/8/7
- Angular LowerCase Pipe Example | LowerCase Pipe in Angular 9/8/7
- Angular Titlecase Pipe Example | Titlecase Pipe in Angular 9/8/7
- Angular KeyValue Pipe Example | KeyValue Pipe in Angular 9/8/7
- Call Method from One Component to Another Component in Angular
- Angular Push Object into Array Example