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.