Angular 7 Databinding

Angular Data Binding serves the purpose of communication to communicate between the TypeScript code (the business logic) and the other component which is shown to the users i.e. HTML layout and hence is considered to be a dominant feature of Angular. The code written in TypeScript is compiled to JavaScript. The result so obtained is displayed on the HTML layout. It means that decent communication is necessary to display an accurate and immediate output to the users and thus Data Binding is necessary.

Types of Data Binding:

There are two types of Angular Data Binding. These are:

One-way Data Binding:

Being a simple and a single way of communication, the HTML template is changed in One way Data Binding when changes are made in TypeScript code.


The value of the Model is used in the View (HTML page) in One Way Data Binding. The Model, however, can’t be updated from the View. Example: Angular Interpolation / String Interpolation, Property Binding, and Event Binding.

Two-way Databinding:

The automatic synchronization of data happens in Two Way Data Binding between the Model and the View. It means that changes made in the Model will be reflected in the View and the changes made in View will be reflected in Model. To secure that the HTML template and the TypeScript code are updated at each time, the changes made will be reflected in both components immediately and automatically.