Data Binding In Angular 2 - Part Seven

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.

 

Code

import {
    Component
} from '@angular/core';
@Component({
    selector: "my-tuts",
    template: `<h2>Rathrola Prem Kumar, Consultant</h2>`
})
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     

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 from 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.

Code

export class RathrolaComponent {
    public title = "Tutorials from Rathrola";
}

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 below.

 

Actually, one way data binding is happening like from our component property to the View. It’s one way data binding. When property gets updated, the View also gets updated in the browser.

Double curly braces are known as interpolation.

Another way to specify binding is to use square brackets for property binding. Let's say we have image tag, we have source attribute, and assign a string value.

Code

@Component({
    selector: "my-tuts",
    template: `<h2>{{title}}</h2>
<img src="http://csharpcorner.mindcrackerinc.netdna-cdn.com/App_Themes/CSharp/Images/SiteLogo.png">`
})

Save this and run. The output is given below.

 

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

Code 

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

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

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

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

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

Save and run it. The output is as below.

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

 

Script Image

  

$0.getAttribute(‘value’)

Output

Angular

Note

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

$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.