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

Question

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.

[] - 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 [()]

As mentioned already, the Angular documentation, especially the "hero tutorial", explains this deeper. Here is the link if you want to check it out.

Parentheses are events of the element you are working on, like the click on a button like your example; this could also be mousedown, keyup, onselect or any action/event for that element, and what is after the = is the name of the method to call -- using the parenthesis for the call. That method should be defined on your component class, i.e.:

<element (event)="method()"></element>

Brackets works the other way. They are to get data from your class -- the opposite of the parenthesis that were sending the event -- so a common example is the usage of a style like this:

<element [ngStyle]="{display:someClassVariable}">

See? You are giving the element a style based on your model/class.

For this you could have used...

<element style="display:{{ModelVariable}};">

The recomendation is that you use double curly brackets for things that you will print on the screen like:

<h1>{{Title}}</h1>

Whatever you use, if you are consistent, it will help the readability of your code.

Lastly, for your * question, it is a longer explanation, but it is very VERY important: It abstracts some methods' implementation that otherwise you would have to do to get an ngFor to work.

One important update is that in the ngFor you will no longer use hash; you need to use let instead as follows:

<tr *ngFor="let movie of movies">
    <td>{{movie.title}}</td>
</tr>

One last thing worth mentioning is that all of the above applies also for your components, e.g. if you create a method in your component, it will be called using ():

<my-owncomponent 
    (onSearched)="MethodToCall()" 
    [MyInputData]="SearchParamsArray"></my-owncomponent>