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