Tuesday, January 24, 2017

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


This is the simplest and the best way of  data binding


Property Binding ( One way data binding )

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


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"/>