Attribute, Class, and Style Bindings in Angular
This guide will cover the different ways through which we can bind the DOM element properties.
Jan 29, 2019 • 6 Minute Read
Introduction
This guide will help you to understand the differences between and how to use attribute, class, and Style binding in more depth. The guide will cover the different ways through which we are going to bind the DOM element properties. The following example will show how we can bind these properties and their syntax.
<tr><td [attr.attribute-name]="Attribute Value"></td></tr>
<h1 [class.class-name]="Class Value"></h1>
<h1 [style.style-name]="Style Value"></h1>
Attribute Binding in Angular
Attribute binding is used to bind an attribute property of a view element. Attribute binding is mainly useful where we don’t have any property view with respect to an HTML element attribute.
Let's consider an example where we are trying to bind a value to the colspan property of the element.
<h2>Attribute Binding Example</h2>
<table>
<tr>
<td colspan="{{4}}"></td>
</tr>
</table>
This will throw an error "Template parse errors: Can't bind to 'colspan' since it isn't a known native property".
We can only use property binding and interpolation for binding the properties, not attributes. We need separate attribute binding to create and bind to attributes. To learn more about property binding, check out my previous guide [Property Binding in Angular](/guides/ property-binding-angular).
Attribute binding syntax is like property binding. In property binding, we only specify the element between brackets. But in the case of attribute binding, it starts with the prefix attar, followed by a dot (.), and the name of the attribute. You then bind the attribute value using an expression that resolves to a string.
Let's consider an example where we are creating a table and setting the colspan attribute of the element. Here, we are setting the colspan to 3 by binding value to attr.colspan attribute property.
File Name: example.component.ts
import { Component } from "@angular/core";
@Component({
selector: 'app-example',
template: `
<div>
<table>
<tr><td [attr.colspan]="3">three</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
</table>
</div>
`
})
export class ExampleComponent {
}
Class Binding in Angular
Class binding is used to set a class property of a view element. We can add and remove the CSS class names from an element's class attribute with class binding.
The class binding syntax is also like property binding. In property binding, we only specify the element between brackets. But in the case of class binding, it starts with the prefix class, followed by a dot (.), and the name of the class. You then bind the class value with CSS class name like [class.class-name].
The example below shows the standard way of setting class attribute without binding. In this case, we are setting a class attribute with a class name 'myClass' without binding.
<div class="myClass">Setting class without binding</div>
The example below shows setting all the class values with binding. In this case, we are binding class "myClassBinding" with class binding.
<div class="myClass" [class]="myClassBinding">Setting all classes with binding</div>
Whenever the template expression evaluates to true, Angular binds that class name to the class binding. It removes the class when the template expression evaluates to false.
Let's see another example where we are binding a specific class name with class binding. In this case, if 'isTrue' value evaluates to true then it will bind the 'myClass' to a class property. If it evaluates to false, then it will not bind the 'myClass' to a class property.
File Name: example.component.ts
import { Component } from "@angular/core";
@Component({
selector: 'app-example',
template: `
<div>
<h1 [class.myClass]="isTrue">This class binding is for true value</h1>
<h1 [class.myClass]="!isTrue">This class binding is for false value</h1>
</div>
`
})
export class ExampleComponent {
isTrue: boolean = true;
}
While the class binding is a fine way of binding, the ngClass directive is preferred for handling multiple class names at the same time.
Style Binding in Angular
Style binding is used to set a style of a view element. We can set inline styles with style binding.
Like with class and attribute binding, style binding syntax is like property binding. In property binding, we only specify the element between brackets. But in case of style binding, it starts with the prefix class, followed by a dot (.) and the name of the style. You then bind the style value with CSS style name like the [style.style-name].
Let's consider an example of style binding. In this example, we are binding a color style to the 'h1' element. It will display the text within the h1 tags in a blue color.
File Name: example.component.ts
import { Component } from "@angular/core";
@Component({
selector: 'app-example',
template: `
<div>
<h1 [style.color]="blue">This is a Blue Heading</h1>
</div>
`
})
export class ExampleComponent {
}
Style bindings will also have the unit. In the example below, we are setting style font size in "px" and "%" units.
import { Component } from "@angular/core";
@Component({
selector: 'app-example',
template: `
<div>
<span [style.font-size.px]="isTrue? 20 : 12">This style binding is set for true value</span>
<span [style.font-size.%]="!isTrue : 120 : 30">This style binding is set for false value</span>
</div>
`
})
export class ExampleComponent {
isTrue: boolean = true;
}
Conclusion
In this guide, we have explored the Attribute, Class, and Style binding techniques in Angular. We have also seen why we should use these bindings.
As we saw Attribute, Class, and Style bindings are part of property binding. You can learn more about property binding in my guide Property Binding in Angular.