The ngFor directive and the ngForOf directive may look like separate entities, but they are actually linked as selectors within the NgForOf directive.</p>
<p>If you dive into the <a href="https://github.com/angular/angular/blob/master/packages/common/src/directives/ng_for_of.ts" rel="noreferrer">source code</a>, you'll find that the NgForOf directive is triggered by the presence of both <code>ngFor
and
ngForOf
attributes on an element.
When using *ngFor
, the Angular compiler transforms this syntax into a standard form with both attributes present.
For example,
<div *ngFor="let item of items"></div>
is de-sugared to:
<template [ngFor]="let item of items">
<div></div>
</template>
This initial transformation is due to the '*', followed by another de-sugaring process for the micro syntax "let item of items". The Angular compiler converts it to:
<template ngFor let-item="$implicit" [ngForOf]="items">
<div>...</div>
</template>
(Here, $implicit acts as an internal reference for the current item in the loop).
In its standardized form, the ngFor attribute serves as a marker, while the ngForOf attribute functions as an input supplying the list for iteration to the directive.
For more information, refer to the Angular microsyntax guide.