dialog-save-session.component.html

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

<form>

  <div mat-dialog-content>
    <div class="cb-container">
      <mat-checkbox [name]="c.uid" *ngFor="let c of calculators" [(ngModel)]="c.selected"
        (change)="checkLinkedParamsAndModelsDependencies()">
        {{ c.title }}
      </mat-checkbox>
    </div>

    <div class="btn-container">
      <button mat-raised-button (click)="selectAll()">{{ uitextAll }}</button>
      <button mat-raised-button (click)="selectNone()">{{ uitextNone }}</button>
    </div>

    <div class="dependencies-problems" *ngIf="dependenciesProblems.length > 0">
      <mat-list role="list">
        <mat-list-item role="listitem" *ngFor="let dp of dependenciesProblems">
          <mat-icon color="warn">error_outline</mat-icon> {{ dp.message }}
        </mat-list-item>
      </mat-list>
      <p>
        <button mat-raised-button (click)="fixDependencies()"
            [matBadge]="dependenciesProblems.length" matBadgeColor="warn">
          {{ uitextFixMissingDependencies }}
        </button>
      </p>
    </div>

    <mat-form-field>
      <input matInput required [placeholder]="uitextFilenameInput" [(ngModel)]="fileName"
        name="filename" #filename="ngModel" (keydown.enter)="onEnterPressed($event)">
    </mat-form-field>
  </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)="saveSession()"
      [disabled]="(! filename.valid) || (! atLeastOneCheckboxSelected)">

      {{ uitextSave }}
    </button>
  </div>

</form>