AngularJS is getting developers attraction due to its various features to simplify the complex task in HTML code. Talking in terms of design to logic, it is a perfect match. In this article, I’m going to discuss the data-binding feature of AngularJS which is very useful in dynamic applications. If you don’t have much knowledge about Angular, you can join the Angular JS Training accessible from anywhere anytime.

Data Binding is one of the very powerful features offered by AngularJS. It is used in the software development technologies. It works like a bridge between the presentation and business logic of the application. Generally, AngularJS relies on the two-way data binding model.

From the beginning, Data Binding is supported in AngularJS, Angular 2. Now it is also supported in Angular 4. Usually, curly braces- { { } }; are used for data binding process- it is known as interpolation.

One Way Data Binding Model:

The one-way binding model was used in the classical template systems. In the one-way binding model, the value was carried from the data model and inserted into an HTML element. There was not an option for updating the model from view. This kind of system binds data only in one direction. The flow of data was only directed from model to view, and it was not the same for view to model. They combine template and model components into a view. Once successfully combined, any changes made in the model did not automatically change the view.  Which in results, the makes developer to write codes that match view and model both together.

Two Way Data Binding Model:

Two-way data binding model follows a bi-directional approach. Here data travels from both the directions i.e., from model to view and from view to model. In AngularJS, the data is automatically synchronized to travel between model and view components. The projection of the model can be always seen in view and any changes in the model directly reflect the changes in view.

Let’s sum up the concept of two-way data binding model:

  • Here, data flow from model to view and vice-versa.
  • Any changes made in the model, the same changes will sync up in the view.
  • Any changes made in view, same changes sync up in the model.
  • In AngularJS, the ng-model directive is used to bind input box/ selection list/ textarea with the variables.

Now let’s understand the concept of the binding model with the help of an example:

The app.comp.html file variable points to {{title}}. The value of the title is invoked in the app.cpmp.ts file. While the value is displayed in app.comp.html. We’ll make a dropdown list of food in the browser. We are using the app.comp.ts file to perform this task. For that, we are using an array as follows: 

import { comp } from ‘@angular/core’;

@Comp ({
selector: ‘app-root’,
templateUrl: ‘./app.comp.html’,
styleUrls: [‘./app.comp.css’]
})

export class AppComp {
title = ‘My Awesome Workplace!’;

//defining foods array
foods= [“Noodles”, “Fries”, “ChillyPotato”, “SpicyCauli”, “Sandwich”, “Momos”, “TomatoSoup”, “ChickenSoup”, “VegSoup” ];

The array of food is now displayed in the browser on running HTML file. Let’s write code for accomplishing this task: 

<div style=”text-align:left”>
<h3> 
You are at {{ title }}.
</h3>
</div>
<div> Foods :
<select> 
 <option *ngFor=”I will eat x today”>{{x}}</option>
</select> 
</div>

Here we have created an option with select tag. We are also using for the loop. The AngularJS syntax *ngFor=”I will eat x today” will fetch the value of food and display it in {{x}}. These two curly braces are used for data binding. The variable created in the app.comp.ts file will be modified directly with these curly braces. Thus, we have seen how two-way data binding is successfully achieved in AngularJS.