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
)
Is it possible to conditionally display element attributes using Angular2?
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
Angular 2 conditionally add attribute directives
That is not supported. Directives are only applied when static HTML matches the selector.
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 add attribute to HTML element in angular 6
You should be able to solve this by just changing the button element in your template to:
<button mat-button [ngClass]="selectedButtonType">This Button </button>
I hope that helps!
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>
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
angular 2 conditionally show or hide components
@Component({
selector: 'Parent',
template: `
<div class="tab">
<span (click)="show('show1')" class="btn">show child 1</span>
<span (click)="show('show2')" class="btn">show child 2</span>
<span (click)="show('show3')" class="btn">show child 3</span>
</div>
<div *ngIf="show1"><Child1></Child1></div>
<div *ngIf="show2"><Child2></Child2></div>
<div *ngIf="show3"><Child3></Child3></div>
`
})
export class ParentComponent {
public show1 = true;
public show2 = false;
public show3 = false;
show(tab){
this.show1 = false;
this.show2 = false;
this.show3 = false;
console.log(tab)
if(tab == 'show1') {
this.show1 = true
}
if(tab == 'show2') {
this.show2 = true
}
if(tab == 'show3') {
this.show3 = true
}
}
}
Very crude form. Optimise the code as you like.
But, hope you got the idea.
What is the best way to conditionally apply attributes in AngularJS?
I am using the following to conditionally set the class attr when ng-class can't be used (for example when styling SVG):
ng-attr-class="{{someBoolean && 'class-when-true' || 'class-when-false' }}"
The same approach should work for other attribute types.
(I think you need to be on latest unstable Angular to use ng-attr-, I'm currently on 1.1.4)
Related Topics
Chrome Bug with Colspan and Border
Placing an Image to The Top Right Corner - CSS
How to Manage Duplicate Code in Static HTML Websites
Height of Textarea Does Not Match The Rows in Firefox
Styling The Last Td in a Table with CSS
How to Make Links in Fromhtml Clickable? (Android)
Cutting Image Diagonally with CSS
What's The Point of HTML Forms 'Name' Attribute
How to Reuse HTML Like a Template on Multiple Pages
How to Make Rectangular Image Appear Circular with CSS
Floated Child Elements: Overflow:Hidden or Clear:Both
Right Align and Left Align Text in Same HTML Table Cell
Center Text Vertically Within <Div>
Flexbox 3 Divs, Two Columns, One with Two Rows
How Is CSS Applied by The Browser, and Are Repaints Affected by It