angular - 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.