Attribute, Class, And Style Bindings In Angular

Introduction

You may learn more about the distinctions between attribute, class, and style binding in this tutorial as well as how to apply them effectively. The manual will describe the many approaches we’ll use to bind the DOM element attributes. The example that follows will demonstrate how to bind these properties and their syntax.

<input [attr.attribute-name]="disable">
<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

<h2>Attribute Binding Example</h2> 
<table> 
   <tr> 
       <td colspan="{{4}}"></td> 
   </tr> 
</table>

“Template parsing errors: Can’t bind to “colspan” as it isn’t a recognized native property” will be thrown as a result of this.

For binding the properties, we can only use interpolation and property binding; we cannot use attribute binding. To construct and bind to attributes, we require distinct attribute binding. Check to see my earlier guide Property Binding in Angular (/guides/ property-binding-angular) to learn more about property binding.

Similar to property binding, attribute binding uses syntax. When binding properties, we just supply the element enclosed in brackets. A dot (.) is used before the attribute name in the case of attribute binding, which begins with the prefix attar. The attribute value is then bound utilizing an expression that resolves to a string.

Let’s look at an instance where we create a table and modify the element’s colspan attribute. By assigning a value to the attr. colspan attribute property, in this case, we are setting the colspan to 3.

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

A view element’s class property is set via class binding. With class binding, we may add and delete CSS class names from an element’s class property.

The syntax for class binding is similar to that of property binding. When binding properties, we just supply the element enclosed in brackets. However, in the case of class binding, the prefix class is followed by a dot (.) and the class name. The CSS class name class.class-name is then used to bind the class value.

The typical method of establishing a class attribute without binding is demonstrated in the example below. In this instance, we are establishing a class attribute without binding for the class’myClass’

Enlightener<div class="myClass">Setting class without binding</div>

The example below demonstrates binding all of the class values. In this instance, class binding is being used to bind the class “myClassBinding.”

<div class="myClass" [class]="myClassBinding">Setting all classes with binding</div>

The class name is bound to the class binding whenever the template expression evaluates to true in an Angular component. When the template expression is evaluated as false, the class is removed.

Let’s look at another instance where class binding is used to bind a certain class name. In this instance, the ‘isTrue’ value will link the’myClass’ to a class property if it evaluates to true. It will not link the “myClass” to a class property if it evaluates to false.

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

A view element’s style is set via style binding. Style binding enables us to set inline styles.

The syntax for style binding is similar to that of class and attribute binding. When binding properties, we just supply the element enclosed in brackets. However, in the case of style binding, the name of the style is followed by a dot (.) and the prefix class. The style value is then bound to a CSS style name, such as style.style-name.

Let’s look at a style binding illustration. In this illustration, the “h1” element is being bound to a colour style. The h1 tags’ text will appear in blue on the page.

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 {
}

The unit will also be present in style bindings. The style font size is specified in “px” and “percent” units in the example below.

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;
}