*ngFor: meaning of # vs let?

Question

Am starting out in angular2 and have run into 2 different syntax but am not sure of the difference - or rather how they work.

i see this:

 <select class="form-control" required
      [(ngModel)]="model.power"
        ngControl="power" #power="ngForm" >
      <option *ngFor="let p of powers" [value]="p">{{p}}</option>
    </select>

but also this works

<div *ngFor="#game of games" (click)="gotoGame(game)" class="col-1-4">
        <span>{{game.id}}</span>{{game.name}}
        <br> {{game.description}}
        <br> {{game.genre.name}}
  </div>

is one just an alias of the other? what are the advantages of one over the other?

Answer 1

In beta.17 the syntax changed and only this form is valid anymore

<select class="form-control" required
  [(ngModel)]="model.power"
    ngControl="power" #power="ngForm" >
  <option *ngFor="let p of powers" [value]="p">{{p}}</option>
</select>

See also https://github.com/angular/angular/blob/master/CHANGELOG.md#200-beta17-2016-04-28

BREAKING CHANGES

The reference #... now always means ref-.

Before:

• Outside of ngFor, a #... meant a reference.
• Inside of ngFor, it meant a local variable.

This pattern was confusing.

After:

• <template #abc> now defines a reference to a TemplateRef, instead of an input variable used inside of the template.
• Inside of structural directives that declare local variables, such as *ngFor, usage of #... is deprecated. Use let instead.
• <div *ngFor="#item of items"> now becomes <div *ngFor="let item of items">
• var-... is deprecated.
• use # or a ref- outside of *ngFor
• for ngFor, use the syntax: <template ngFor let-... [ngForOf]="...">