Why data binding matters in Angular

Introduction

Data binding helps your app show and update information automatically. It connects your app's data with what the user sees, so changes happen smoothly without extra work.

When you want to show user input immediately on the screen.

When your app needs to update the display after data changes.

When you want to keep your code simple and avoid manual updates.

When building forms that react to user actions.

When syncing data between different parts of your app.

Syntax

Angular

<element [(ngModel)]="propertyName"></element>

The [(ngModel)] syntax is called two-way data binding.

It means changes in the UI update the data, and data changes update the UI.

Examples

This input box updates the username property as you type, and if username changes in code, the input updates too.

Angular

<input [(ngModel)]="username">

This shows the current value of username in the text.

Angular

<p>Hello, {{ username }}!</p>

This is manual data binding using property and event binding instead of ngModel.

Angular

<input [value]="username" (input)="username = $event.target.value">

Sample Program

This simple Angular component uses two-way data binding with [(ngModel)]. When you type your name in the input box, the greeting below updates instantly.

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <h1>Welcome!</h1>
    <input [(ngModel)]="name" placeholder="Enter your name">
    <p>Hello, {{ name }}!</p>
  `
})
export class AppComponent {
  name = '';
}

Important Notes

Remember to import FormsModule in your Angular module to use ngModel.

Data binding reduces the need to write extra code to keep UI and data in sync.

Summary

Data binding connects your app's data and UI automatically.

Two-way binding with [(ngModel)] keeps input and data synced.

It makes your app easier to build and maintain.