Home  >  Angular

Angular 2 Attribute Binding Example

By Arvind Rai, November 28, 2016
On this page we will provide angular 2 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 using TypeScript.

Software Used

Find the software used in our demo.
1. Angular 2.3.0
2. TypeScript 2.0.10
3. Node.js 4.6.0
4. NPM 3.10.8
5. Firefox 50.1.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 using TypeScript


app.component.ts
import {Component} from '@angular/core';
@Component({
    selector: 'my-app',
    templateUrl: 'app/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.

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 { } 
main.ts
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModule} from './module';
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);  
index.html
<html>
  <head>
    <title>Angular 2 Demo</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="node_modules/core-js/client/shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <!-- Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>
      System.import('myApp').catch(function(err){ console.error(err); });
    </script>
  </head>
  <body>
    <my-app>Please Wait...</my-app>
  </body>
</html> 

Run Application

Find the steps to run the example.
1. Install Node.js and NPM in the system if not already installed. Make sure that Node.js version must be 4.x.x or higher and NPM version must be 3.x.x or higher.
2. Download the source code using download link given below in the example.
3. Go to the root folder of the project using command prompt and run npm install command.
4. Now run npm start command.
5. Now run index.html file. Find the print screen of the output.
Angular 2 Attribute Binding Example

Reference

Angular 2 Class Binding

Download Source Code

POSTED BY
ARVIND RAI
ARVIND RAI
FIND MORE TUTORILAS






©2019 concretepage.com | Privacy Policy | Contact Us