Property Binding in Angular2 - Part10

Опубликовано: 30 Май 2019
на канале: 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 video, we will discuss Property binding in Angular with examples.
Interpolation Syntax :
We have the imagePath property defined in the component class and we bind this property with [img] element of src property using interpolation like this:
[img src='{{imagePath}}'/] - for HTML element angled brackets are not allowed so we define this with the square brackets. Don't confuse.

Property Binding:
Property binding is the primary way of binding data in Angular. The square braces are used to bind data to a property of an element, the trick is to put the property onto the element wrapped in brackets: [property]. The src property of the HTMLElement [img] is bound to the srcURL property of the class.
We can write the same example using property binding. Notice the [img] element src property is in a pair of square brackets, and the component class property is in quotes.
[img [src]='imagePath'/]

Interpolation Vs Property Binding:
Both Interpolation and Property Binding flow the data in one direction. i.e from component class properties to HTML element properties.

Difference between Interpolation & Property Binding
Interpolation is just a convenient alternative to property binding.
In some cases we must use interpolation instead of property binding that we see in example:
[img src='http://www.codekul.com/img/{{imagePath}}' /]

And For Non-string data value we must use property binding where interpolation is not working properly:
[button disabled='{{isDisabled}}']Submit[/button]

An important point to keep in mind:
Remember to enclose the property name with a pair of square brackets. If you omit the brackets, Angular treats the string as a constant and initializes the target property with that string.
Thanks for Watching. Please comment on if u have any question or any improvement in the tutorial.

Смотрите видео Property Binding in Angular2 - Part10 онлайн, длительностью часов минут секунд в хорошем качестве, которое загружено на канал Code With Rohini 30 Май 2019. Делитесь ссылкой на видео в социальных сетях, чтобы ваши подписчики и друзья так же посмотрели это видео. Данный видеоклип посмотрели 40 раз и оно понравилось 5 посетителям.

131