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.

• Interpolation data binding in angular
• Property Data binding in angular
• Class data binding in angular
• Style data binding in angular

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.

Import { Component, OnInit } from ‘@angular/core’;

@Component({
  selector: ‘app-example’,
  templateUrl: ‘./example.component.html’,
  styleUrls: [‘./example.component.css’]
})
export class ExampleComponent {

  imageHeight:number=150;
  imageWidth:number=150;
  imagePath:string=”assets/Images/farhan.png”;

}

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

 

 

Another example of attribute binding

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent {

  id:number=1;
  name:string="Farhan Ahmed";
  gender:string="Male";
  designation:string="Software Developer";
  location:string="Bangalore";
  salary:number=70000;
  imageHeight:number=100;
  imageWidth:number=100;
  imagePath:string="assets/Images/farhan.png";
  columnSpan:number=4;
}


<div class="container">
    <table class="table table-bordered">
        <thead class="bg-primary text-white">
            <tr>
                <th [attr.colspan]="columnSpan">
                    <h4 class="text-center text-uppercase">Employee Information</h4>
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Employee ID:</td>
                <td>{{id}}</td>
            </tr>
            <tr>
                <td>Employee Name:</td>
                <td>{{name}}</td>
            </tr>
            <tr>
                <td>Gender</td>
                <td>{{gender}}</td>
            </tr>
            <tr>
                <td>Designation</td>
                <td>{{designation}}</td>
            </tr>
            <tr>
                <td>Location</td>
                <td>{{location}}</td>
            </tr>
            <tr>
                <td>Salary</td>
                <td>{{salary}}</td>
            </tr>
            <tr>
                <td>Profile Image</td>
                <td><img [attr.Height]="imageHeight" [attr.Width]="imageWidth" [attr.src]="imagePath"></td>
            </tr>
        </tbody>
    </table>
</div>

 

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.