Dynamically set attribute on component in html template angular 2

Question

I am trying to set an attribute on a component if a certain expression is true. Could someone give me an example?

What I have now:

 <div [danger]="inArray(choice.likers, user, id)"></div>

but this does not compile.

inArray is my own method which returns true or false. What I would like to see is, if the expression returns true, the output will be

<div danger></div>

In angular 1 there was this: ng-attr-... statement that did exactly the above.

Nate Anderson · Accepted Answer · 2021-12-12 17:07:04Z

66

To set an attribute use attribute binding:

 <div [attr.danger]="inArray(choice.likers, user, id)"></div>

If you want to show a empty attribute conditionally return empty string or null in inArray():

inArray() {
    let value;
    if (isInArray) {
      value = '';
    } else {
      value = null;
    }
    return value;
  }

so the attribute will empty or the danger attribute dont exist. The result is:

<div danger></div>

edited Dec 12, 2021 at 17:07

Nate Anderson

21.6k22 gold badges113 silver badges154 bronze badges

answered May 28, 2016 at 11:26

muetzerich

5,7308 gold badges39 silver badges52 bronze badges

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

6 Comments

Bram Over a year ago

Thank you for your comment muetzerich. This code allows me to set the value of the attribute dynamically but what I would like to achieve is to set the attribute itself.

Bram Over a year ago

To clarify: the output with your code is: danger="true", but I would like to only set the attribute not give it a value.

muetzerich Over a year ago

try this [attr.danger]="inArray(choice.likers, user, id) ? true : null" -> null remove the danger attribute

Bram Over a year ago

I am sorry to say but still the same problem: danger="true". Seems like this is not working for attributes. Although I found an example in the docs that does work [disabled]. I will try to create a plunkr.

Bram Over a year ago

an empty string '' instead of true seems to do the trick. Thanks!

|

Collectives™ on Stack Overflow

Dynamically set attribute on component in html template angular 2

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related