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

Question

Here is an template example:

Here b

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

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) , wihch 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 correspondance 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?

Answer 3

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.