Property binding in Angular 2

Text version of the video

Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help.

Slides

Angular 2 Tutorial playlist

Angular 2 Text articles and slides

All Dot Net and SQL Server Tutorials in English

All Dot Net and SQL Server Tutorials in Arabic

In this video we will discuss Property binding in Angular with examples.

In Part 8, we discussed we can use interpolation to bind component class properties to view template. Another option to achieve exactly the same thing is by using Property binding.

In our previous video we have bound imagePath property of the component class to [img] element src property using interpolation as shown below.
[img src='{{imagePath}}'/]

We can rerwrite the above example, using property binding as shown below. Notice the [img] element src property is in a pair of square brackets, and the component class property is in quotes.
[img [src]='imagePath'/]

Both Interpolation and Property binding flows a value in one direction, i.e from a component's data property into a target element property.

What is the difference between Interpolation and Property binding
Interpolation is a special syntax that Angular converts into a property binding.

Interpolation is just a convenient alternative to property binding.

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

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]

Some important 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]

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.

In the example below we are using interpolation. Notice the malicious usage of [script] tag.

@Component({
selector: 'my-app',
template: '[div]{{badHtml}}[/div]'
})
export class AppComponent {
badHtml: string = 'Hello [script]alert("Hacked");[/script] World';
}

Angular interpolation sanitizes the malicious content and displays the following in the browser
Hello [script]alert("Hacked");[/script] World

In this example below we are using property binding.
'[div [innerHtml]="badHtml"][/div]'

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.
Hello alert("Hacked"); World

[adminssmoil]

Author, Your courses are very interesting and you are the best teacher! thank you !

[GistTech]

your a really great teacher and patient I love your videos

[mdwazid]

Hi Sir,
really its a very very good video clip for angula2 b`coz your way of teaching and English pronunciation is very good please provide this type video sir.
I searched lots video not like that
thank You sir

[bigdogsmallman]

Thank you very Much. When I have my laptop I shall try it out :D

[shaiksaidavali]

What is it about "innerHtml" property .was it work only in angular JS or without any JS like <span innerHtml="xyz"></span>

[pradeeshbm]

Need some more explanation for interpolation and property binding. I really didn't understand the main difference (When to use).

[faizankhan-eqev]

Using square brackets [propertyName], you are setting property of that HTML tag, using interpolation simply on an attribute, attribute={{value}}, you are setting value of an attribute of that tag, not the property, most of the attributes have equivalent property name but some don't

[premkagrani]

Hello Sir,
Can you please explain the point of Sanitizing the content which you have demonstrated in the end in this video.
I googled Sanitized but was unable to understand the real meaning of it in angular.
Any help will be appreciated.
Thanks

[vishakhatomar]

i am getting this error for both span and div .
"Can't bind to 'innerhtml' since it isn't a known property of 'div'."
Due to this page is not loading.

[anu]

Sir as in my-app
The sentence Loading AppComponent content here..
Can we set timing like till what time it should display.

[NKSazzie]

Hii,
I tried this ( isDisabled = false; ) without defining the type of isDisabled as boolean in app.component.ts. But still this is rendering fine . I can't get why this behaviour is happening. It would be great if you include a tutorial specific to typescript.

[choudharyrahul]

<span is getting rendered as <san></span> .. The innerHtml is not getting rendered.

[taherhendawi]

Great job thnx a lot !
i didnt understand the last point.. i have not noticed any sanitize !!??

[puttaarunkumar]

At instant 5:46 their should not be quotes when you are using interpolation.

[WakefieldSeldon]

Typescript and Angular seem so meaningless to me. With ES6 and ES7 you can do the same things cleaner and faster.