Attribute Data Binding In Angular

This article will explain attribute data binding in Angular.

Introduction

 
I am going to discuss Angular Attribute Binding with examples. In Interpolation and Property binding, we discussed that they are dealing with the HTML element properties (DOM Properties) and not with the attributes.

What is attribute in HTML?

 
Attributes are used to define the character of an element in HTML. Every HTML element has an attribute like height and width in the img element. Colspan in a table and some other attributes like src, href etc.
 

Why do we need attribute data binding?

 
In some situations, we may need to bind HTML element attributes. For example, colspan, area, height, width, placeholder, value, etc. There are a number of HTML attributes. HTML does not have any corresponding DOM (Document Object Model) properties. So, in this case, we need to bind to HTML element attributes.
 
Let's understand attribute data binding with an example. 
 
Step 1
 
Open a command prompt from Windows search. Or, you can press window key +R from the keyboard, type cmd, and hit Enter.
 
Step 2
 
Create a new project in Angular.
 
ng new AngularDemo
 
Step 3
 
Open that project in Visual Studio Code. Type the following command to open the project:
 
Code .
 
Step 4
 
Open terminal in Visual Studio Code and create a component named "example".
 
ng g c example
 
Step 5
 
Open the example component in your application. Replace the code with this one.
  1. Import { Component, OnInit } from ‘@angular/core’;  
  2.   
  3. @Component({  
  4.   selector: ‘app-example’,  
  5.   templateUrl: ‘./example.component.html’,  
  6.   styleUrls: [‘./example.component.css’]  
  7. })  
  8. export class ExampleComponent {  
  9.   
  10.   imageHeight:number=150;  
  11.   imageWidth:number=150;  
  12.   imagePath:string=”assets/Images/farhan.png”;  
  13.     
  14. }  
Step 6
 
Open example.component.html in your application. Add the following code.
 
<img [attr.Height]=”imageHeight” [attr.Width]=”imageWidth” [attr.src]=”imagePath”>
 
Step 7
 
Open app.component.html in your application and take selector name from employee.component.ts.
 
< <app-example></app-example>
 
Step 8
 
Run the application by typing the following command.
 
ng serve –open
 
Attribute Data Binding In Angular
 

Another example of attribute binding

  1. import { Component, OnInit } from '@angular/core';  
  2.   
  3. @Component({  
  4.   selector: 'app-example',  
  5.   templateUrl: './example.component.html',  
  6.   styleUrls: ['./example.component.css']  
  7. })  
  8. export class ExampleComponent {  
  9.   
  10.   id:number=1;  
  11.   name:string="Farhan Ahmed";  
  12.   gender:string="Male";  
  13.   designation:string="Software Developer";  
  14.   location:string="Bangalore";  
  15.   salary:number=70000;  
  16.   imageHeight:number=100;  
  17.   imageWidth:number=100;  
  18.   imagePath:string="assets/Images/farhan.png";  
  19.   columnSpan:number=4;  
  20. }  
  21.   
  22.   
  23. <div class="container">  
  24.     <table class="table table-bordered">  
  25.         <thead class="bg-primary text-white">  
  26.             <tr>  
  27.                 <th [attr.colspan]="columnSpan">  
  28.                     <h4 class="text-center text-uppercase">Employee Information</h4>  
  29.                 </th>  
  30.             </tr>  
  31.         </thead>  
  32.         <tbody>  
  33.             <tr>  
  34.                 <td>Employee ID:</td>  
  35.                 <td>{{id}}</td>  
  36.             </tr>  
  37.             <tr>  
  38.                 <td>Employee Name:</td>  
  39.                 <td>{{name}}</td>  
  40.             </tr>  
  41.             <tr>  
  42.                 <td>Gender</td>  
  43.                 <td>{{gender}}</td>  
  44.             </tr>  
  45.             <tr>  
  46.                 <td>Designation</td>  
  47.                 <td>{{designation}}</td>  
  48.             </tr>  
  49.             <tr>  
  50.                 <td>Location</td>  
  51.                 <td>{{location}}</td>  
  52.             </tr>  
  53.             <tr>  
  54.                 <td>Salary</td>  
  55.                 <td>{{salary}}</td>  
  56.             </tr>  
  57.             <tr>  
  58.                 <td>Profile Image</td>  
  59.                 <td><img [attr.Height]="imageHeight" [attr.Width]="imageWidth" [attr.src]="imagePath"></td>  
  60.             </tr>  
  61.         </tbody>  
  62.     </table>  
  63. </div>  
Attribute Data Binding In Angular
 

Summary

 
In this article, I have tried to explain Angular attribute data binding with some examples. I hope this article will be helpful for you to understand attribute binding.