Angular Data Binding

Databinding is a powerful feature of Angular. Angular Databinding is used for communication. It is used to communicate between your TypeScript code (your business logic) and the other component which is shown to the users i.e. HTML layout.

Databinding is necessary because when we write the code in TypeScript, it is compiled to JavaScript and the result are shown on HTML layout. Thus, to show the correct and spontaneous result to the users, proper communication is necessary. That's why data binding is used in Angular.

There is two types of data binding:

One-way data binding

One way data binding is a simple one-way communication where HTML template is changed when we make changes in TypeScript code.

Or

In one-way data binding, the value of the Model is used in the View (HTML page) but you can't update Model from the View. Angular Interpolation / String Interpolation, Property Binding, and Event Binding are the example of one-way data binding.

Two-way data binding

In two-way data binding, automatic synchronization of data happens between them Model and the View. Here, change is reflected in both components. Whenever you make changes in the Model, it will be reflected in the View and when you make changes in View, it will be reflected in Model.

This happens immediately and automatically, ensures that the HTML template and the TypeScript code is updated at all times.

SHARES

Share

Pin it

Tweet

Share

Share

Share

Buffer

Print

About Mariano

I'm Ethan Mariano a software engineer by profession and reader/writter by passion.I have good understanding and knowledge of AngularJS, Database, javascript, web development, digital marketing and exploring other technologies related to Software development.