Sunday, July 10, 2016

Angular 2 Data Binding notes

Just some notes on the different ways to use data binding in Angular 2:

  1. Interpolation - This is a one way binding from the class to the template.  You can use concatenation, calculations, and even call class methods inside the mustaches.  
    1. <div>{{ someValue }}</div>
    2. <div>{{7*4}}</div>
    3. <div>{{'Title: ' + someValue}}</div>
    4. <div>{{'Title: ' + getTitle()}}</div>
  2. Property Binding - Sets an elements property to the value of a template expression.  The elements property is surrounded by square brackets, and the expression is surrounded by quotes.
    1. <img [src]='someValue'>
  3. Event Binding - Listens for events on the element and triggers class methods when the event occurs.  The event name is surrounded by parenthesis.  The class method is surrounded by quotes.  The event object is exposed by Angular through $event.
    1. <div (click)='divClicked($event)'>Click Me!</div>
  4. Two-way Binding - Utilizes ngModel to update a class property and the form element when the value is changed.  Two-way binding uses the "banana in a box" syntax.
    1. <input [(ngModel)]='someValue'><div>{{someValue}}<div>

No comments: