What is the difference between parentheses, brackets and asterisks in Angular2?

[] - Property binding One-way from data source to view target. eg

{{expression}}
[target]="expression"
bind-target="expression"

We can use bind- instead of []

() -> Event Binding One-way from view target to data source

(target)="statement"
on-target="statement"

We can use on- instead of ()

[()]- Two way Binding Banana in a box

[(target)]="expression"
bindon-target="expression"

We can use bindon- instead of [()]

All details can be found here: https://angular.io/docs/ts/latest/guide/template-syntax.html

directiveName - is the short hand form for structural directives where the long form can only be applied to <template> tags. The short form implicitely wraps the element where it's applied in a <template>.
[prop]="value" is for object binding to properties (@Input() of an Angular component or directive or a property of a DOM element).
There are special forms:
- [class.className] binds to a css class to enable/disable it
- [style.stylePropertyName] binds to a style property
- [style.stylePropertyName.px] binds to a style property with a preset unit
- [attr.attrName] binds a value to an attribute (visible in the DOM, while properties are not visible)
- [role.roleName] binds to the ARIA role attribute (not yet available)
prop="{{value}}" binds a value to a property. The value is stringified (aka interpolation)
(event)="expr" binds an event handler to an @Output() or DOM event
#var or #var has different functions depending on the context
- ~~In an *ngFor="#x in y;#i=index" scope variables for the iteration are created~~
  (In beta.17 this is changed to *ngFor="let x in y; let i=index"`)
- On a DOM element <div #mydiv> a reference to the element
- On an Angular component a reference to the component
- On an element that is an Angular component or has an Angular directive where exportAs:"ngForm" is defined, #myVar="ngForm" creates a reference to this component or directive.

Related