Difference between One-way Binding and Two-way Binding

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.

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"; } 

<h3>Displaying the content without one way binding</h3> <hr /> <h3 [textContent]="title"></h3> 

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.

import { Component } from "@angular/core"; @Component({  selector: "my-app",  templateUrl: "./app.component.html", }) export class AppComponent {  data = "Ram and Syam"; } 

<input [(ngModel)]="data" type="text"> <hr> <h3> Entered data is {{data}}</h3> 

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:

Difference between One-way & Two-way Binding