Angular Attribute Binding

Angular Attribute Binding

In this article, I am going to discuss the Angular Attribute Binding with some examples. Please read the following articles before proceeding to this article.

The Angular Interpolation

Angular Property Binding

The HTML Attribute VS DOM Property

In Interpolation and Property binding, we discussed that they are dealing with the HTML element properties (DOM Properties) and not with the attributes. However, in some situations, we may need to bind to HTML element attributes. For example, colspan and aria attributes do not have any corresponding DOM properties. So, in this case, we need to bind to HTML element attributes. 

How to Achieve this?

To achieve this, the Angular provides attribute binding. So, by using attribute binding we can set the value of an attribute directly. The Angular team recommends to use the property binding whenever possible and use the attribute binding only when there is no corresponding element property to bind. 

Let us understand Attribute Binding in Angular with an example. We want to display the Student Details in a table as shown below. 

Angular Attribute Binding

To achieve this we are going to make use of Student Component we have implemented in the nested component tutorial. As part of this article, we are going to modify the following things.

Modify the StudentComponent.html file as shown below

<table>
    <thead>
        <tr>
            <th colspan="2">
                Student Details
            </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>

Here in the above HTML, we have hard-coded the colspan attribute value to 2.

Next, Modify the Studentcomponent.css as shown below.

Angular Attribute Binding

Then Modify the Student.Component.ts file as shown below.

Angular Attribute Binding

Modify the app.module.ts file as shown below.

Angular Attribute Binding

Finally, modify the app.component.ts file as shown below.

Angular Attribute Binding

Now run the application and see the output as expected.

As you noticed, we have hard-coded the colspan attribute value to 2 in the HTML (StudentComponent.html). Let say, we want to bind this property value to a component class property. To achieve this, in the Student.Component.ts file we include the ‘ColumnSpan‘ property as shown below.

Angular Attribute Binding

If we use the interpolation technique to bind the ColumnSpan property of the component class to colspan attribute of the <th> element we get the error – Can’t bind to ‘colspan’ since it isn’t a known property of ‘th’

Angular Attribute Binding When we run the application we get the below error

Angular Attribute Binding

We also get the same error if we use the Property Binding technique

Angular Attribute Binding

The above error has occurred because we do not have a corresponding property in the DOM for the colspan attribute. To fix this error, we have to use attribute-binding in Angular, which sets the colspan attribute value.

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.

Angular Attribute Binding

The same is true when using interpolation

Angular Attribute Binding

Now run the application and see the output as expected. In the next article, I will discuss Angular Class Binding with examples.

SUMMARY:

In this article, I try to explain Angular Attribute Binding with some examples. I hope this article will help you with your need. I would like to have your feedback. Please post your feedback, question, or comments about this article.

Leave a Reply

Your email address will not be published. Required fields are marked *