Data Binding

• Data binding is the process of synchronizing the data between the model (the application's data) and the view (the user interface). 
• Angular provides a powerful mechanism for data binding, enabling developers to create responsive applications where changes in the model are instantly reflected in the view, and vice versa.

Example:

<div style="text-align: center;">
    <h1>
        Welcome to {{title}}
    </h1>
</div>
<div>Days:
    <select>
        <option *ngFor="let i of days">{{i}}</option>
    </select>
</div>

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"
  ];
}

Output:

The variable in the app.component.html file is referred to as {{title}} and the value of title is initialized in the app.component.ts file and app.component.html, the value is displayed.