Angular interpolation

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 the concept of Interpolation in Angular.

Interpolation is all about data binding. In Angular data-binding can be broadly classified into 3 categories.

One way data-binding - From Component to View Template
One way data-binding - From View Template to Component
Two way data-binding - From Component to View Template & From View template to Component

In this video, we will discuss the first one way data-binding i.e From Component to View Template. We achieve this using interpolation. We will discuss the rest of the 2 data-binding techniques in our upcoming videos.

One way data-binding - From Component to View Template : To display read-only data on a view template we use one-way data binding technique interpolation. With interpolation, we place the component property name in the view template, enclosed in double curly braces: {{propertyName}}.

In the following example, Angular pulls the value of the firstName property from the component and inserts it between the opening and closing [h1] element.

@Component({
selector: 'my-app',
template: `
[h1]{{ firstName }}[/h1]
`
})
export class AppComponent {
firstName: string = 'Tom';
}

It is also possible to concatenate a hard-coded string with the property value
[h1]{{'Name = ' + firstName}}[/h1]

The above expression displayes "Name = Tom" in the browser.

You can specify any valid expression in double curly braces. For example you can have
[h1]{{ 10 + 20 + 30 }}[/h1]

The above expression evaluates to 60

The expression that is enclosed in double curly braces is commonly called as Template Expression. This template expression can also be a ternary operator as shown in the example below. Since firstName property has a value 'Tom', we see it in the browser.

@Component({
selector: 'my-app',
template: `
[h1]{{firstName ? firstName : 'No name specified'}}[/h1]
`
})
export class AppComponent {
firstName: string = 'Tom';
}

If we set firstName = null as shown below. The value 'No name specified' is displayed in the browser
firstName: string = null;

You can also use interpolation to set [img] src property

@Component({
selector: 'my-app',
template: `[div]
[h1]{{pageHeader}}[/h1]
[img src='{{imagePath}}'/]
[/div]`
})
export class AppComponent {
pageHeader: string = 'Employee Details';
}

We can also call class methods using interpolation as shown below.

@Component({
selector: 'my-app',
template: `[div]
[h1]{{'Full Name = ' + getFullName()}}[/h1]
[/div]`
})
export class AppComponent {
firstName: string = 'Tom';
lastName: string = 'Hopkins';

getFullName(): string {
}
}

Output : Full Name = Tom Hopkins

[alritedave]

Very much enjoy this series. Moving from original angular to Ang2 is a breath of fresh air. Thank you Sir.

[stanleyakachukwu]

These videos are really awesome. Simpler than other authors I have watched.

[niluniverse]

{{ As usual Awesome Technical Mentor ! }}

[dameraharitha]

Thanks for explaining angular2 plz make videos on all the concepts quickly

[saida]

Excellent Sir!!!. I am learning Angular along with your Videos. :)

[bhagwantsingh]

Thank u sir for your new series of Angular 2. Waiting for your other videos on Angular 2

[PrashThings]

Perfect Learning Tutorial for beginners.Thanks You Sir.

[nandakishore]

Very informative videos for beginners to learn and develop using Angular 2. Thanks for all your videos @kudvenkat

[commanderconan]

Thank you for your helpful tutorials, , I have a question ..

What if I wanted to get firstName and lastName properties from employee component instead of hard coding it .. how to achieve that ?

[armanx]

Thx for tuts dude they are great as always ! keep doing good job !

[hosseinmoosavi]

Thank's, it so simple for bigginer

[ravistore]

nice tutorial
Sir how can overcome binding issue in two input value tags?
if input value changed of one component then automatically other get changes

[TheRealHarishDesai]

the condition to check null is work only with inline, not when you provide templateURL

[Iamdolphin]

Great video as always.. Yes, we could do {{firstname}} + ' '+ {{lastname}}, however, it is better to use methods for that.
For example, what if tomorrow you wanted to lastname + firstname instead, you would just need to change the method

[sourishdutta]

sir is there any video of you for learning typescript

[chamkumangu]

Can you provide links to download the code as folders?It will be quite easy for us.

[chetanpl]

hi sir
please make a video to share scope value from 1 component to 2nd component.

[chetanpl]

sir can we use jQuery and JavaScript with in component.

please made a video for us

[PrashThings]

Dear Sir, How to use Angular 2 with asp.net MVC .

[nimit]

can you please add videos for typescript tutorial....