What Is NgForOf in Angular?
Structural directives render a template for-each
item in a collection and this directive is placed on an element, which becomes
the parent of the cloned templates.
The ngForOf
directive is generally used in the shorthand form *ngFor.
In the below example, the template to be rendered
for each iteration is the content of an anchor element containing the
directive.
The following example shows the shorthand syntax
with some options, contained in an <li> element.
<li *ngFor="let item of items; index as i; trackBy: trackByFn">...</li>
The shorthand form expands into a long form that
uses the ngForOf selector on an <ng-template> element. The
content of the <ng-template> element is the <li> element that
held the short-form directive.
Here is the expanded version of the short-form
example.
<ng-template ngFor let-item [ngForOf]="items" let-i="index" [ngForTrackBy]="trackByFn">
<li>...</li>
</ng-template>
Angular automatically expands the shorthand
syntax as it compiles the template.
|
Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
|