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

Question

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.

Effector

lol, the linked answer is after this one... seems like that one should be the duplicate. – Selfevident

@Selfevident Age of the question does not matter; better answers are given preference. Have a look here: meta.#252438 – Profant

@Profant 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. – Effector

Number of upvotes on the question and the accepted answer. – Profant

@Profant - "This question already has an answer here..." The word "already" suggests the age of the question does matter. – Selfevident

Answer 1

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

Fletafletch

It seems that this is not true for "tabIndex" attribute - when I set the property to null it still render this attribute with it's default value (0), which makes the element focusable. Could you please confirm? – Murrell

I think it should work the same for tabindex. If not I think it's a bug. – Heliotropin

I need to set (to 0) or completely remove the "tabIndex" attribute depending on if the component is on root level (nested component should not be focusable). Currently there is no way to remove the attribute, and if it's present the element is focusable. <ul [tabindex]="root ? 0 : null" – Murrell

I looked it up and replaced my comment. See above. – Heliotropin

I have reported it in: github.com/angular/angular/issues/8960 – Murrell

adding/removing tabindex works fine with attribute binding syntax plnkr.co/edit/ossRURXRCyu2srlEoqMP?p=preview – Heliotropin

Thank you a lot - it works as expected. – Murrell

I want to add conditionally some 2 way binding attribute to custom widget like <selectable [(selection)]="selectedValue"></selectable> How can I add [(selection)] conditionally? – Thoroughpaced

That's not an attribute and therefore my answer doesn't apply. What are you trying to accomplish? You could add one <selectable *ngIf="cond" ...></selectable></selectable *ngIf="!cond" ...></selectable> – Heliotropin