Property Binding in Angular2 - Part10

Published: 30 May 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 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.

Watch video Property Binding in Angular2 - Part10 online, duration hours minute second in high quality that is uploaded to the channel Code With Rohini 30 May 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 40 times and liked it 5 visitors.

131