Is it possible to conditionally display element attributes using Angular2?

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.

lol, the linked answer is after this one... seems like that one should be the duplicate. — pinguinos, Jun 07 '19 at 13:49
@pinguinos Age of the question does not matter; better answers are given preference. Have a look here: https://meta.stackoverflow.com/questions/251938/should-i-flag-a-question-as-duplicate-if-it-has-received-better-answers — SiKing, Jun 07 '19 at 14:31
@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, Jun 07 '19 at 15:20
@SiKing - "This question already has an answer here..." The word "already" suggests the age of the question does matter. — pinguinos, Jun 10 '19 at 13:27

Günter Zöchbauer · Accepted Answer · 2016-04-14T08:09:05.683

55

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

edited Apr 14 '16 at 08:09

answered Mar 26 '16 at 20:55

Günter Zöchbauer

623,577
216
2,003
1,567

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? – Vladimir Iliev Jun 02 '16 at 12:06
I think it should work the same for `tabindex`. If not I think it's a bug. – Günter Zöchbauer Jun 02 '16 at 12:16
1
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.
– Vladimir Iliev Jun 02 '16 at 12:16
I looked it up and replaced my comment. See above. – Günter Zöchbauer Jun 02 '16 at 12:17
I have reported it in: https://github.com/angular/angular/issues/8960 – Vladimir Iliev Jun 02 '16 at 12:56
1

adding/removing `tabindex` works fine with attribute binding syntax https://plnkr.co/edit/ossRURXRCyu2srlEoqMP?p=preview – Günter Zöchbauer Jun 02 '16 at 13:03
2

Thank you a lot - it works as expected. – Vladimir Iliev Jun 02 '16 at 13:07
I want to add conditionally some 2 way binding attribute to custom widget like `` How can I add `[(selection)]` conditionally? – sainu Apr 09 '18 at 11:21
That's not an attribute and therefore my answer doesn't apply. What are you trying to accomplish? You could add one `` – Günter Zöchbauer Apr 09 '18 at 11:29

Is it possible to conditionally display element attributes using Angular2?

1 Answers1

Linked

Related