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:

  ({{i}}) {{hero.name}}

The *ngFor is first rewritten to a template attribute:

  ({{i}}) {{hero.name}}

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

  
({{i}}) {{hero.name}}

The same rewriting happens with your code:

is actually just a shorthand for:

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