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