Difference between One-way Binding and Two-way Binding - GeeksforGeeks

22 Jul, 2021
In this article, we will learn the concept of data binding in Angular. We will also explore its types & examine the differences between one-way binding and two-way binding in angular. 
Data binding is a way to synchronise the data between the model and view components automatically. AngularJS implements data-binding that treats the model as the single-source-of-truth in your application & for all the time, the view is a projection of the model. Unlike React, angular supports two-way binding. In this way, we can make the code more loosely coupled. Data binding can be categorized into 2 types, ie., One-way Binding & Two-way Binding.
One way binding:
In one-way binding, the data flow is one-directional.
This means that the flow of code is from typescript file to Html file.
In order to achieve a one-way binding, we used the property binding concept in Angular.
In property binding, we encapsulate the variable in Html with square brackets( [ ] ).
We will understand this concept through an example in order to make it more comprehensible.
app.component.ts
import { Component } from "@angular/core";  @Component({  selector: "my-app",  templateUrl: "./app.component.html",  styleUrls: ["./app.component.css"],})export class AppComponent {  title = "Displaying the content with one way binding";}
 
app.component.html
<h3>Displaying the content without one way binding</h3>  <hr />  <h3 [textContent]="title"></h3>
app.module.ts
import { NgModule } from "@angular/core";import { BrowserModule } from "@angular/platform-browser";  import { AppComponent } from "./app.component";  @NgModule({  imports: [BrowserModule],  declarations: [AppComponent],  bootstrap: [AppComponent],})export class AppModule {}
Output:
Two-way binding:
In a two-way binding, the data flow is bi-directional.
This means that the flow of code is from ts file to Html file as well as from Html file to ts file.
In order to achieve a two-way binding, we will use ngModel or banana in a box syntax.
To make sure the app doesn’t break, we need to import ‘FormsModule’ from ‘@angular/forms.
Any changes to the view are propagated to the component class. Also, any changes to the properties in the component class are reflected in the view.
To bind two properties in order to two-way binding works, declare the ngModel directive and set it equal to the name of the property.
We will understand the concept through an example in order to make it more comprehensible.
app.component.ts
import { Component } from "@angular/core";  @Component({  selector: "my-app",  templateUrl: "./app.component.html",})export class AppComponent {  data = "Ram and Syam";}
app.component.html
<input [(ngModel)]="data"  type="text">  <hr>  <h3> Entered data is  {{data}}</h3>
 
app.module.ts
import { NgModule } from "@angular/core";import { BrowserModule } from "@angular/platform-browser";import { FormsModule } from "@angular/forms";  import { AppComponent } from "./app.component";  @NgModule({  imports: [BrowserModule, FormsModule],  declarations: [AppComponent],  bootstrap: [AppComponent],})export class AppModule {}
Output:
One-way binding 
Two-way binding 
In one-way binding, the flow is one-directional.
In a two-way binding, the flow is two-directional.
This means that the flow of code is from ts file to  Html file.
This means that the flow of code is from ts file to Html file as well as from Html file to ts file.
In order to achieve one-way binding, we used the property binding concept in Angular.
In order to achieve a two-way binding, we will use ngModel or banana in a box syntax.
In property binding, we encapsulate the  variable in html with square brackets( [ ] ).
To make sure the app doesn’t break, we need to import ‘FormsModule’ from ‘@angular/forms’. Using ngModel, we will bind a variable from Html to ts file and from ts file to Html file.
AngularJS-Questions
Picked
AngularJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Top 10 Angular Libraries For Web Developers
Auth Guards in Angular 9/10/11
What is AOT and JIT Compiler in Angular ?
How to use <mat-chip-list> and <mat-chip> in Angular Material ?
How to make a Bootstrap Modal Popup in Angular 9/8 ?
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?