Property Binding in Angular2 - Part10

To learn Angular2 from scratch and most useful for beginners Please see the link below: https://www.youtube.com/watch?v=BJmEs0XamI0&list=PLCxB3OvyEYx3mwSxmossZ-bkv46flY9bR&index=1 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.