What is the difference between parentheses, brackets and asterisks in Angular2?
angular
Solution
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.
Problem
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!!