In the HTML view/template of an Angular app how to wait for rendering of ngFor section?

Question

Assume this scenario:

You have just received matrix/table style data from a database source - in variable: dataSource

Now, you want to present the data in a table - e.g mat-table. The catch is your data fields needs some manipulation while being rendered using the classic Anular: *ngFor and it takes some time to render the table.

What would be a good approach to designing the HTML template/view so it displays text:

Building report ...

while *ngFor is rendering.

When the table is ready (*ngFor has rendered the last row) we hide the Building report ... text and display the rendered table instead.

This template code simply shows a blank page while the page is being rendered. I would like the user to see the text of Building report ... instead.

  <ng-container *ngIf="dataSource">

    <div class= "table-container mat-elevation-z8">
      <table mat-table [dataSource]="dataSource" matSort>

    <ng-container [matColumnDef]="column" 
      *ngFor="let column of colPropNames">

      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{column}} </th>
      <td mat-cell *matCellDef="let element"> {{element[column]}} </td>

    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayCols; sticky: true"></tr>
    <tr mat-row *matRowDef="let row; columns: displayCols;"></tr>

      </table>

      <div class="box-paginator">
    <mat-paginator class="paginator"
        color="primary"
        [pageSizeOptions]="pageSizeOptions" 
        showFirstLastButtons>
    </mat-paginator>
      </div>
    </div>

  </ng-container>

</div>

charbel charbel · Accepted Answer · 2020-06-26T20:48:45

Angular has an if else feature:

<div *ngIf="show; else elseBlock">Text to show</div>
<ng-template #elseBlock>Alternate text while primary text is hidden</ng-template>

so you can edit you code to display your required text in the else block:

first add this to your *ngIf:

<ng-container *ngIf="dataSource; else elseBlock">

and display your text like so:

 <ng-template #elseBlock>Building report ...</ng-template>

In the HTML view/template of an Angular app how to wait for rendering of ngFor section?

1 Answers