Data Binding In Angular
Data binding in Angular is a powerful feature that establishes a connection between the application's data and the user interface, enabling seamless communication and synchronization.
Angular displaying values with interpolation
Using double curly braces {{ }}, it allows embedding dynamic values from component variables directly into the HTML template.
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `{{title}}`,
styleUrls: ['./app.component.css']
})
export class AppComponent {
title: string = 'Interpolation';
}
Angular Property Binding
It binds data from the component to an HTML element's property, enabling dynamic updates of the element's attributes based on component data changes.
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `<input type="text" [value]="title"/>`,
styleUrls: ['./app.component.css']
})
export class AppComponent {
title: string = 'Property Binding';
}
Angular Event Binding
It associates user events (e.g., clicks, keystrokes) to component methods, allowing actions triggered by users to invoke corresponding functions in the component.
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `<button (click)="showAlert()">Save</button>`,
styleUrls: ['./app.component.css']
})
export class AppComponent {
title: string = 'Event binding alert';
showAlert(): void {
alert(this.title)
}
}
Angular Two-Way Data Binding
Combining property binding and event binding, it establishes a
bidirectional flow of data between the component and the HTML element,
enabling real-time updates in both directions.
The two-way binding syntax in Angular, represented as [()],
combines the square brackets used for property binding, [] with the
parentheses employed for event binding, ().
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `<input type="text" [(ngModel)]="title"/>
<p>{{title}} <p/>`,
styleUrls: ['./app.component.css']
})
export class AppComponent {
title: string = 'Angular Two-Way Data Binding';
}
Remember to import "FormsModule" from "@angular/forms" in your app module.
Overall, data binding in Angular simplifies the development process and enhances the user experience by keeping the data and UI in sync.