Angular Attribute Binding Example

By Arvind Rai, June 28, 2020

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.

Software Used
Differences between HTML Attribute and DOM Property
Attribute Binding
Complete Example
Run Application
Reference
Download Source Code

Software Used

Find the software used in our demo.
1. Angular 9.1.11
2. Node.js 12.5.0
3. NPM 6.9.0

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.

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

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

Run Application

To run the application, find the steps.
1. Download source code using download link given below on this page.
2. Use downloaded src in your Angular CLI application. To install Angular CLI, find the link.
3. Run ng serve using command prompt.
4. Access the URL http://localhost:4200
Find the print screen of the output.