Data Binding in Angular 8

What is Binding?

Binding is the process which generates the connection between the application UI and the data which comes from the business logic. In Angular, it is called the automatic synchronization of the data and the view.

Data Binding in Angular 8

Data binding is the most important and essential features in any software development language. It is a powerful feature of Angular. Angular Data binding is used for communication. It allows us to define the connection between the component and view. So, we can say that data binding is passed from component to view. It makes it easy to identify interactive applications without worrying about pushing and pulling the data. It is mainly used to communicate between our Typescript code and another component.

It has mainly two parts:

HTML Template

It contains view for the component (HTML elements: input, select, button, etc.)

Component Class

It contains logic for a component like classes, variables, functions, API calls, etc. The interaction between the HTML template and component class can be done through data binding.

In simple words, “Data Binding is communication between typescript code of our component and our template which user sees.”

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

One way data-binding:

It is a simple one-way communication where HTML template is changed when we make changes in typescript code. The value of the model is used in the view (HTML page), but we can't update the model from the view in one-way data binding.  Property binding,  Event binding, and String interpolation are an example of one-way data binding.

Two-way data binding

In two-way data binding, automatic synchronization of data happens between the model and the view. Here, changes are reflected in both components. When we make changes in the model from the view, and when we make changes in view, it will be reflected in the model.

This will happens immediately and automatically, ensures that the HTML template and the Typescript code are updated at all times.

Types of Data Binding:

• String Interpolation
• Property binding
• Event Binding
• Two Way Data Binding

String Interpolation

String Interpolation is a one-way data-binding technique which is used to output the data from a TypeScript code to HTML template (view).

It uses the template impression in double curly braces to show the data from the component to the view.

For example:

{{data}}

String interpolation sums the value of a property from the component.

Syntax:

Name: {{user.name}}
Email: {{user. Email}}

Property Binding

Property binding is a technique, which will help to bind values to the properties of HTML elememts. It is also a one-way data binding approach.

In property binding, we bind a characteristic of a DOM element in a field which defined property in our component Typescript code.

Property binding helps us to bind the values to the target property of the element property surrounded within the square brackets.

For example:

Syntax:

Event binding

Event binding is used to hold the events lifted from the DOM such as button click, mouse move, etc. in Angular 8. When the DOM event happens (e.g., Click, change, key up), it calls the specified method in the component. In the following example, the cookbacon() method in the component is called when the button is clicked:

For example:

<button (click)=”cookBacon()”>

Two-way Data Binding

In one-way data binding, any changing in the template (view) was not considered in the component Typescript code. To solve this problem, Angular produces two-way data binding.

The two-way binding has a vital feature to update data from component to view and view to the element.

In two way data binding, property binding and event binding are combined. For two-way data binding, we have to enable the ngModel directive.

Syntax:

[(ngModel)]=”[property of our component]”