Can you explain the concept of two-way data binding in Angular and how it differs from one-way data binding techniques? — Angular Interview Question #75

Two-way data binding is one of the core features provided by Angular, which makes it easy for developers to keep the model and the view in sync.

**One-Way Data Binding:**

In one-way data binding, data flows in a single direction, either from the component to the view (View-Only) or from the view to the component (Editable). Angular provides two types of one-way data binding:

1. Interpolation/Property binding: To bind component properties to corresponding DOM element properties. This binding is one-way from component to the view. It is represented by double curly braces ‘ ‘ for interpolation, and square brackets ‘[]‘ for property binding.

<!-- Interpolation -->
<p>{{property_name}}</p>

<!-- Property binding -->
<input [value]="property_name">

2. Event binding: To bind DOM events to corresponding component methods. This binding is one-way from view to the component. It uses parenthesis ‘()‘.

<input (input)="handleInputChange($event)">

**Two-Way Data Binding:**

Two-way data binding combines both property binding and event binding. It updates the model with the user input and automatically reflects those changes in the view. Angular achieves this by using ‘[(ngModel)]‘ directive, also known as the "banana-in-a-box" syntax.

Here’s an example of two-way data binding:

<!-- Two-way data binding -->
<input [(ngModel)]="property_name">

In this example, Angular synchronizes the input value with the ‘property_name‘ in the component. When a user interacts with the input and changes the value, the component’s property will update automatically. Similarly, when the component’s property changes, the input value in the view will update too.

To sum up, while one-way data binding deals with either component-to-view or view-to-component communication, two-way data binding enables a bidirectional flow of data between the component and the view. This makes it easier to keep the model and the view in sync without manually listening for events and updating the properties.

Here’s a simple comparison chart to demonstrate the differences:

In the chart, +1 represents the flow of data from components to view, -1 represents the flow of data from view to components, and 0 indicates bidirectional flow.

Keep in mind that to use ‘[(ngModel)]‘ for two-way data binding, you need to import the ‘FormsModule‘ in your NgModule.

import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [
    // ...
    FormsModule,
  ],
})