Data Binding in Angular 2
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.
Join the DZone community and get the full member experience.
Join For FreeHello friends!
Before we get started, feel free to go through my previous articles for a better understanding of Angular 2 web applications.
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!
Published at DZone with permission of Rathrola Prem Kumar . See the original article here.
Opinions expressed by DZone contributors are their own.
{{ parent.title || parent.header.title}}
{{ parent.tldr }}
{{ parent.linkDescription }}
{{ parent.urlSource.name }}