How does data binding work in AngularJS?

Question

Aryan Kumar · Answer

Data binding is a core feature of AngularJS that allows you to synchronize data between the model and the view. There are two main types of data binding in AngularJS: one-way data binding and two-way data binding.

One-way data binding allows you to display data from the model in the view. To implement one-way data binding in AngularJS, you can use curly braces ({{ }}) in the HTML template to interpolate the value of a model property. Here's an example:

<div ng-controller="MyController">
   <p>{{ message }}</p>
</div>

In this example, message is a property of the model, and its value is displayed in the view using the {{ }} syntax.

Two-way data binding allows you to not only display data from the model in the view but also to update the model from the view. To implement two-way data binding in AngularJS, you can use the ng-model directive in the HTML template. Here's an example:

<div ng-controller="MyController">
   <input type="text" ng-model="message">
   <p>You entered: {{ message }}</p>
</div>

In this example, the ng-model directive is used to bind the value of an input field to the message property of the model. When the user enters text in the input field, the value of message is automatically updated, and the updated value is displayed in the view using the {{ }} syntax.

AngularJS uses a process called "dirty checking" to detect changes to the model and update the view accordingly. In dirty checking, AngularJS watches for changes to the model by comparing the current value of each model property with its previous value. If a change is detected, AngularJS updates the view to reflect the new value. This process is efficient and automatic, making it easy to implement complex data binding scenarios in AngularJS.

forum

How does data binding work in AngularJS?

Can you answer this question?

1 Answers