Data Binding - sravanthimendu98/angular GitHub Wiki

Data binding a way to establish a connection between the application's data and the UI components.

Types of Data binding:

1. One-Way Binding:

In one-way binding, data flows in a single direction, either from the component to the view (interpolation or property binding) or from the view to the component (event binding).

Interpolation

This involves displaying component data in the view by double curly braces, like {{ data }}. it is used only for string values for boolean values go for property binding

2. Property Binding:

This is achieved by using square brackets to bind a property of an HTML element to a component property. For instance, [property]="data" binds the value of the component's "data" property to the HTML element's property.

syntax: [class]="variable_name"

3. Event Binding

This allows the view to communicate changes back to the component when an event occurs, such as a button click or input change. Event binding is denoted by parentheses, like (event)="handler()"

2. Two-Way Binding

Two-way binding is a combination of both one-way binding for property binding and event binding. It simplifies the synchronization between the component and the view by using the ngModel directive, allowing changes in the view to update the component and vice versa.

Here, the immediate changes to the view & component will be reflected automatically, i.e. when the changes are made to the component or model then the view will render the changes simultaneously. Similarly, when the data is altered or modified in the view then the model or component will be updated accordingly.