ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel
  • »
  • Technology»
  • Computers & Software

Angular js 2.0 Bindings with examples

Updated on October 7, 2015

In Angular 1.x, you can have one-way bindings, two way bindings. But due to two way bindings, angular's change detection life cycle became complex as $digest and $apply need to be always watching both sides for changes.

In Angular 2, there is no direct provision for two-bindings but yet you can achieve the same using below examples.

Result of new Angular 2 binding syntax is performance improvement and no subtle bugs.

Here are the all types of bindings provided in Angular 2.0 (alpha version).

NOTE: Angular 2 is not production ready yet. It is in alpha version. Just play around Angular 2 to be future ready.

Bindings Examples


Hello { {firstName }}

Property Binding Without Two-Way

<input [value]="city">

Binding With Two-Way (Long Form)

<input [value]="city" (input)="city = $">

Two-Way Binding (ng-model directive long form)

<input [ng-model]="firstName" (ng-model)="firstName=$event"/> 

Two-Way Binding (sugar)

<input [(ng-model)]="lastName" /> 

Two-Way Binding (classic style)

<input bindon-ng-model="city" />

Local Variables

<input #mylocalvar/>{ {mylocalvar.value}}
<button (click)="addThing(mylocalvar.value)">Add Local Var  </button>

Tryout all these bindings and have a fun!!!


    0 of 8192 characters used
    Post Comment

    No comments yet.