Angular Attribute Binding

Back to: Angular Tutorials For Beginners and Professionals

Angular Attribute Binding with Examples

In this article, I am going to discuss the Angular Attribute Binding with examples. Please read our previous article where we discussed HTML Attribute vs DOM Property in Detail. At the end of this article, you will understand the following pointers in detail.

1. What is Attribute Binding in Angular?
2. Why we need Attribute Binding in Angular Application?
3. Understanding Angular Attribute Binding with an Example
4. Using Angular Interpolation
5. Using Property Binding and Attribute Binding in Angular

Why we need Attribute Binding in Angular Application?

In our Angular Interpolation and Property Binding articles, we discussed that they both (Interpolation and Property Binding) are dealing with the DOM Properties but not with the HTML attributes. But there are some HTML elements (such as colspan, area, etc) that do not have the DOM Properties. Now the question is how to deal with such elements that do not have DOM Properties as we can’t use Interpolation and Attribute Binding. The Answer is Angular Attribute Binding.

With Attribute Binding in Angular, you can set the value of an HTML Element Attribute directly. So, the Attribute Binding is used to bind the attribute of an element with the properties of a component dynamically. 

Understanding Angular Attribute Binding with an Example:

Let us understand the need and use of Angular Attribute Binding with an example. We want to do here is, we want to show the Details of a Student on a webpage as shown in the below image. 

Let us see how to achieve this step by step.

Step1: Modify the app.component.css file

First, open app.component.css file which you can find inside the app folder and then copy and paste the following styles into it. These are the styles that we want to apply to the table.

table {
    color: #369;
    font-family: Arial, Helvetica, sans-serif;
    font-size:large;
    border-collapse: collapse;
}
td {
    border: 1px solid black;
}
thead{
    border: 1px solid black;
}

Step2: Modify the app.component.html file

Open app.component.html file and then copy and paste the following code in it. You can also find this file inside the app folder. Here, we have created one table to display the student details. Again here we are using angular interpolation i.e. double curly braces to bind the student data.

<table>
  <thead>
      <tr>
          <th colspan="2">
              {{pageHeader}}
          </th>
      </tr>
  </thead>
  <tbody>
      <tr>
          <td>First Name</td>
          <td>{{FirstName}}</td>
      </tr>
      <tr>
          <td>Last Name</td>
          <td>{{LastName}}</td>
      </tr>
      <tr>
          <td>Branch</td>
          <td>{{Branch}}</td>
      </tr>
      <tr>
          <td>Mobile</td>
          <td>{{Mobile}}</td>
      </tr>
      <tr>
          <td>Gender</td>
          <td>{{Gender}}</td>
      </tr>
      <tr>
          <td>Age</td>
          <td>{{Age}}</td>
      </tr>
  </tbody>
</table>

Step3: Modify the app.component.ts file

Modify the app.component.ts file as shown below. Here within the component decorator, we are providing the stylesUrl and templateUrl values to the external files that we just modified in our previous two steps. Then as part of the Component class, we are creating the required student properties with some value as well as the header value.

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
    pageHeader: string = 'Student Details';
    FirstName: string = 'Anurag';
    LastName: string = 'Mohanty';
    Branch: string = 'CSE';
    Mobile: number = 9876543210;
    Gender: string = 'Male';
    Age: number = 22;
}

Now, with the above changes in place, if you browse the application (ng serve -o), you will get the output as expected.

Using Angular Interpolation:

If you notice, here we have hardcode the colspan value to 2 in the HTML file i.e. in the app.component.html file. Let us say we also want to bind this (colspan) value from a property of the component class. To do so, let us add a new property with the name ColumnSpan in the AppComponent (app.component.ts file) class as shown in the below image.

Now, you may be intended to use the ColumnSpan property to set the colspan attribute of the th element using angular interpolation as shown in the below image.

Once you compiled, you will get the following error.

Now, have a look at the browser, and you will not get the output as expected as shown in the below image. The colspan is not working here.

In order to see what went wrong, launch the browser developer tools by pressing the F12 key and open the Console tab as shown in the below image.

It clearly shows that you “Can’t bind to ‘colspan’ since it isn’t a known property of ‘th’”. So, you cannot use angular interpolation to bind the colspan attribute of th element.

Using Property Binding in Angular:

You will also get the same error if you try to bind the colspan property using the Property Binding Technique. Let us prove this. First, modify the colspan binding in the app.component.html file as shown below.

With the above Property Binding in place, now if you compile the project, then you will get the same error as shown in the below image.

We get the above error. The reason for this error is, we do not have a corresponding property in the DOM for the colspan attribute. In order to solve the above error, what you need to do is you need to use Angular Attribute Binding, which will set the colspan attribute value.

Using Attribute Binding in Angular:

To tell the angular framework that we are setting an attribute value, we have to prefix the attribute name with the attr and a DOT as shown below.

The same is also true when we are using angular interpolation as shown in the below image.

Now run the application and you should get the output as expected. 

Note: The Angular team recommends using the property binding or Interpolation whenever possible and use the attribute binding only when there is no corresponding element property to bind. 

In the next article, I am going to discuss Angular Class Binding with examples. Here, in this article, I try to explain Angular Attribute Binding with some examples. I hope this article will help you with your needs. I would like to have your feedback. Please post your feedback, question, or comments about this article.