Angular - Data binding techniques

Data binding is a process to establish a  connection between a template view and its associated component. 

In Angular, we have got three possible ways to bind data.

1. Interpolation
2. Event binding
3. Two way binding

Interpolation

Data is passed from component to template using this technique.Using double curly brace, we can use interpolation.

Example

Html  

{{name}}  

                                                            

Typescript                                                                       

name:string                               
ngOnInit(){
name="Adam";
}   

Browser     

Adam 

Event binding  

Data is passed from template to component  using this technique.

Example

Html

<div (click)="toogle($event)">
</div>

Typescript

toogle()
{
   this.status=!this.status;
}

In this example, we we click on the div then the function, toogle() gets executed.

Two way binding  

In two way data binding technique, flow of data goes from a element in template view  to a component and vice-versa.

Html

<input type="text" name="firstname" [(ngModel)]="firstname">
<button (click)="submit()">submit
</button>

Typescript

firstname:string
submit()
{
console.log(firstname)
}

In the above example, using two way binding we are able to print the firstname on clicking the submit button.