I'm wondering why / how the material spinner is rendering inside the table in this example:

    <div class="course">

        <div class="spinner-container" *ngIf="dataSource.loading$ | async">
            <mat-spinner></mat-spinner>
        </div>

        <mat-table class="lessons-table mat-elevation-z8" [dataSource]="dataSource">
            ....
        </mat-table>
    </div>

The table does not reference the spinner, so how does it render it inside the content area?

I'm wondering why / how the material spinner is rendering inside the table in this example:

    <div class="course">

        <div class="spinner-container" *ngIf="dataSource.loading$ | async">
            <mat-spinner></mat-spinner>
        </div>

        <mat-table class="lessons-table mat-elevation-z8" [dataSource]="dataSource">
            ....
        </mat-table>
    </div>

The table does not reference the spinner, so how does it render it inside the content area?

• javascript
• angular
• typescript
• angular-material

Share Improve this question Follow asked Jul 27, 2019 at 6:37 OleOle 47.5k7070 gold badges238238 silver badges445445 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

It is not rendering the mat-spinner inside mat-table, just using the same css as table body. It seems that the spinner is inside the table but actually it's not, even when dataSource is loading, table's header is present. By assigning same css as table body to spinner container, it seems the spinner is in table body:

<div class="spinner-container" *ngIf="dataSource.loading$ | async">
     <mat-spinner></mat-spinner>
</div>

css:

.spinner-container {
  display: flex; 
  justify-content: center; 
  align-items: center; 
  background-color: #fafafa; 
  box-shadow:0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12)
}

DEMO.