How to add conditional attribute in Angular 2

Question

How can I conditionally add an element attribute e g  the checked of a checkbox    Previous versions of Angular had NgAttr and I think NgChecked which all seem to provide the functionality that I m after   However  these attributes do not appear to exist in Angular 2 and I see no other way of providing this functionality

User · Answer

Inline-Maps are handy  too   They re a little more explicit  amp  readable as well    class      true    active    false    inactive    true amp false    some-other-class     trinaryBoolean      Just another way of accomplishing the same thing  in case you don t like the ternary syntax or ngIfs  etc

User · Answer

null removes it    attr checked   value        null    or   attr checked   value    checked    null    Hint   Attribute vs property  When the HTML element where you add this binding does not have a property with the name used in the binding  checked in this case  and also no Angular component or directive is applied to the same element that has an  Input   checked   then  xxx        can not be used     See also What is the difference between properties and attributes in HTML   What to bind to when there is no such property  Alternatives are  style xxx          attr xxx          class xxx        depending on what you try to accomplish   Because  lt input gt  only has a checked attribute  but no checked property  attr checked        is the right way for this specific case   Attributes can only handle string values  A common pitfall is also that for  attr xxx        bindings the value       is always stringified  Only properties and  Input  s can receive other value types like boolean  number  object         Most properties and attributes of elements are connected and have the same name     Property-attribute connection  When bound to the attribute the property also only receives the stringified value from the attribute  When bound to the property the property receives the value bound to it  boolean  number  object       and the attribute again the stringified value    Two cases where attribute and property names do not match     Error while adding  quot for quot  attribute to label in angular 2 0 template https   developer mozilla org en-US docs Web API HTMLLabelElement htmlFor  see the first sentence of the description htmlFor property reflects the value of the for - for probably didn t work because it s a keyword in C or JavaScript  Why is colspan not a known native attribute in Angular 2    Angular was changed since then and knows about these special cases and handles them so that you can bind to  lt label  for    even though no such property exists  same for colspan

User · Answer

I wanted to have tooltip only for a particular field as added below in code but you want to have tooltip on multiplent you can have an array valdidate using   Multiple Elements haveing custom data-tooltip attribute   1     key1ToHaveTooltip    key2ToHaveTooltip   includes key    2    key1ToHaveTooltip    key2ToHaveTooltip   indexOf key    -1    to have tooltip attribute on more than 1 element       lt div  ngFor  let key of Keys                attr data-tooltip   key      IwantOnlyThisKeyToHaveTooltipAttribute                                                 Hey  I am a tooltip on key matched                                               null  gt      lt  div gt

User · Answer

If it s an input element you can write something like      lt input type  radio   checked   condition  gt  The value of condition must be true or false   Also for style attributes     lt h4  style color    red   gt Some text lt  h4 gt

User · Answer

in angular-2 attribute syntax is   lt div  attr role   myAriaRole  gt    Binds attribute role to the result of expression myAriaRole   so can use like   attr role   myAriaRole   true  null

User · Answer

you can use this    lt span  attr checked   val  true   false  gt   lt  span gt

User · Answer

You can use a better approach for someone writing HTML for an already existing scss  html   attr role    lt boolean gt     scss   role    true             That way you don t need to  lt boolean gt    true   null every time

User · Answer

Here  the paragraph is printed only  isValid  is true   it contains any value   lt p  ngIf  isValid   true   false  gt Paragraph lt  p gt

User · Answer

Refining G  nter Z  chbauer answer  This appears to be different now  I was trying to do this to conditionally apply an href attribute to an anchor tag  You must use undefined for the  do not apply  case  As an example  I ll demonstrate with a link conditionally having an href attribute applied  --EDIT-- It looks like angular has changed some things  so null will now work as expected  I ve update the example to use null rather than undefined  An anchor tag without an href attribute becomes plain text  indicating a placeholder for a link  per the hyperlink spec  For my navigation  I have a list of links  but one of those links represents the current page  I didn t want the current page link to be a link  but still want it to appear in the list  it has some custom styles  but this example is simplified    lt a  attr href   quot currentUrl     link url   link url   null quot  gt   This is cleaner than using two  ngIf s on a span and anchor tag  I think  It s also perfect for adding a disabled attribute to a button

[javascript] How to add conditional attribute in Angular 2?

Inline-Maps are handy, too.

Examples related to javascript

Examples related to angular