What is the meaning of * before ngFor in following sample and why it is needed?
<div *ngFor="#hero of heroes" (click)="selectHero(hero)">
{{hero.name}}
</div>
ngFor can only be applied to a <template>. *ngFor is the short form that can be applied to any element and the <template> element is created implicitly behind the scene.
https://angular.io/api/common/NgForOf
Syntax
<li *ngFor="let item of items; let i = index">...</li><li template="ngFor let item of items; let i = index">...</li><template ngFor let-item [ngForOf]="items" let-i="index"><li>...</li>
It's the same pattern for all structural directives
update
With the 2.0.0 final release <ng-container> was introduced, that behaves like <template> (a wrapper element that isn't actually added to the DOM) but supports the *ngFor="..." syntax.
When Angular sees the asterisk (*) in ngFor, it will use its DOM element as template to render the loop.
<div *ngFor="#hero of heroes">
{{ hero.name }}
</div>
is equivalent to
<template ngFor #hero [ngForOf]="heroes">
<div>
{{ hero.name }}
</div>
</template>
Quote from the official Angular documentation:
When we reviewed the
NgForandNgIfbuilt-in directives, we called out an oddity of the syntax: the asterisk (*) that appears before the directive name.The
*is a bit of syntactic sugar that makes it easier to read and write directives that modify HTML layout with the help of templates.NgFor,NgIf, andNgSwitchall add and remove element subtrees that are wrapped in<template>tags.
For more detail please check
https://angular.io/guide/template-syntax#built-in-structural-directives
https://angular.io/guide/structural-directives#asterisk
*ngFor has four properties: index, last, even, and odd. We can get the value of index per iteration, the last value, odd, or even the index itself using local variables. Here is a working example:
demoArray= [1,2,3,4,5,6,7,8,8,9];
<ul>
<li *ngFor='#item of demoArray #i=index #l=last #e=even'>
Item value is : {{item}} has index value is : {{i}} and last value is :{{l}} even index :{{e}}</li>
</ul>