Angular8 Data Binding

Data Binding in Angular 8

Data binding is Angular 8's core concept, and is used to define communication between a component and the DOM. It's a technique to link your data to your layer of view. Simply put, you might say that binding data is a communication between your part typescript code and the template that the user sees. Defining interactive applications is simple, without worrying about pushing and pulling data.

Binding data can be either a one-way binding of data or a two-way binding of data.

One-way databinding

Databinding one way is a basic one way communication in which HTML template is modified as we make changes to TypeScript.

Or

The meaning of the Model is used in the View (HTML page) in one-way data-binding but you can not change Model from the View. The example of one-way databinding is Angular Interpolation / String Interpolation, Property Binding, and Event Binding.

Two-way databinding

Automatic synchronization of data between the Model and the View occurs in two-way databinding. Change in both components is reflected in here. Whenever you make changes to the Model, this will be reflected in the View and will be reflected in Model when you make changes to the View.

This happens instantly and automatically, ensuring that both the HTML template and the TypeScript code are still updated.

Angular provides four types of data binding, and the way in which data flows differ.

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

String interpolation

String Interpolation is a single-way data-binding technique used to output data from a TypeScript code to an HTML template (view). In double curly braces it uses the template expression to display the data from the component to the view.

For example:

{{ data }}

String interpolation adds the value of a property from the component:

Syntax:

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

Property Binding

Property Binding is also a one-way technique for binding the data. In property binding we bind a property of a DOM element to a field in our component TypeScript code which is a given property.

For example:

<img [src]="imgUrl"/>

Syntax:

<input type="email" [value]="user.email">

Event Binding

In Angular 8, event binding is used to manage events created from the DOM, such as clicking the button, mouse moving etc. When the DOM event occurs (e.g. click, shift, keyup), it calls in the component to the defined process. In the following example the component's cookBacon) (method is called when clicking on the button:

For example:

<button (click)="cookBacon()"></button>

Two-way Data Binding

We saw that any changes in the template (view) were not reflected in the component TypeScript code in one-way data binding. Angular provides two-way binding of data to resolve this problem. The two-way binding has a feature for updating component-to-view data, and vice-versa.

Data binding is combined in two ways, property binding, and event binding.

Syntax:

[(ngModel)] = "[property of your component]"