Angular

Angular - ngFor

The ngFor statement is used to setup a loop to step through a collection of objects on an html page.

Here is an example.

note-type-list.component.html

here is a part of an html file. It’s a Grid List control provided by Material

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<mat-grid-list cols="4" rowHeight="170px" gutterSize="5px">
<mat-grid-tile *ngFor="let noteType of noteTypes">
    <mat-card class="my-card">
        <mat-card-content>
        {{noteType.id}}<br>
        <span *ngIf="!this.companyKey">
        {{noteType.companyKey}}<br>
        </span>
        <span *ngIf="!this.applicationKey">
        {{noteType.applicationKey}}<br>
        </span>
        {{noteType.applicationSubKey}}<br>
        {{noteType.noteType}}<br>
    </mat-card-content>
    <mat-card-footer>
        <button mat-stroked-button 
            (click)="onRowClicked(noteType)" 
            class='actionButton'>details
        </button>
    </mat-card-footer>
    </mat-card> 
</mat-grid-tile>

Notice the following

1
2
3
<mat-grid-tile *ngFor="let noteType of noteTypes">
:
</mat-grid-tile>

*ngFor starts a loop. The loop will step through each object contained in the noteTypes collection.

For each item in the loop, the mat-grid-tile tags, and the contents of <mat-grid-tile>..</mat-grid-tile> will be rendered.