Data Binding in Angular 8

What is data binding?

Data binding is one of the most important core concepts of Angular 8 used to establish data communication between a Component and the Document Object Model (DOM).

*DOM, when a web page has loaded the browser defines a Document Object Model of the web page. Especially the HTML DOM model is built as a tree of different kinds of Objects.

Document Object Model Example:

Data Binding in Angular 8

The simple scenario which is happened behind the data binding is the communication of data between the typescript code (componentName.component.ts) of the component and the HTML template (componentName.component.ts) which users see. Data binding makes way to define an interactive web application without worrying about pushing and pulling data.

Methods of Data Binding in Angular

Data binding can be performed either one-way data binding or two-way data binding.

One-way data binding

One-way data binding is a simple approach. It is a simple way data commutation where the value of the Interpolations in the HTML template is changed when the programmer makes changes in the TypeScript file of the component. In one-way data binding, the values of the Model are used in the HTML template cannot be updated using the View in the Model. Angular Interpolation, Event Binding, and Property Binding are examples of one-way data-binding.

*Interpolation: Interpolation is used in the Angular HTML template which is allowed to incorporate calculated strings into the text between HTML elements tags and within attributes assignments. Templates expressions are what developers use to calculate those string. Interpolation refers to embedding expression into the HTML template. By default, interpolation uses as its delimiter the double curly braces, {{ attribute }}

In the following snippet, {{ customerEmail }} is an example of interpolation.

One-way data binding

Two-way data binding

In the two-way data-binding in Angular, automatic synchronization of data happens between the Model (Typescript file) the View (HTML file) of the component. So, changes are reflected in both Model and View components which means that when changes are made in the Model, it will be reflected in the View and when changes are made in the View, it will be reflected in the Model. This vise-Versa process happens immediately and automictically. It ensures that the HTML template and the TypeScript file are updated at all times

Two-way data binding

Angular offers four types of data binding techniques to the Front-End developer to make their life easier and smarter. These techniques are different on the way of data flowing data between the Model and the View of the component. These data binding techniques are mentioned below.

  • String Interpolation
  • Property Binding
  • Event Binding
  • Two-way Binding

String Interpolation

As the above mention about the interpolation, String interpolation is a one-way data-binding technique. It is used to push/output the data from the TypeScript file to the HTML template.

Example :

{{ customerDOB }}

Syntax :

String Interpolation

Property Binding

Property binding is also one of the most important one-way data-binding technique which is used in Angular. In property binding, bind a property of an HTML/DOM element to a field which is a defined property as a variable in the TypeScript file in the component.

Example : <img [src]=”imageUrl”>

Syntax :

Property Binding

Event Binding

In Angular, the Event Binding is used to handle the events raised from the HTML DOM/View. As an example when the DOM event happens like button click on the HTML form or Profile Image change will be called to a specified method deified in the TypeScript file of the component.

Example : OnSubmit() { }, OnClick() { }

Event Binding

Two-way Data Binding

As the earlier said in one-way data binding any changes in the HTML view do not reflect the TypeScript code. To resolve this problem Tw0-way data-binding has been introduced. The Two-way data-binding consists of features to update data from View to Model and Model to View. Two-way binding is build combining the property binding and the event binding together.

Example :

Two-way Data Binding

Angular Documentation

About the author

Rangana Jayawardhena

Motivated Tech Geek with the intention of share the Tech Knowledge with enthusiasts.

View all posts

Leave a Reply

Your email address will not be published. Required fields are marked *