Wednesday, February 17, 2016

AngularJS Binding Syntax and Examples


AngularJS bindings cheat sheet:

One-way(data source -> view target):
  • {{expression}}
  • [target] = "expression"
  • bind-target = "expression"

One-way(view target -> data source):
  • (target) = "statement"
  • on-target = "statement"

Two-way:
  • [(target)] = "expression"
  • bindon-target = "expression"


Now let's see some real life AngularJS binding examples:

Property:
<img [src] = "carImageUrl">
<car-detail [car]="currentCar"></car-detail>
<div [ngClass] = "{selected: isSelected}"></div>

Event:
<button (click) = "onSave()">Save</button>
<car-detail (deleted)="onCarDeleted()"></car-detail>
<div myClick (myClick)="clicked=$event">click me</div>

Two-Way:
<input [(ngModel)]="carName">

Attribute:
<button [attr.aria-label]="help">help</button>

Class:
<div [class.special]="isSpecial">Special</div>

Style:
<button [style.color] = "isSpecial ? 'red' : 'blue'">

No comments:

Post a Comment