Angular How to add dynamically attribute by passing attribute name

Question

I am wondering how to add dynamic attribute in Angular. By saying that I mean I need to pass the attribute name. something like this:

<button [attr.{{attrName}}]="isAllowedAttribute ? attrValue : null" >{{buttonTitle}}/button>

I already see this question but I wanna pass the attribute by attrName.

Any idea?

I suggest you'll make your own attribute directive, you can do use that attribute as a custom attribute to do what ever you need it to do or to be. angular.io/guide/attribute-directives — Chagai Wild
– Chagai Wild, Commented Aug 8, 2018 at 15:29
Have a look at this. stackblitz.com/edit/…, it can be improved obviously, but I guess this is what you require... — Ashish Ranjan
– Ashish Ranjan, Commented Aug 8, 2018 at 16:10

Kabb5 · Accepted Answer · 2018-08-08 19:02:28Z

1

You may use a directive to set your dynamic attributes.

Look at https://stackblitz.com/edit/angular-hnjfrg?file=src%2Fapp%2Fdynamic-attr.directive.ts to get a glimpse at how to use it.

You may use the directive like this:

  <p [dynamicAttr]="'color'" attrValue="red"></p>

and access the directive values like this:

  constructor(el: ElementRef) {
    this.element = el;
  }

  ngAfterViewInit() {
    console.log('Dynamic attribute: ', this.dynamicAttr);
    this.element.nativeElement.style[this.dynamicAttr] = this.attrValue;
  }

You may use the hook according to your use case. I have just used ngAfterViewInit to set things up only once the view renders.

edited Aug 8, 2018 at 19:02

Kabb5

3,9003 gold badges35 silver badges57 bronze badges

answered Aug 8, 2018 at 16:10

Ankit Sharma

1,70410 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Wilhelmina Lohan · Accepted Answer · 2018-08-08 16:06:56Z

0

Write a directive that takes the attribute name and value.

This one takes a "map" of attribute name values.
https://stackblitz.com/edit/angular-how-to-add-dynamically-attribute-by-passing-attribute-n?file=src%2Fapp%2Fapp.component.html

answered Aug 8, 2018 at 16:06

Wilhelmina Lohan

3,1233 gold badges33 silver badges67 bronze badges

Collectives™ on Stack Overflow

Angular How to add dynamically attribute by passing attribute name

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related