How exactly works the Angular *ngFor in this example?

Question

I am pretty new in Angular 2 and I am not so into JavaScript\\TypeScript (I came from Java) and I have some doubt about an example that I am studying related how to a compon

Answer 1

In angular, when you write a directive preceded by an aserisk that is actually syntactic sugar for a more complex structure. For *ngFor, the documentation gives this example:

<div *ngFor="let hero of heroes; let i=index; let odd=odd; trackBy: trackById" [class.odd]="odd">
  ({{i}}) {{hero.name}}
</div>

The *ngFor is first rewritten to a template attribute:

<div template="ngFor let hero of heroes; let i=index; let odd=odd; trackBy: trackById" [class.odd]="odd">
  ({{i}}) {{hero.name}}
</div>

Then the template attribute is extracted out to an ng-template directive wrapping the element that contained the original *ngFor.

<ng-template ngFor let-hero [ngForOf]="heroes" let-i="index" let-odd="odd" [ngForTrackBy]="trackById">
  <div [class.odd]="odd">({{i}}) {{hero.name}}</div>
</ng-template>

The same rewriting happens with your code:

<app-server-element
    *ngFor="let serverElement of serverElements"
    [element]="serverElement">
</app-server-element>

is actually just a shorthand for:

<ng-template ngFor let-serverElement [ngForOf]="serverElements">
    <app-server-element [element]="serverElement"></app-server-element>
</ng-template>

From the expanded form of the ngFor it should now be obvious that serverElements is referenced entirely outside the app-server-element component.