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





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

No comments:

Post a Comment