How exactly does data binding work in AngularJS?

Question

Aryan Kumar · Answer

Data binding in AngularJS is the synchronization of data between the model and the view. When data in the model changes, the view reflects the change, and when data in the view changes, the model is updated as well. This happens immediately and automatically, which makes sure that the model and the view are always in sync.

There are three types of data binding in AngularJS:

One-way binding: This is the simplest type of data binding. It allows you to bind a value from the model to an element in the view. When the value in the model changes, the element in the view is updated.
Two-way binding: This type of data binding allows you to bind a value from the model to an element in the view, and vice versa. When the value in the model changes, the element in the view is updated, and when the value in the view changes, the model is updated as well.
Event binding: This type of data binding allows you to bind an event from an element in the view to a function in the controller. When the event is triggered, the function is executed.

Data binding in AngularJS is done using directives. Directives are special attributes that you can add to elements in the view. Each directive has a specific purpose, such as binding data or handling events.

The most common directive for data binding is the ng-bind directive. The ng-bind directive is used to bind a value from the model to an element in the view. The syntax for the ng-bind directive is as follows:

<element ng-bind="value">

Where value is the name of the variable in the model that contains the value to be bound.

For example, the following code binds the value of the name variable in the model to the h1 element in the view:

<h1 ng-bind="name">

When the value of the name variable changes, the h1 element is updated to reflect the change.

forum

How exactly does data binding work in AngularJS?

Can you answer this question?

1 Answers