In this article, we will discuss about interpolation and property binding in Angular 4. Both are used to bind component class properties to view template.
Examples
Let’s take simple example of both
- We will bind imagePath property of the component class to <img>element src property using interpolation as shown below.
<img src='{{imagePath}}’/> - We can achieve the same using Property binding also. Check bellow example of property biding. <img [src]=’imagePath’/>
- Here notice the <img>element src property is in a pair of square brackets, and the component class property is in quotes.
Interpolation and Property binding will drive value in one direction, from a component’s data property into target element property.
Difference between Interpolation and Property binding
- Where to use Interpolation?
- In some cases like when we need to concatenate strings we have to use interpolation instead of property binding.
- Check this example.
<img src=’code4developers.com/{{imagePath}}’ />
- Where to use Property binding?
- When setting an element property to a non-string data value, you must use property binding.
- In the following example, we are disabling a button by binding to the boolean property isDisabled.
<button [disabled]=’isDisabled’>Click me</button> - If we use interpolation instead of property binding, the button is always disabled irrespective of isDisabled class property value.
<button disabled='{{isDisabled}}’>Click me</button> (this doesn’t work).
Points to keep in mind when using Property binding
- 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.
<span [innerHTML]=’pageHeader’></span> - With Property binding we enclose the element property name in square brackets
<button [disabled]=’isDisabled’>Click me</button> - We can also use the alternate syntax with bind- prefix. This is known as canonical form
<button bind-disabled=’isDisabled’>Click me</button>
Provide security from malicious content
- From security standpoint, Angular data binding sanitizes malicious content before displaying it on the browser.
- Both interpolation and property binding protects us from malicious content.
- Check bellow example, we are using interpolation. Notice the malicious usage of <script> tag.
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: '<div>{{badHtml}}</div>'
})
export class AppComponent {
badHtml: string = 'Hello <script>alert("Hacking");</script> World';
}
- Angular interpolation sanitizes the malicious content and displays the following in the browser
Hello <script>alert(“Hacking “);</script> World - Let’s change the code and use property binding.
‘<div [innerHtml]=”badHtml”></div>’ - Property binding sanitizes the malicious content slightly differently and we get the following output : Hello alert(“Hacking”); World
So here the important point to keep in mind is both the techniques protect us from malicious content and render the content harmlessly.
Click Here to learn more on Angular from our video tutorials.
He works as a software developer. He has hands-on experience on .net and other Microsoft technologies. He also works on AngularJS, KnockOutJS.