29

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.

Improve this question
5
  • 1
    lol, the linked answer is after this one... seems like that one should be the duplicate. Commented Jun 7, 2019 at 13:49
  • @pinguinos Age of the question does not matter; better answers are given preference. Have a look here: meta.stackoverflow.com/questions/251938/… Commented Jun 7, 2019 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. Commented Jun 7, 2019 at 15:20
  • 1
    Number of upvotes on the question and the accepted answer. Commented Jun 7, 2019 at 15:26
  • 1
    @SiKing - "This question already has an answer here..." The word "already" suggests the age of the question does matter. Commented Jun 10, 2019 at 13:27

1 Answer 1

Reset to default
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

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

8 Comments

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?
I think it should work the same for tabindex. If not I think it's a bug.
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"
I looked it up and replaced my comment. See above.
adding/removing tabindex works fine with attribute binding syntax plnkr.co/edit/ossRURXRCyu2srlEoqMP?p=preview
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.