<ng-container *ngFor="let optionAllowed of levelAllowed | async; let i = index">
  <mat-chip-listbox (change)="setLevelActive(i, $event.value)" *ngIf="!(dropdown && i === levelExisting.length-1)">
    <div class="flex-row full-width stretch">
      <ng-container *ngFor="let option of optionAllowed | keyvalue">
        <mat-chip-option *ngIf="optionAllowed.size < 10 || option.value"
                         [disabled]="!option.value"
                         [selected]="currentActives[i]===option.key">{{option.key}}</mat-chip-option>
      </ng-container>
    </div>
  </mat-chip-listbox>
  <div *ngIf="dropdown && i === levelExisting.length-1" class="flex-row full-width stretch">
    <mat-form-field appearance="fill">
      <mat-label>Pick one</mat-label>

      <mat-select (valueChange)="setLevelActive(i, $event)" [value]="currentActives[i]">
        <ng-container *ngFor="let option of optionAllowed | keyvalue">
          <mat-option *ngIf="option.value" [value]="option.key">{{option.key}}</mat-option>
        </ng-container>
      </mat-select>
    </mat-form-field>
  </div>
</ng-container>
