Attribute Binding in Angular - Part12

Published: 03 June 2019
on channel: Code With Rohini

To learn Angular2 from scratch and most useful for beginners Please see the link below:
• What is AngularJS and What is Angular...

In this tutorial, we will discuss the attribute binding.

In our previous videos, we discussed Interpolation and Property binding that deals with binding Component class properties to HTML element properties and not Attributes.

Important Question is Why to use Attribute Binding in Angular?

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 a current value.

And We discussed in the previous tutorial What is the DOM Properties?
Please see, the previous tutorial before watching this.

So What is Attribute binding?
Attribute binding syntax is like property binding. In property binding, we only specify the element between brackets. But in the case of attribute binding, it starts with the prefix attar, followed by a dot (.), and the name of the attribute. You then bind the attribute value using an expression that resolves to a string.

Let's consider an example where we are creating a table and setting the colspan attribute of the element. Here, we are setting the colspan to 2. we can bind this value using 3 different ways of attribute binding like:

Attribute binding is the same as property binding with the difference that we need to add attr. as a prefix with the 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 class.

colspn = 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}}"]

So Interpolation and property binding deal with binding component class properties to HTML element properties and NOT attributes.

But Not all HTML element attributes have corresponding properties. for example, colspan attribute does not have a corresponding property.
in some situations, we want to be able to bind to HTML element attributes.

Hence to make this happen, Angular provides attribute binding. With attribute binding, we can set the value of an attribute directly. The angular team recommends to use Property binding when possible and use attribute binding only when there is no corresponding element property to bind.
So Thank you, for watching this!!
Please Like, Comment and Subscribe!

Watch video Attribute Binding in Angular - Part12 online, duration hours minute second in high quality that is uploaded to the channel Code With Rohini 03 June 2019. Share the link to the video on social media so that your subscribers and friends will also watch this video. This video clip has been viewed 77 times and liked it 4 visitors.

131