dialog-load-session.component.html

<h1 mat-dialog-title [innerHTML]="uitextLoadSessionTitle"></h1>

<form [formGroup]="loadSessionForm">

  <div mat-dialog-content>

    <mat-form-field class="file-input-field">
      <ngx-mat-file-input id="session-file-input" #sessionFile formControlName="file"[placeholder]="uitextLoadSessionFilename"
        (change)="onFileSelected($event)"></ngx-mat-file-input>
      <button mat-icon-button matSuffix *ngIf="!sessionFile.empty" (click)="sessionFile.clear($event)">
        <mat-icon>clear</mat-icon>
      </button>
    </mat-form-field>

    <div class="cb-container">
      <mat-checkbox [name]="c.uid" *ngFor="let c of calculators" [(ngModel)]="c.selected" [ngModelOptions]="{standalone: true}">
        {{ c.title }}
      </mat-checkbox>
    </div>

    <div class="btn-container">
      <button mat-raised-button (click)="selectAll()" [disabled]="calculators.length === 0">
        {{ uitextAll }}
      </button>
      <button mat-raised-button (click)="selectNone()" [disabled]="calculators.length === 0">
        {{ uitextNone }}
      </button>
    </div>
  </div>

  <div mat-dialog-actions>
    <button mat-raised-button color="primary" [mat-dialog-close]="false" cdkFocusInitial>
      {{ uitextCancel }}
    </button>
    <button mat-raised-button type="submit" color="warn" (click)="loadSession()"
      [disabled]="(loadSessionForm.invalid || ! atLeastOneCheckboxSelected)">

      {{ uitextLoad }}
    </button>
  </div>

</form>