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

Question

I have been reading the Angular 1 to 2 quick reference in the Angular website, and one thing I didn't completely understand was the difference between these special characters. For example one that uses asterisks:

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

I understand here that the hash (#) symbol defines movie as a local template variable, but what does the asterisk before ngFor mean? And, is it necessary?

Next, are the examples that use brackets:

<a [routerLink]="['Movies']">Movies</a>

I somewhat understand that the brackets around routerLink bind it to that HTML attribute / Angular directive. Does this mean that they are a pointer for Angular to evaluate an expression? Like [id]="movieId" would be the equivalent of id="movie-{{movieId}}" in Angular 1?

Lastly, are parentheses:

<button (click)="toggleImage($event)">

Are these only used for DOM events and can we use other events like (load)="someFn()" or (mouseenter)="someFn()"?

I guess the real question is, do these symbols have a special meaning in Angular 2, and what is the easiest way to know when to use each one? Thanks!!

Answer 1

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.

Answer 2

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

Answer 3

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>