Difference between [] and {{}} for binding state to property?

Question

Here is an template example:

<span count="{{currentCount}}"></span>
<span [count]="currentCount"></span>

Here both of them does the same thing. Which one is preferred and why?

Answer 1

[] is for binding from a value in the parent component to an @Input() in the child component. It allows to pass objects.

{{}} is for binding strings in properties and HTML like

<div somePropOrAttr="{{xxx}}">abc {{xxx}} yz</div>

where the binding can be part of a string.

() is for binding an event handler to be called when a DOM event is fired or an EventEmitter on the child component emits an event

@Component({
    selector: 'child-comp',
    template: `
    <h1>{{title}}</h1>
    <button (click)="notifyParent()">notify</button>
    `,
})
export class ChildComponent {
  @Output() notify = new EventEmitter();
  @Input() title;

  notifyParent() {
    this.notify.emit('Some notification');
  }
}


@Component({
    selector: 'my-app',
    directives: [ChildComponent]
    template: `
    <h1>Hello</h1>
    <child-comp [title]="childTitle" (notify)="onNotification($event)"></child-comp>
    <div>note from child: {{notification}}</div>
    `,
})
export class AppComponent {
  childTitle = "I'm the child";

  onNotification(event) {
    this.notification = event;
  }
}

Plunker example

More details in https://angular.io/docs/ts/latest/guide/template-syntax.html#!#binding-syntax

Answer 2

Difference between string interpolation and property binding:

The main thing to understand it the following:

Interpolation is a special syntax that Angular converts into property binding. It’s a convenient alternative to property binding.

This implies that under the hood it yields a similar outcome. However, string interpolation has one important limitation. This is that everything within string interpolation will first be evaluated (trying to find a value from the model ts file):

• if this value cannot be found there then the value within the string interpolation will be evaluated to a string.
• If this value is found in the model the value which is found gets coerced to a string and is used.

This has some implications on how you can use the 2 methods. For example:

1. String concatenation with string interpolation:

     <img src=' https://angular.io/{{imagePath}}'/>
   

2. String interpolation cannot be used for anything else than strings

     <myComponent  [myInput]="myObject"></myComponent>
   

When myInput is an @Input() of myComponent and we want to pass in an object, we have to use property binding. If we were to use string interpolation the object would be turned into a string and this would be passed in as a value for myInput.

Answer 3

I'm coming a little bit late after the battle :) , but, in my understanding, there is another difference which can sometimes be very important.

As its name implies "Property Binding" means that you are binding to the property of the HTML element "object"(which corresponds to its "objective" representation in the DOM), which is a different thing from string interpolation, which can be applied to the HTML element tag attribute, and which is the reason why you can only put strings in it, as you are talking to a not parsed/parseable entity.

Very often, you have a direct correspondence between both (the tag in your html has a foo attribute, which is linked to the foo property of the DOM object), but that's not a rule and you can have attributes that are not linked to properties as well as the opposite.

By the way, you have a very good answer in stack overflow which explains deeply the difference between both: What is the difference between properties and attributes in HTML?