Data Binding In Angular 2 Part 7

Hello friends,

From my previous article, we have learned how to style html code for a component. I recommend you go through my previous articles for better understanding.

• Architecture Angular 2 Part: 1
• Getting Started with Angular 2 Part: 2
• Understanding Application Files in Angular 2 Part: 3
• Simple Hello world Application in Angular 2 Part: 4
• Creating our first component in Angular 2 Part: 5
• Style Components in Angular 2 Part: 6

In this article, we shall see Interpolation and Data Binding in Angular 2 application.

For this article, I have removed all the code in the previous article because only the style code takes up a lot of space to capture the code in the article.

1. import {  
2.     Component  
3. } from '@angular/core';  
4. @Component({  
5.     selector: "my-tuts",  
6.     template: `<h2>Rathrola Prem Kumar, Consultant</h2>`  
7. })  
8. export class RathrolaComponent {}  

Open Rathrola.Component.ts. It looks same as above.

Now, if you look at template, we hardcoded header h2 as shown below.

Code     

1. template:`<h2>Rathrola Prem Kumar, Consultant</h2>`   

What could be better is if it could have a variable. Assign it a value and then bind that variable to the View which is template. This is what we are going to learn in this article.

A variable is nothing but a property of calls, open class in Rathrola.component.ts as shown below.

Code

Let's create a property called title and assign a value, as shown below.

1. export class RathrolaComponent {  
2.     public title = "Tutorials from Rathrola";  
3. } 

We can bind a value from class to a View template using double curly braces ({}).

And then, specify property name in the braces. The output is shown as below.

Now, in Angular, however we create a new property called public imgLink as shown below.

Code 

1. export class RathrolaComponent {  
2.     public title = "Tutorials from Rathrola";  
3.     public imgLinke = "http://csharpcorner.mindcrackerinc.netdna-cdn.com/App_Themes/CSharp/Images/SiteLogo.png"  
4. }   

In Angular, what we do is wrap the src property with square braces and assign it a property, as shown below.

1. @Component({  
2.     selector: "my-tuts",  
3.     template: `<h2>{{title}}</h2>  
4. <img [src]="imgLink">`  
5. })

Save and run it. The output is shown below.

But now, what we to understand is that we are dealing with source property not source attribute. If you are confused, let me create an input tag in the template.

Code:

1. @Component({  
2.     selector: "my-tuts",  
3.     template: `<h2>{{title}}</h2>  
4. <img [src]="imgLink"><br><br><br><br>  
5. <input type="text" value="Angular">`  
6. })  

Save and run it. The output is as below.

Now, inspect the element and write some scripts in console.

 Script Image

1. $0.getAttribute(‘value’)  

Output
Angular

Note
$0 is nothing but input text box in our template.

1. $0.value   

Output
Angular

For eg, Let's say we change the text in textbox and execute $0.value in console.

Output
Prem

So, if we observe here, we are not messing with the value attribute. We are working on property tag only. What I mean to say is that we are working with source property and not the attribute. Attribute is one time initialization.

That’s pretty much for this article about interpolation and data binding.

Hope you guys understood the difference between attribute and properties and how we bind it to the property and not the attribute. In our next article, we shall see class & style bindings.

Thanks for reading my article.