How to Add Conditional Attribute in Angular 2

How to add conditional attribute in Angular 2?

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 <input> 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 "for" 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 <label [for]=" even though no such property exists (same for colspan)

Add an attribute on a condition with angular 2

Using two-way-binding is discouraged in reactive forms. The point is to utilize the form controls instead. Why use reactive form, if you are using two-way-binding? That would mean the model driven form is totally redundant. So if you want to solve this problem using the model-driven form, I'd suggest the following:

Since you are using a separate object (record.priority) it cannot automatically be bound as the pre-selected value, you'd have to somehow create a reference. So when building a form you can do this:

this.myForm = this.fb.group({
  priority: [this.formModel.priorities.find(x => x.id == this.record.priority.id)]
});

And the template would look like this:

<form [formGroup]="myForm">
  <select *ngIf="formModel" formControlName="priority">
    <option value="-1">Select priority</option>
    <option *ngFor="let priority of formModel.priorities"
      [ngValue]="priority"
      [innerHtml]="priority.name"></option>
  </select>
</form>

Now the value object you are getting from the form holds this value.

if having the record coming async, you can set a boolean flag to not show the form until the values have been set. Or you can build an empty form initially and then use setValue() for the form control.

DEMO

EDIT: Looking closer, that you want to have the condition to set null if there is no value for record.priority? That can be done well in the form control as well:

priority: [this.record.priority ? this.formModel.priorities.find(x => x.id == this.record.priority.id) : null]

How to conditionally assign attribute value in angular 2?

Instead of value="dataSelected ? {{selectedDataName}} : ''" you can set it value with below possibile ways :

<md-input [attr.value]="dataSelected ? selectedDataName : ''"></md-input>

or

<md-input [value]="dataSelected ? selectedDataName : ''"></md-input>

or

<md-input value="{{dataSelected ? selectedDataName : ''}}"></md-input>

Angular 2 conditionally add attribute directives

That is not supported. Directives are only applied when static HTML matches the selector.

Set attribute conditionally in angular 4

What you ask for is setting a property, not an attribute.

You can use

[href]="contactItem.contactForm.indexOf('@') !== -1 ? 'mailto: ' + contactItem.contactForm : '#'"

For conditional attribute binding see How to add conditional attribute in Angular 2?

Angular 2 Conditional attribute not working

You can achieve it following way although it's not very beautiful.

<ion-label stacked *ngIf="isStacked" color="primary">{{label}}</ion-label>
<ion-label *ngIf="!isStacked" color="primary">{{label}}</ion-label>

How to conditionally add style attribute to template in angular?

What about

<div class="backgroundGradient" [ngStyle]="myStyle"></div>

componenet.ts

myStyle:any

ngOnInit() {
  if (hasImage) {
  this.myStyle={'background-image':url}
  }

https://angular.io/api/common/NgStyle

---

Related Topics