statistic.component.html

<div fxLayout="column" fxLayoutAlign="center" fxLayoutGap="20px" fxFill>
  <div fxLayout="row" fxLayoutAlign="center">
    <mat-card>
      <mat-card-header>
        <mat-card-title>
          <h4>{{subject}}</h4>
        </mat-card-title>
        <span class="fill-remaining-space"></span>
        <button mat-icon-button (click)="switchAnswers()" color="primary">
          <mat-icon>info</mat-icon>
        </button>
      </mat-card-header>
      <mat-divider></mat-divider>
      <mat-toolbar></mat-toolbar>
      <div>
        <div style="position: relative; height: 60vh">
          <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>
          <canvas id="chart"></canvas>
        </div>
      </div>
      <mat-list role="list">
        <mat-list-item role="listitem" *ngFor="let a of answerList">{{a.label}} : {{a.answer}}</mat-list-item>
      </mat-list>
    </mat-card>
  </div>
</div>