What is Data binding in Angular?

In Angular, data binding is an automatic synchronization of data between the model and view components. Two-way data binding is very popular and powerful feature of Angular which creates a bridge between the view and the business logic of the Angular apps.

In Angular, data binding is a powerful feature that establishes a connection between the component’s data and the UI, ensuring that changes made to one are reflected in the other. There are primarily three types of data binding in Angular:

1. Interpolation: This is a one-way data binding method that allows you to output a component’s property value within the HTML template. It is denoted by double curly braces {{ }}.

   Example:

   htmlCopy code

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

2. Property Binding: This is a one-way data binding method that allows you to set the value of an HTML element’s property. It binds a component’s property to a target element’s property using square brackets [ ].

   Example:

   htmlCopy code

   <input [value]="username">

3. Event Binding: This is a one-way data binding method that allows you to respond to user events such as clicks, keystrokes, mouse events, etc., within the component’s class. It binds a target element’s event to a component’s method using parentheses ( ).

   Example:

   htmlCopy code

   <button (click)="logout()">Logout</button>

4. Two-way Binding: This is a combination of property binding and event binding. It allows synchronization of data between the component and the UI in both directions. It is denoted by [( )] using the ngModel directive, which requires importing FormsModule from @angular/forms in Angular applications.

   Example:

   htmlCopy code

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


By utilizing these data binding techniques, Angular provides a seamless way to handle data flow between components and their associated templates, enhancing the development experience and creating dynamic, interactive web applications.