Data binding in angular 2

  Data binding is done to coordinate communication between a component and its template . 

  There are  four types of data binding

Interpolation

This is the simplest and the best way of  data binding

<h1>{{pagTitle}}</h1>  

Property Binding ( One way data binding )

Square bracket [ ] is used to property binding. We take any html properties and bind it to our model

<img[src]="product.imargeurl"></span> 

Event Binding

Parenthesis is  ( ) is used to specify event binding. There are no event directives in angular 2

<button (click)="toggleImage()">Show</h1>  

Two way data binding (Banana in a Box)

We use the square brackets because it's a property, but we also use the parenthesis. This syntax is called Banana in a Box ([()])

• [ ] Square bracket is used to indicate property binding 
• ( ) is used for event binding to send a notification to the user entered data back to the class property

Note: ngModel directive a is part of FormsModule. We need to import it in AppModule

<input [(ngModel)]="listFilter"/>