Two Way Data Binding In Angular

In this article, you will learn about two way data binding in Angular.

Introduction

 
This article will explain the two-way data binding in Angular. I would recommend you read the below articles before starting with this one.

What is two-way data binding Angular?

 
Using two-way binding, we can display a data property as well as update that property when the user makes changes. We can achieve it in the component element and HTML element, both. Two-way data binding uses the syntaxes of property binding and event binding together. Property binding uses the syntax as bracket [] or bind and event binding uses the syntax as parenthesis () or on and these bindings are considered as one-way bindings. Two-way binding works in both directions setting the value and fetching the value. Two-way binding uses the syntax as [()] or the bindon keyword. It also called the "banana in the box" symbol. It looks like a banana in a box.
 
Let us see two-way data binding with an example. 
 
Step 1
 
Open the command prompt from Windows search.
 
Step 2
 
Create a new project in Angular.
 
ng new AngularDemo
 
Step 3
 
Open the project in Visual Studio Code. Type the following command to open it.
 
Code .
 
Step 4
 
Open terminal in Visual Studio Code and create a component, "employee".
 
ng g c example
 
Step 5
 
Open the example component in your application and change the code with the following one.
  1. import { Component, OnInit } from '@angular/core';  
  2.   
  3. @Component({  
  4.   selector: 'app-example',  
  5.   templateUrl: './example.component.html',  
  6.   styleUrls: ['./example.component.css']  
  7. })  
  8. export class ExampleComponent {  
  9.   firstName: string = "";  
  10.   lastName: string = "";  
  11.   
  12.   fullname() {  
  13.     return this.firstName + " " + this.lastName;  
  14.   }  
  15. }  
Step 6
 
Open example.component.html in your application and change the code with the following one.
  1. <div class="container">  
  2.     <h3 class="text-uppercase text-center">Two Way data binding in angular</h3>  
  3.     <div class="row">  
  4.         <div class="col-md-4">  
  5.             <div class="form-group">  
  6.                 <label>First Name:</label>  
  7.                 <input [value]="firstName" class="form-control" (input)='firstName= $event.target.value'>  
  8.             </div>  
  9.         </div>  
  10.         <div class="col-md-4">  
  11.             <div class="form-group">  
  12.                 <label>Last Name:</label>  
  13.                 <input [value]="lastName" class="form-control" (input)='lastName= $event.target.value'>  
  14.             </div>  
  15.         </div>  
  16.     </div>  
  17.     <h4 class="text-uppercase ">{{fullname()}}</h4>  
  18. </div>  
Step 7
 
Open app.component.html in your application to take the selector name from employee.component.ts.
  1. < <app-example></app-example>  
Step 8
 
Run the application by typing the following command.
 
ng serve –open
 
Two Way Data Binding In Angular

Another example of two-way data binding using FormsModule

 
Step-1 Open app.module.ts and import FormsModule as shown in the image. Change the code with the following one.
 
 

Step-2 Open example.component.ts write below code

  1. import { Component, OnInit } from '@angular/core';  
  2.   
  3. @Component({  
  4.   selector: 'app-example',  
  5.   templateUrl: './example.component.html',  
  6.   styleUrls: ['./example.component.css']  
  7. })  
  8. export class ExampleComponent {  
  9.   public firstName:string='';  
  10.   public lastName:string='';  
  11.   public position:string='';  
  12.   public salary:number;  
  13. }  

Step-3 Now open example.component.html and write below code

  1. <div class="container">  
  2.     <h3 class="text-uppercase text-center">Two Way data binding in angular</h3>  
  3.     <div class="row">  
  4.         <div class="col-md-4">  
  5.             <div class="form-group">  
  6.                 <label>First Name:</label>  
  7.                 <input type="text" class="form-control" [(ngModel)]="firstName">                 
  8.             </div>  
  9.         </div>  
  10.         <div class="col-md-4">  
  11.             <div class="form-group">  
  12.                 <label>Last Name:</label>  
  13.                <input type="text" class="form-control" [(ngModel)]="lastName">  
  14.             </div>  
  15.         </div>  
  16.     </div>  
  17.     <div class="row">  
  18.         <div class="col-md-4">  
  19.             <div class="form-group">  
  20.                 <label>Position:</label>  
  21.                 <input type="text" class="form-control" [(ngModel)]="position">          
  22.             </div>  
  23.         </div>  
  24.         <div class="col-md-4">  
  25.             <div class="form-group">  
  26.                 <label>Salary:</label>  
  27.                <input type="number" class="form-control" [(ngModel)]="salary">  
  28.             </div>  
  29.         </div>  
  30.     </div>  
  31.     <p>  
  32.     First Name:<strong class="text-uppercase">{{firstName}}</strong>  
  33.     </p>  
  34.     <p>  
  35.     Last Name:<strong class="text-uppercase">{{lastName}}</strong>  
  36.     </p>  
  37.     <p>  
  38.     Position:<strong class="text-uppercase">{{position}}</strong>  
  39.     </p>  
  40.     <p>  
  41.     Salary:<strong class="text-uppercase">{{salary}}</strong>  
  42.     </p>  
  43. </div>  
 
Two Way Data Binding In Angular
 

Summary

 
In this article, I have explained two-way data binding in an Angular application. I hope you have understood the concept of two-way data binding properly.