Hello friends!

Before we get started, feel free to go through my previous articles for a better understanding of Angular 2 web applications.

• Angular 2 Architecture

• Getting Started With Angular 2 and Going Over Our Application Files

• Hello World Application - Angular 2

In this article, we shall take a look at Interpolation and Data Binding in Angular 2 applications.

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 the same as the above code block.

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

Code

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

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

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

Let's create a property called title and assign it 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 the property name in the braces. The output is shown below.

Actually, one-way data binding is happening here, going from our component property to the View. When the 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 an image tag and source attribute and we 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 it. The output is given below.

But now, what we want to understand is that we are dealing with a source property, not a 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 given below.

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

Script Image

$0.getAttribute(‘value’) 

The word Angular should be printed to the console.

Note:

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

Ex: $0.value  

Output:

Angular 

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

The output we get should be: Prem

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

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

Hope you guys understood the difference between attributes and properties and how we bind data to the property and not the attribute. In our next article, we shall look at class and style bindings.

Thanks for reading my article!