layout.component.html

<div class="layout-container">
  <div class="layout-flex-container">
    <div class="pages-container"
         [fxLayout]="layoutAlignment">
      <ng-container *ngTemplateOutlet="alwaysVisiblePagePosition === 'top' || alwaysVisiblePagePosition === 'left' ?
        alwaysVisiblePageView :
        scrollPagesView"></ng-container>
      <ng-container *ngTemplateOutlet="alwaysVisiblePagePosition === 'bottom' || alwaysVisiblePagePosition === 'right' ?
        alwaysVisiblePageView :
        scrollPagesView"></ng-container>
    </div>
  </div>
  <aspect-keyboard
      *ngIf="keyboardService.isOpen && keyboardService.position === 'right'"
      @keyboardSlideInOut
      [positionOffset]="0"
      [inputElement]="keyboardService.inputElement"
      [position]="keyboardService.position"
      [preset]="keyboardService.preset"
      (deleteCharacter)="keyboardService.deleterCharacters()"
      (enterKey)="keyboardService.enterKey($event)">
  </aspect-keyboard>
</div>

<ng-template #alwaysVisiblePageView>
  <div *ngIf="alwaysVisiblePage"
      class="page-container"
      [style.max-height.%]="aspectRatioColumn.alwaysVisiblePage"
      [style.max-width.%]="aspectRatioRow.alwaysVisiblePage">
    <div #alwaysVisiblePageContainer
        [class.center-pages]="layoutAlignment === 'column' || !hasScrollPages"
        [class.left-container]="alwaysVisiblePagePosition === 'left'"
        [style.max-width]="containerMaxWidth.alwaysVisiblePage">
      <div [style.min-height]="'calc(100vh - ' + (alwaysVisiblePage.margin * 2) + 'px)'"
          [style.background-color]="alwaysVisiblePage.backgroundColor"
          [style.max-width]="alwaysVisiblePage.hasMaxWidth ? alwaysVisiblePage.maxWidth + 'px' : '100%'"
          [style.padding.px]="alwaysVisiblePage.margin">
        <div *ngIf="!hidePageLabels"
            class="mat-tab-label">
          {{'alwaysVisiblePage' | translate}}
        </div>
        <aspect-page
            [pageIndex]="alwaysVisibleUnitPageIndex"
            [isLastPage]="false"
            [pagesContainer]="alwaysVisiblePageContainer"
            [page]="alwaysVisiblePage">
        </aspect-page>
      </div>
    </div>
  </div>
</ng-template>

<ng-template #scrollPagesView>
  <ng-container *ngIf="hasScrollPages">
    <div class="page-container"
        [class.concat-scroll-snap]="scrollPageMode === 'concat-scroll-snap'"
        [style.max-height.%]="aspectRatioColumn.scrollPages"
        [style.max-width.%]="aspectRatioRow.scrollPages">
      <div #pagesScrolledContainer
          [class.center-pages]="layoutAlignment === 'column' || !alwaysVisiblePage"
          [class.left-container]="alwaysVisiblePage && alwaysVisiblePagePosition === 'right'"
          [style.max-width]="containerMaxWidth.scrollPages">
        <ng-container
            [ngTemplateOutlet]="scrollPageMode === 'separate' ? scrollPagesSeparatedView : scrollPagesScrolledView"
            [ngTemplateOutletContext]="{pagesContainer: pagesScrolledContainer}">
        </ng-container>
      </div>
    </div>
  </ng-container>
</ng-template>

<ng-template #scrollPagesSeparatedView let-pagesContainer>
  <mat-tab-group
      aspectHideFirstChild
      [hideFirstChild]="hidePageLabels"
      (childHeight)="tabHeaderHeight = $event"
      mat-align-tabs="start"
      [(selectedIndex)]="selectedIndex"
      (selectedIndexChange)="onSelectedIndexChange($event)">
    <ng-container *ngFor="let page of scrollPages; let i = index; let last = last">
      <mat-tab
          [label]="'pageIndication' | translate: {index: i + 1}">
        <div [style.min-height]="'calc(100vh - ' + ((page.margin * 2) + tabHeaderHeight) + 'px)'"
            [style.background-color]="page.backgroundColor"
            [style.padding.px]="page.margin"
            [style.max-width]="page.hasMaxWidth ? page.maxWidth + 'px' : '100%'">
          <aspect-page
              [pageIndex]="scrollPagesIndices[i]"
              [isLastPage]="last"
              [pagesContainer]="pagesContainer"
              [page]="page">
          </aspect-page>
        </div>
      </mat-tab>
    </ng-container>
  </mat-tab-group>
</ng-template>

<ng-template #scrollPagesScrolledView let-pagesContainer>
  <ng-container *ngFor="let page of scrollPages; let i = index; let last = last">
    <div [style.min-height]="'calc(100vh - ' + (page.margin * 2) + 'px)'"
        [style.background-color]="page.backgroundColor"
        [class.concat-scroll-snap-align]="scrollPageMode === 'concat-scroll-snap'"
        [style.max-width]="page.hasMaxWidth ? page.maxWidth + 'px' : '100%'"
        [style.padding.px]="page.margin"
        aspectScrollIndex
        [pagesContainer]="pagesContainer"
        [selectIndex]="selectIndex"
        [index]="i">
      <div *ngIf="!hidePageLabels"
          class="mat-tab-label">
        {{'pageIndication' | translate: {index: i + 1} }}
      </div>
      <aspect-page
          [pageIndex]="scrollPagesIndices[i]"
          [pagesContainer]="pagesContainer"
          [page]="page"
          [isLastPage]="last"
          (selectedIndexChange)="onSelectedIndexChange($event)">
      </aspect-page>
    </div>
  </ng-container>
</ng-template>