Angular Property Binding

Angular Property Binding

In this article, I will discuss Angular Property Binding with examples. Please read our last article where we discussed Angular Interpolation with some examples. In our Angular Interpolation article, we discussed that we can use the Angular interpolation technique to bind the component class properties to the view template. We can also achieve exactly the same thing by using the Angular Property binding technique.

In our last article, we use the below code to bound the imagePath property of the component class to <img> element’s src property using the interpolation technique.

Angular Property Binding

Let’s see how we can achieve the same thing using Angular Property Binding.

Angular Property Binding

Note: The <img> element’s src property is in a pair of square brackets [ ] and the component class ImagePath property is in single quotes.

Below is the complete code of the app.component.ts file

Angular Property Binding

When you run the application it will display the output as expected in the browser as shown below.

Angular Property Binding The Interpolation and the Property binding both flow the value in one direction, i.e. from a component to the view template.

What is the difference between Interpolation and Property binding?

The Interpolation is a special type of syntax that the Angular converts into a property binding.  So, the Interpolation is just a convenient alternative approach to the angular property binding. 

In some cases like when we need to concatenate the strings, we have to use interpolation instead of property binding as shown in the example below.

Angular Property Binding

When we need to set an element property to a non-string data value (for example Boolean), then we need to use property binding. In the below example, we are disabling a button by binding to the boolean property IsDisabled of the button elements disabled attribute as shown below.

Angular Property Binding When you run the application, it will display the button which is not clickable. If you use the angular interpolation instead of the property binding, then the button is always disabled irrespective of the IsDisabled class property value as shown below.

Angular Property Binding Here we set the IsDisabled property value to false but when you run the application, it will not allow the button to be clickable,

From a security point of view, the Angular data binding sanitizes malicious content before displaying it on the browser. Both interpolation and property binding protect us from malicious content. Let us understand this with an example.

In the example below, we are using interpolation with the malicious usage of the <script> tag.

Angular Property Binding

When we run the application, the Angular interpolation sanitizes the malicious content and displays the following in the browser

Angular Property Binding In the below example we are using property binding. 

Angular Property Binding The Property binding sanitizes the malicious content slightly differently and we get the following output, but the important point to keep in mind is both the techniques protect us from malicious content and render the content harmlessly.

Angular Property Binding

In the next article, I will discuss the HTML Attribute vs DOM Property in angular js.

SUMMARY:

In this article, I try to explain Angular Property Binding with some examples. I hope this article will help you with your need. I would like to have your feedback. Please post your feedback, question, or comments about this article.

Leave a Reply

Your email address will not be published. Required fields are marked *