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

Plunker example

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 NgFor and NgIf built-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, and NgSwitch all 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>