Is it possible to conditionally display element attributes using Angular2? [duplicate]

29
votes

I have some code that uses Polymer attributes on elements, for example:

<paper-drawer-panel force-narrow>

The way polymer works is that I can't simply say force-narrow="false" if I want to disable the attribute, it has to be removed altogether. Is there a way in Angular2 to conditionally remove the entire attribute? I can't seem to find any information on this topic. I could use ngIf and repeat the entire element with and without the attribute but I would rather not if possible. Thanks!

Edit - Why was this question marked and closed as a duplicate? I asked this question a month before the duplicate post in question. God this site sucks sometimes.

Edit 2 - I understand the rules, but still feel entitled to complain.

1
htmlattributesangularpolymer-1.0
lol, the linked answer is after this one... seems like that one should be the duplicate. - pinguinos
@pinguinos Age of the question does not matter; better answers are given preference. Have a look here: meta.stackoverflow.com/questions/251938/… - SiKing
@SiKing How would you argue that the other posts answers are better? There are several duplicates and one that's downvoted into oblivion. On the other hand, my post has one answer that's simple and accurate. Can't believe how many people try to justify the janky rules of this site. - Sloth Armstrong
Number of upvotes on the question and the accepted answer. - SiKing
@SiKing - "This question already has an answer here..." The word "already" suggests the age of the question does matter. - pinguinos

1 Answers

55
votes

Simple attribute binding does what you want:

[attr.force-narrow]="someField ? true : null"

the attribute is not removed when someField is false, only when it's null