Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Data Binding in Angular 2

DZone's Guide to

Data Binding in Angular 2

In this article, we go over the basics of data binding in Angular 2, and how to execute data binding in a simple Angular application.

· Web Dev Zone ·
Free Resource

Learn how Crafter’s Git-based content management system is reinventing modern digital experiences.

Hello friends!

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

Image title

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

Image title

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.

Image title

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.

Image title

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.

Image title

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.

Image title

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

Image title

Script Image

Image title

$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

Image title

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!

Crafter CMS is a modern Git-based platform for building innovative websites and content-rich digital experiences. Download this white paper now.

Topics:
web dev ,angular ,angular 2 ,data binding

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}