Data binding, one of the most loved and hated concepts of Angular 1, made its way to Angular 2. There are a couple of ways to bind data in Angular: interpolation, one way binding (unidirectional), two-way binding and event binding. These four types of data binding were already available in Angular 1, but now in Angular 2 the syntax has changed a bit. In this post, I’d like to share with you how the Angular 2 syntax looks compared to Angular 1’s.

Interpolation

Interpolation is the easiest and best-known way of data binding. In Angular 1, it looked likes this:

<h1>{{vm.employee.name}}</h1>
  

In Angular 2, we can still use the curly braces, but we can omit vm, because we already have the context. Not really a big difference, but we can save some keystrokes here.

<h1>{{employee.name}}</h1>
  

One Way Binding

The way we used to apply one-way binding is ng-bind just like this:

<h1 ng-bind="employee.name"></h1>
  

This is exactly what interpolation ends up to look like anyway. In Angular 2 we can use square brackets round the property we want to bind to.

<h1 [innerText]="employee.name"></h1>
  

This may look a bit strange at first, but it definitely is valid HTML. We actually can take any HTML property, like innerText, wrap it in square braces and you can then bind it to a model. This could for example also work on style properties:

<span [style.backgroundColor]="employee.favouriteColor"></span>
  

Two Way Binding

The most used use case of two-way binding in Angular is using it on an input field or any other form elements. When we type something in the input on one side, the value goes to the controller and then back and forth. In Angular 1 we’d use the ng-model directive on the element and bind it to the value:

<input ng-model="employee.name"/>
  

In Angular 2 we also have a special directive called ngModel.

<input [(ngModel)]="employee.name"/>
  

But notice how the syntax is just a bit different. We use the square brackets because it’s a property, but we also use the parenthesis. This syntax is called Banana in a Box ([()]). What this means is when you see this syntax, it’s two-way binding at work.

Also, in Angular 2 they dropped the convention of splitting words with dashes and use camelcase instead (ng-repeat vs ngFor, ng-if vs ngIf etc).

Event Binding

You can do event binding with any valid HTML event available, like click, focus or blur. In Angular 1 you should need built-in directives to use event binding. For example, for binding to a click, one would use:

<button ng-click="vm.sendForm()">Send</h1>
  

In Angular 2, we can just take the same property that is on the HTML element (click in the previous example) and wrap it in parenthesis. So, with properties we use square braces, but with events we use parenthesis:

<button (click)="sendForm()">Send</h1>
  

I want to emphasize that there are no event directives like click in Angular 2, and that these are in fact HTML element events. Angular dropped tons of directives (like ng-click, ng-blur, ng-focus etc) because of this, and I think it’s a great choice.