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';
  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 = "";
  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';
  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.