Angular Attribute Binding Example

By Arvind Rai, February 10, 2024

On this page we will provide Angular attribute binding example. Attribute binding is to set the value of attribute directly. We must use attribute binding when there is no element property to bind. Attributing binding should be performed with pure attributes such as ARIA, SVG and COLSPAN. Pure attributes are those whose corresponding DOM property is not available. Attribute binding is performed in the same way as property binding with difference that in attribute binding we need to prefix attribute name with attr. keyword. On this page we will discuss the differences between HTML attribute and DOM property. We will also provide complete example of attribute binding step-by-step.

1. Differences between HTML Attribute and DOM Property

Angular 2 attribute binding is required in those cases when HTML attribute has no corresponding DOM property. Find some differences between HTML attribute and DOM property.

1. Attributes are defined by HTML and properties are defined by DOM.

2. The responsibility of HTML attributes is just to initialize DOM properties. And then later DOM properties can change but HTML attributes cannot.

3. There are some HTML attributes that have corresponding DOM property and those DOM properties have corresponding HTML attributes such as id.

4. There are also some HTML attributes that do not have corresponding DOM property such as colspan.

5. There are also some DOM properties that do not have corresponding HTML attributes such as textContent.

6. The HTML attribute value contains initial value whereas DOM property value contains current value.

2. Attribute Binding

Attribute binding is same as property binding with the difference that we need to add attr. as prefix with attribute name. Here we will discuss attribute binding for colspan attribute of <td> element.
Suppose we have defined a property clspn with some numeric value in our component.

clspn = 2;

1. Find the attribute binding using bracket [].

<td [attr.colspan]="clspn">

2. Attribute binding using bind- keyword.

<td bind-attr.colspan = "clspn">

3. Attribute binding using interpolation.

<td attr.colspan = "{{clspn}}">

3. Complete Example

app.component.ts

import {Component} from '@angular/core';
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})
export class AppComponent {
	h = 300;
	w = 200;
	bdr = 5;
	clspn = 2;
}

app.component.html

<table [border]="bdr" [attr.height]="h" [width]="w">
  <tr>
     <td [attr.colspan]="clspn"> A + B </td>
  </tr>
  <tr>
     <td> C </td>
     <td> D </td>
  </tr>
</table>

In the above code border and width are using element property binding and height and colspan are using attribute binding.

app.module.ts

import {NgModule}       from '@angular/core';
import {BrowserModule}  from '@angular/platform-browser';
import {AppComponent}   from './app.component';
@NgModule({
  imports:      [BrowserModule],
  declarations: [AppComponent],
  bootstrap:    [AppComponent]
})
export class AppModule { }

Find the print-screen of the output.