Attribute Binding in Angular - Part12
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!
Смотрите видео Attribute Binding in Angular - Part12 онлайн, длительностью часов минут секунд в хорошем качестве, которое загружено на канал Code With Rohini 03 Июнь 2019. Делитесь ссылкой на видео в социальных сетях, чтобы ваши подписчики и друзья так же посмотрели это видео. Данный видеоклип посмотрели 77 раз и оно понравилось 4 посетителям.
