What is data binding in Angular

Data binding in Angular is the synchronization of data between the component (the model) and the view (the HTML template). It allows you to define communication between the component and the DOM, making it easy to display data, respond to user actions, and keep both in sync. There are four types of data binding supported in Angular:

1. Interpolation ({{ }}):

Interpolation allows you to incorporate dynamic values from the component into the HTML template. It is one-way data binding from the component to the view.

• Syntax: {{ expression }}
• Example:

<h1>Welcome, {{ username }}</h1>

• Usage: Typically used for displaying string values, computed values, or simple expressions in the template.

2. Property Binding ([ ]):

Property binding allows you to set an element's property to a value from the component. It is one-way data binding from the component to the view.

• Syntax: [property]="expression"
• Example:

<img [src]="imageUrl">

• Usage: Used to bind properties that can accept single values, such as src, href, disabled, etc.

3. Event Binding (( )):

Event binding allows you to listen to events (such as button clicks, mouse events, key presses) in the view and react to them in the component. It is one-way data binding from the view to the component.

• Syntax: (event)="handler()"
• Example:

<button (click)="submit()">Submit</button>

• Usage: Used to handle user input or interactions and trigger methods or actions in the component.

4. Two-Way Binding ([( )]):

Two-way binding allows you to synchronize data between the component and the view in both directions. Changes in the view update the component and vice versa.

• Syntax: [(ngModel)]="property"
• Example:

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

• Usage: Used primarily for form inputs, where changes made by the user in the input field update the component's data and changes in the component update the input field in the view.

Key Points:

• Data Flow: Data binding establishes a communication channel between the component (model) and the template (view), ensuring that changes in one are reflected in the other automatically.

• Expression Evaluation: Angular evaluates the expressions within the bindings in the context of the component class.

• Imperative and Declarative: Data binding allows you to express the flow of data in a declarative manner within the HTML template, reducing the need for imperative DOM manipulation.

• Event Handling: Event binding enables you to respond to user actions (like clicks or inputs) and trigger appropriate actions or methods in the component.

Data binding is one of the core features of Angular that simplifies the development of dynamic and interactive web applications by keeping the UI and data in sync, enhancing productivity and maintainability.