statistics-page.component.html

<div fxLayout="row" fxLayoutGap="20px" fxLayoutAlign="center">
  <mat-card>
    <mat-card-header>
      <h2>{{'statistic.learning-status' | translate}}</h2>
      <span class="fill-remaining-space"></span>
      <button mat-icon-button (click)="showHelp()"><mat-icon color="primary">help</mat-icon></button>
    </mat-card-header>
    <mat-divider></mat-divider>
    <div *ngIf="isLoading"                                                                                                                                                                                                                                                                                                                                                          fxLayout="column" fxLayoutAlign="center" fxLayoutGap="20px" fxFill>
      <div fxLayout="row" fxLayoutAlign="center">
        <mat-progress-spinner mode="indeterminate"></mat-progress-spinner>
      </div>
    </div>
    <mat-tab-group>
      <mat-tab *ngFor="let cg of contentGroups; let i = index" label="{{cg.name}}">
        <div fxLayout="column" fxLayoutAlign="center">
        <app-list-statistic [contentGroup]="cg"></app-list-statistic>
        </div>
      </mat-tab>
    </mat-tab-group>
  </mat-card>
</div>