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

• Interpolation data binding in angular
• Property Data binding in angular
• Class data binding in angular
• Style data Binding in angular
• Attribute data Binding in angular
• Event data binding in angular

  

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.
import { Component, OnInit } from '@angular/core'; 

@Component({ 
selector: 'app-example', 
templateUrl: './example.component.html', 
styleUrls: ['./example.component.css'] 
}) 
export class ExampleComponent { 
firstName: string = ""; 
lastName: string = ""; 

fullname() { 
return this.firstName + " " + this.lastName; 
} 
} 

Step 6
Open example.component.html in your application and change the code with the following one.
<div class="container"> 
<h3 class="text-uppercase text-center">Two Way data binding in angular</h3> 
<div class="row"> 
    <div class="col-md-4"> 
        <div class="form-group"> 
            <label>First Name:</label> 
            <input [value]="firstName" class="form-control" (input)='firstName= $event.target.value'> 
        </div> 
    </div> 
    <div class="col-md-4"> 
        <div class="form-group"> 
            <label>Last Name:</label> 
            <input [value]="lastName" class="form-control" (input)='lastName= $event.target.value'> 
        </div> 
    </div> 
</div> 
<h4 class="text-uppercase ">{{fullname()}}</h4> 
</div> 

Step 7
Open app.component.html in your application to take the selector name from employee.component.ts.
< <app-example></app-example> 

Step 8
Run the application by typing the following command.
ng serve –open

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
import { Component, OnInit } from '@angular/core'; 
@Component({ 
selector: 'app-example', 
templateUrl: './example.component.html', 
styleUrls: ['./example.component.css'] 
}) 
export class ExampleComponent { 
public firstName:string=''; 
public lastName:string=''; 
public position:string=''; 
public salary:number; 
} 

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

<div class="container"> 
<h3 class="text-uppercase text-center">Two Way data binding in angular</h3> 
<div class="row"> 
    <div class="col-md-4"> 
        <div class="form-group"> 
            <label>First Name:</label> 
            <input type="text" class="form-control" [(ngModel)]="firstName">                
        </div> 
    </div> 
    <div class="col-md-4"> 
        <div class="form-group"> 
            <label>Last Name:</label> 
           <input type="text" class="form-control" [(ngModel)]="lastName"> 
        </div> 
    </div> 
</div> 
<div class="row"> 
    <div class="col-md-4"> 
        <div class="form-group"> 
            <label>Position:</label> 
            <input type="text" class="form-control" [(ngModel)]="position">         
        </div> 
    </div> 
    <div class="col-md-4"> 
        <div class="form-group"> 
            <label>Salary:</label> 
           <input type="number" class="form-control" [(ngModel)]="salary"> 
        </div> 
    </div> 
</div> 
<p> 
First Name:<strong class="text-uppercase">{{firstName}}</strong> 
</p> 
<p> 
Last Name:<strong class="text-uppercase">{{lastName}}</strong> 
</p> 
<p> 
Position:<strong class="text-uppercase">{{position}}</strong> 
</p> 
<p> 
Salary:<strong class="text-uppercase">{{salary}}</strong> 
</p> 
</div>