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>
  <app-keyboard *ngIf="keyboardService.isOpen && keyboardService.position === 'right'"
                [positionOffset]="0"
                [inputElement]="keyboardService.inputElement"
                [position]="keyboardService.position"
                [preset]="keyboardService.preset"
                (deleteCharacter)="keyboardService.deleterCharacters()"
                (enterKey)="keyboardService.enterKey($event)">
  </app-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 appHideFirstChild
           [hideFirstChild]="hidePageLabels"
           [style.max-width]="alwaysVisiblePage.hasMaxWidth ? alwaysVisiblePage.maxWidth + 'px' : '100%'"
           [style.margin.px]="alwaysVisiblePage.margin">
        <div class="mat-tab-label">{{'alwaysVisiblePage' | translate}}</div>
        <app-page [parentArrayIndex]="alwaysVisibleUnitPageIndex"
                  [parentForm]="parentForm"
                  [isLastPage]="false"
                  [pagesContainer]="alwaysVisiblePageContainer"
                  [page]="alwaysVisiblePage">
        </app-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 appHideFirstChild
                 [hideFirstChild]="hidePageLabels"
                 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.margin.px]="page.margin"
             [style.max-width]="page.hasMaxWidth ? page.maxWidth + 'px' : '100%'">
          <app-page [parentArrayIndex]="scrollPagesIndices[i]"
                    [parentForm]="parentForm"
                    [isLastPage]="last"
                    [pagesContainer]="pagesContainer"
                    [page]="page">
          </app-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 appHideFirstChild
         [hideFirstChild]="hidePageLabels"
         [class.concat-scroll-snap-align]="scrollPageMode === 'concat-scroll-snap'"
         [style.max-width]="page.hasMaxWidth ? page.maxWidth + 'px' : '100%'"
         [style.margin.px]="page.margin"
         appScrollIndex
         [pagesContainer]="pagesContainer"
         [selectIndex]="selectIndex"
         [index]="i">
      <div class="mat-tab-label">
        {{'pageIndication' | translate: {index: i + 1} }}
      </div>
      <app-page [parentArrayIndex]="scrollPagesIndices[i]"
                [parentForm]="parentForm"
                [pagesContainer]="pagesContainer"
                [page]="page"
                [isLastPage]="last"
                (selectedIndexChange)="onSelectedIndexChange($event)">
      </app-page>
    </div>
  </ng-container>
</ng-template>