Data Binding Angular 2 Plus

Posted By : Saloni Arora | 30-Apr-2018

The Major aspect of developing an application is data and UI.  while developing any application  We need to Connect the data at the front end. So if we are making any Application which has a large User interface and tends to get a lot of data so we need to bind it to the UI. Anything which is showing up on the page is bound by the data which is coming from the back end. Whenever we are making or developing the Dynamic Pages it requires to get the Data Dynamically.

In this World of front-end development, angular Framework provides the synchronizing part at the back of the application. Earlier we need to write large code for the same. But Nowadays  Having these frameworks helped the user to directly implement the functionalities.


The process of synchronizing the data can be termed as Data Binding.

Data Binding is the process which connects the application and acts as a bridge between the data of the application and the UI of the application.
Angular Supports Major 4 type os Data Binding.

Angular Supports Major 4 type os Data Binding. We Can use them to bind the data with the frontend. 

Interpolation.
Property Binding.
Event Binding.
Two Way Binding
1) Interpolation: {{}} this symbol is user to describe interpolation. This is also called one-way binding.

eg: <h1> {{name}}<h1>

This name is already being defined in the  component.ts file of the application.

name="oodles";

So this will directly print in the heading section. 

2) Property Binding: [ngModel] this is simple binding so if we will enter the new content it will update the content.

3) Event Binding: [ngModel] ="name" (ngModelChange)="name=$event".

4) Two way Binding: [(ngModel)]="name". This is the short form of property binding and event binding.

so, Having this functionality provides an ease to the user to implement these functionalities.

Thanks,

About Author

Author Image
Saloni Arora

Saloni Arora is a very positive person she always likes to take things positively. she has a desire of being a talented Front end developer . and she is seeking to grab more opportunities in future

Request for Proposal

Name is required

Comment is required

Sending message..