What Is Data Binding in Angular ?

Data Binding

Data binding is a key feature of Angular that keeps your apps data and user interface (UI) in sync.
Simply put

The model is your apps data (like text, numbers, lists).

The view is what the user sees on the screen (HTML).

With data binding, when data in the model changes, it automatically updates the view and vice versa (depending on the binding type). This makes your app more dynamic and user-friendly without writing a lot of extra code.

Example: Data Binding in Action

app.component.ts (TypeScript file with data)

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Quipoin!!';
  days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
}

app.component.html (HTML template)

<div style="text-align: center;">
        <h1>
                Welcome to {{title}}
        </h1>
</div>

<div>Days:
        <select>
                <option *ngFor="let i of days">{{i}}</option>
        </select>
</div>

How It Works (Step by Step)

{{title}} - This is called interpolation.

It displays the value of the title property from the component.

If you change title in the TypeScript file, the heading will update automatically in the browser.

*ngFor="let i of days" - This is called a structural directive.

It loops over each item in the days array and creates an <option> for each day.

If you add or remove days in the array, the dropdown updates automatically.

Why Data Binding Matters

Keeps your app dynamic and responsive

Saves time: no need to manually update the UI when data changes

Makes your code cleaner and easier to maintain