Why can't var be used instead of let in ngFor

Question

As per my knowledge we use var and let for variable declarations in javascript, the only difference being that var gets scoped to the current function, while let gets scoped to the current block. So it should work if I use var instead of let anywhere. But in the below code...

<li *ngFor="let fruit of fruits">
   {{ fruit}}
</li>

...if I use var it gives an error.

<li *ngFor="var fruit of fruits">
   {{ fruit}}
</li>

Error: Uncaught (in promise): Error: Template parse errors: Parser Error: Unexpected token var at column 1 in [var fruit of fruits] in ng:///AppModule/AppComponent.html@4:4 ("

Can someone tell me why this occurs?

Answer 1

The expression you enter here is not really javascript (or typescript) but an angular expression.

There are other things you can do here that are not possible in JS or TS, like using pipes (*ngFor="contacts | async").

Under the hood, this is just syntactic sugar for something like this:

 <ng-template ngFor let-contact [ngForOf]="contacts | async">

See https://toddmotto.com/angular-ngfor-template-element#ngfor-and-ng-template

Answer 2

Adding some details to the previous answer. I got some explanation for the usage of let with *ngFor in angular documentation

Link https://angular.io/guide/template-syntax#ngfor

The text assigned to *ngFor is the instruction that guides the repeater process.

*ngFor microsyntax The string assigned to *ngFor is not a template expression. It's a microsyntax — a little language of its own that Angular interprets. The string "let hero of heroes" means:

Take each hero in the heroes array, store it in the local hero looping variable, and make it available to the templated HTML for each iteration.

Angular translates this instruction into a around the host element, then uses this template repeatedly to create a new set of elements and bindings for each hero in the list.

The let keyword before hero creates a template input variable called hero. The ngFor directive iterates over the heroes array returned by the parent component's heroes property and sets hero to the current item from the array during each iteration.