Concepts of Data Binding in Angular

Posted On: 14 Apr, 2020
Posted By: Preeti

Concepts of Data Binding in Angular

Data Binding In simple words is synchronization of data between the component model (Component) and view templates (DOM).

It is used to bind the view (HTML Content) with Controller's (Component's) field to display dynamic data on a view (HTML) from component.

Data Binding basically means interacting with data, so we can say that interaction between templates and logic is called data binding.

One-way Data Binding:

It is a unidirectional data binding method through which we can only bind the data from Component to View and or from View to the Component. It is a one-way communication where HTML template is changed when we make changes in typescript code and vice-versa.

There are many different ways that we can use for one-way data binding in Angular application

Types of One-way Binding :

Component To View(DOM)
View To component

1. Component to View

Interpolation: {{ value }}

Interpolation is a technique that allows the user to bind a value to view page.
Interpolation binds the data one-way. It means that when value of the field bound using interpolation changes, it is updated in the page as well but it cannot change the value of the field.
It uses the template expression in double curly braces to display the data from the component to the view.
The format for defining interpolation in a template is: {{ propertyName }}.

DOM<---{{ value }}---COMPONENT

Property Binding: [property] = "value"

Property Binding is how can we bind the data of component to the view page.
It is used to bind values of component properties to the HTML element.
Depending on the values, it will change the existing behaviour of the HTML Element.

[property]='expression'

In property binding, there is a source and target.
For example, we can define it as [innerHTML] = 'firstname'. Here innerHTML is a target that is a property of a span tag and source is a component property i.e firstname.

DOM <---[property]="value"---COMPONENT

Attribute Binding:

Attribute Binding is used to bind attribute of an element with the field of a component.
We can set the value of an attribute directly.
We must use the attribute binding only when there is no element property to bind.

[attribute]='expression'

In attribute binding, attribute value changes whenever there is a change in property value.
<td [attr.colspan]="myColSpan"></td>

Class Binding:

ngClass directive allows us to set the css class dynamically for a DOM element.
ngClass is provided with an object with keys as class names and values as expression that evaluates to true or false.

<div [ngClass]="classes">.....</div>

Style Binding:

The ngStyle directive used to set a given DOM elements style properties.

<div [ngStyle]="{ 'background-color': green}"></div>

ngStyle becomes much more useful when the value is dynamic.

<div [ngStyle]="{background-color' : person.country === 'UK' ? 'green' : 'red'}"> ..... </div>

2. View to component

Event Binding: (event) = "handler"

When a user interacts with an application in the form of a keyboard movement, a mouse click, or a mouseover, it generates an event. These events are then handled to perform some kind of action.

<button (click)="onClick()"> Click me </button>

In this case, the onClick() method of the component class is called when the click event occurs.

DOM ---->(event)="handler"---->COMPONENT

Two-way Binding:

The most widely used data binding is two-way data binding in the angular framework. Basically two-way binding is mainly used in the input type field or any form element where user type or provide any value or change any control value in the one side, and on the other side, the same automatically updated into the controller variables and vice versa.

It a combination of both Event Binding and Property Binding.
<input [value]='data' (input)='data = event.target.value'>

Binding using [(ngModel)] directive-

[(ngModel)] directive which combines the square brackets of property binding with the paranthesis of event binding in a single notation.
[(ngModel)] is used to represent Two-way data binding.
<input [(ngModel)]="data">
Need to import NgModule in app.module.ts file.
It depends upon FormsModule in angular/forms package.
Need to add FormsModule in imports[] array in the AppModule as well.
Two-way sequence: view-to-source(Component)-to-view.

DOM <------ [(ngModel)] = "data" ----> COMPONENT