Data binding in angular

Data binding is a very important concept in angular. In this tutorial, you will learn what is data binding in angular and what are different types of data binding.

Data binding in angular

Data binding creates communication between DOM (HTML) and components data. You can show data from components to UI using data binding. When the value of data gets changed, then the value of that data also changes into UI.

Types of Data binding:

1. Interpolation
2. Property binding
3. Event binding
4. Two-way binding

1. Interpolation:

Interpolation is a one-way data binding. Interpolation is used for data binding from component to template(HTML).
You can display data from the component into a template by using curly braces {{}} like this. You have to include property name or variable name from the component into curly braces.

Example:

Step 1: Create two variables into the component like the following.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'John Doe';
  email = 'johndoe@gmail.com';
}

Here two variables name and email are created with values assigned to it.

Step 2: Use variables into curly braces to show their value in UI.

<h1><u>Interpolation:</u></h1>
<h4> Name: {{name}} </h4>
<h4> Email: {{email}} </h4>

Output:

2. Property binding:

Property binding is one-way data binding. You can use property binding for assigning values to an element’s property or attribute. You have to pass data from component to element’s property or attribute.

Example:

Step 1: Create property like the following in component

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  imgURL = "https://images.unsplash.com/photo-1505489435671-80a165c60816?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=831&q=80";
}

Here, imgURL property is created and value is assigned to it.

Step 2: Assign property to element’s property or attribute.

<h1><u>Propery binding:</u></h1>
<img [src]="imgURL" width="250" height="250" alt="marvel logo"/>

Here imgURL property is assigned to img element’s attribute.

Output:

3. Event Binding:

By using event binding you can listen to DOM events like keystrokes, mouse movement, clicks, and touches. In event binding, you have to call a specific method or action when a particular event occurs.

Example:

Step 1: Assign method for event

<h1><u>Event binding:</u></h1>
<button style="padding: 10px; border-radius: 5px; color: #fff;
        background: #337ab7; border-color: #2e6da4;" (click)="showMsg()">
  Click Me
</button>
<h3>{{message}}</h3>

Here, for ‘click‘ event showMsg() method is called. That method will return a message and that is shown in UI by using interpolation {{message}}.

Step 2: Create a method assigned for a particular event

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  message;

  showMsg() {
    this.message = 'You clicked the button.';
  }
}

Output:

4. Two-way binding

By using Two-way binding you can share data between a component class and its template. By using two-way binding, data property can be shown into UI, and that data changes when the user makes changes to that property’s value.
The two-way binding syntax is [()]. This syntax is also called as ‘BANANA IN A BOX‘. Two-way binding syntax combines syntax of property binding i.e [] and parentheses of event binding i.e ().

Example:

Step 1: Create two variables into the component like the following.

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  fullname = '';
  email = '';
}

Here, fullname and email variables are created.

Step 2: Use two-way binding into template ie. HTML

<h1><u>Two way binding:</u></h1>
<h2>
  Enter your Name:
  <input type="text" [(ngModel)]="fullname">
</h2>

<h2>
  Enter your Email:
  <input type="email" [(ngModel)]="email">
</h2>
<hr>
<h2><u>User Info:</u></h2>
<h3>Name: {{fullname}}</h3>
<h3>Email: {{email}}</h3>

Here, two-way binding is used. In [()] used ngModel. By using NgModel directive you can display a data property and update that property when the user makes changes.
So, when the user enters fullname and email, that information gets shown below. For showing information entered by the user, you can use Interpolation {{}} like above.

Output:

Conclusion:

From this tutorial, you learned data binding in angular which is a very important concept in angular. If you get any problems while implementing the above code, you can ask them through the comment section.

See Also:

Services In Angular
CRUD application in angular