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.

Answer 1

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>