How to add conditional attribute in Angular 2?

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.

8
Leave a Reply

avatar
8 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
Jason Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Jason
Guest

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… Read more »

Jason
Guest

in angular-2 attribute syntax is

<div [attr.role]="myAriaRole">

Binds attribute role to the result of expression myAriaRole.

so can use like

[attr.role]="myAriaRole ? true: null"

Jason
Guest

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. 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… Read more »

Jason
Guest

If it’s an input element you can write something like….
<input type="radio" [checked]="condition"> The value of condition must be true or false.

Also for style attributes…
<h4 [style.color]="'red'">Some text</h4>

Jason
Guest

you can use this.

<span [attr.checked]="val? true : false"> </span>

Jason
Guest

You can use a better approach for someone writing HTML for an already existing scss.

html

[attr.role]="<boolean>"

scss

[role = "true"] { ... }

That way you don’t need to <boolean> ? true : null every time.

Jason
Guest

Here, the paragraph is printed only ‘isValid’ is true / it contains any value

<p *ngIf="isValid ? true : false">Paragraph</p>

Jason
Guest

Inline-Maps are handy, too.

They’re a little more explicit & readable as well.

[class]="{ 'true': 'active', 'false': 'inactive', 'true&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).