HDTuto.com

Angular Add Custom Attribute to Element Example



Today our leading topic is add custom attribute to html element angular. you can see angular add custom attribute to element. We will use angular add custom property to element. you can understand a concept of how to set custom attribute to html element in angular. So, let's follow few step to create example of angular set custom attribute to element.

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




April 25, 2020 | Category : Angular



Blog Search