In this article we will discuss Property Binding in Angular. If you miss our previous article then please go through the link Styling Angular Components. We cover below pints in this article,
- What is Angular Property Binding ?
- How to use Property Binding in Angular Application ?
- Examples of Property Binding.;
- Difference between Property Binding and Angular Interpolation ?
➤ What is Angular Property Binding ?
The Property Binding of Angular Application is used to bind the values of component or model properties to the HTML element. Depending on the values, it will change the existing behavior of the HTML element. The syntax to use property is: [property] = ‘expression’
In Property Binding, there is a source and target. e.g <img [src] = 'ImagePath'/>
Here, [src] is the target that is a property of image(img) tag and ImagePath is the source that is the component property.
➤ How to use the Property Binding in Angular Application ?
In order to understand how to use property binding in the angular application, you need to specify the HTML element property in a pair of the square brackets. Then you need to specify the component class property in a pair of single quotes. Then at run-time, this property value will be assigned to the HTML Property.
Code Snippet are in below;
When you run the application you can see the output like below;
The Angular Interpolation and Angular Property binding both flows the values from a component to the view template i.e. in one direction.
If you are familiar with the angular interpolation then know that we can find the same result, then obvious question is that if we achieve the same result in angular interpolation then why we use property binding in angular. Well let's discuss it.
➤ Difference between Property Binding and Angular Interpolation ?
- Concatenation of string : Interpolation in Angular is just an alternative approach for property binding. It is a special type of syntax that converts into a property binding. But there are some scenarios where we need to use interpolation instead of property binding. e.g if you want to concatenate strings then you need to use angular interpolation instead of property binding as shown in the below image.
- Non-string Variable : When you are working with non-string values like Boolean to set the property value of an HTML element, then you need to use property binding instead of interpolation.
 |
| Button is disable as we set the disable property is true |
If we want to use same in angular-interpolation then the code look like below;
 |
| IsDisabled property value set as false but when you run the application the button is always disabled |
- Security to Malicious Content : The Property Binding handles the malicious HTML content in a slightly different manner and when you run the application, you will get the following output in the browser. But the most important point that you need to keep in mind is, both property binding and interpolation protect us from malicious HTML content.
Both Angular data binding and angular-interpolation protect us from malicious HTML content before rendering it on the web browser. Let's do same example with angular-interpolation
When we run the application the output should like below;
 |
| Angular interpolation sanitizes the malicious content and displays the content |
Summary
In this tutorial we discussed Angular Property Binding. If have any question related to this topic then give your feedback.
Post a Comment