Difference between One-way Binding and Two-way Binding

Last Updated : 19 May, 2026

Data Binding is a technique used to automatically synchronize data between the model and view components. Angular supports both one-way and two-way data binding, making the code more loosely coupled and easier to manage.

Data binding can be categorized into 2 types:

  • One-way Binding
  • Two-way Binding

Difference between One-way & Two-way Binding

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 TypeScript file to the HTML file.

This means that the flow of code is from TypeScript file to HTML file as well as from HTML file to TypeScript 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( [ ] ).

Import FormsModule from @angular/forms to use ngModel for binding data between the HTML and TypeScript files.

Changes in the view are not reflected back in the component class.

Changes in the view update the component, and component changes update the view.

Uses property binding only.

Uses ngModel with the property name.

Use Cases of One-way Binding

Used when data needs to flow only from the component to the view. The general use cases are:

  1. Displaying values: Used to show data such as usernames, prices, titles, or messages in the user interface.
  2. Read-only information: Suitable for content that users can view but should not modify, such as reports or status messages.
  3. Passing data to child components: Helps transfer data from a parent component to a child component using @Input().
  4. Dynamic attribute binding: Used to dynamically set properties like image sources, button states, styles, and CSS classes.
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:

Use cases of Two-way binding:

Used when data in the component and view must stay synchronized. The general use cases are:

  1. Form handling: Commonly used with text fields, checkboxes, radio buttons, and dropdown menus.
  2. Live search and filtering: Allows search results or filtered content to update instantly as the user types.
  3. Editable forms and settings: Useful in profile pages, feedback forms, and settings panels where users frequently modify data.
  4. Real-time synchronization: Ensures that any change in the UI updates the component data and any change in the component updates the UI automatically.
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:

Comment

Explore