unit-view.component.html

<div fxLayout="row" [style.height.%]="100">
  <button class="drawer-button show-elements-button" (click)="toolbox_drawer.toggle()">
    <span>
      ELEMENTE
    </span>
  </button>

  <mat-drawer-container fxFlex>
    <mat-drawer #toolbox_drawer class="toolbox_drawer" mode="side" opened>
      <app-ui-element-toolbox></app-ui-element-toolbox>
    </mat-drawer>

    <mat-drawer-content>
      <mat-tab-group mat-align-tabs="start" class="mat-tab-fill-height"
                     [selectedIndex]="unitService.selectedPageIndex | async"
                     (selectedIndexChange)="unitService.updatePageSelection($event)">
        <mat-tab *ngFor="let page of (unitService.unit | async)!.pages; let i = index" label="Seite {{i+1}}">
          <ng-template mat-tab-label>
            <mat-icon *ngIf="page.alwaysVisible" class="page-alwaysVisible-icon">assignment</mat-icon>
            {{page.label}}
            <button class="delete-page-button" mat-button (click)="deletePage()">
              <mat-icon>delete</mat-icon>
            </button>
          </ng-template>
          <app-page-view [pageIndex]="i"></app-page-view>
        </mat-tab>
        <mat-tab disabled>
          <ng-template mat-tab-label>
            <button mat-icon-button (click)="addPage()">
              <mat-icon>add</mat-icon>
            </button>
          </ng-template>
        </mat-tab>
      </mat-tab-group>
    </mat-drawer-content>

    <mat-drawer #properties_drawer class="properties_drawer" position="end" mode="side" opened>
      <app-properties></app-properties>
    </mat-drawer>
  </mat-drawer-container>

  <button class="drawer-button show-properties-button" (click)="properties_drawer.toggle()">
    <span>
      EIGENSCHAFTEN
    </span>
  </button>
</div>