layout.component.html

<div class="layout-container" [style.max-width.px]="layoutWidth">
  <div class="layout-flex-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>

<ng-template #alwaysVisiblePageView>
  <div *ngIf="alwaysVisiblePage"
       #alwaysVisiblePageContainer
       class="page-container"
       [style.max-width.px]="layoutAlignment === 'row' ? alwaysVisiblePageWidth : layoutWidth">
    <div appHideFirstChild
         [hideFirstChild]="hidePageLabels"
         [style.max-width.px]="alwaysVisiblePage.maxWidth"
         [style.margin.px]="alwaysVisiblePage.margin">
      <div class="mat-tab-label">{{'alwaysVisiblePage' | translate}} {{selectedIndex}}</div>
      <app-page [parentArrayIndex]="alwaysVisibleUnitPageIndex"
                [index]="playerPageIndices[alwaysVisibleUnitPageIndex]"
                [parentForm]="parentForm"
                [isLastPage]="false"
                [pagesContainer]="alwaysVisiblePageContainer"
                [page]="alwaysVisiblePage">
      </app-page>
    </div>
  </div>
</ng-template>

<ng-template #scrollPagesView>
  <ng-container *ngIf="hasScrollPages">
    <ng-container *ngTemplateOutlet="scrollPageMode === 'separate' ?
      scrollPagesSeparatedView :
      scrollPagesScrolledView"></ng-container>
  </ng-container>
</ng-template>

<ng-template #scrollPagesSeparatedView>
  <div #pagesSeparatedContainer
       class="page-container"
       [style.max-width.px]="layoutAlignment === 'row' ? scrollPageWidth : layoutWidth">
    <mat-tab-group appHideFirstChild
                   [hideFirstChild]="hidePageLabels"
                   mat-align-tabs="start"
                   [(selectedIndex)]="selectedIndex"
                   (selectedIndexChange)="onSelectedIndexChange($event)">
      <ng-container *ngFor="let page of pages; let i = index">
        <mat-tab *ngIf="!page.alwaysVisible"
                 label="{{'pageIndication' | translate: {index: playerPageIndices[i] + 1} }}">
          <div [style.margin.px]="page.margin" [style.max-width.px]="page.maxWidth">
            <app-page [parentArrayIndex]="i"
                      [index]="playerPageIndices[i]"
                      [parentForm]="parentForm"
                      [isLastPage]="i === lastScrollPageIndex"
                      [pagesContainer]="pagesSeparatedContainer"
                      [page]="page">
            </app-page>
          </div>
        </mat-tab>
      </ng-container>
    </mat-tab-group>
  </div>
</ng-template>

<ng-template #scrollPagesScrolledView>
  <div  #pagesScrolledContainer
        class="page-container"
        [class.concat-scroll-snap]="playerConfig.pagingMode === 'concat-scroll-snap'"
        [style.max-width.px]="layoutAlignment === 'row' ? scrollPageWidth : layoutWidth">
    <div fxLayout="column">
      <ng-container *ngFor="let page of pages; let i = index">
        <div *ngIf="!page.alwaysVisible"
             [class.concat-scroll-snap-align]="playerConfig.pagingMode === 'concat-scroll-snap'"
             appHideFirstChild
             [hideFirstChild]="hidePageLabels"
             appScrollIndex
             [pagesContainer]="pagesScrolledContainer"
             [selectIndex]="selectIndex"
             [index]="playerPageIndices[i]"
             [style.max-width.px]="page.maxWidth"
             [style.margin.px]="page.margin">
          <div class="mat-tab-label">
            {{'pageIndication' | translate: {index: playerPageIndices[i] + 1} }}
          </div>
          <app-page [parentArrayIndex]="i"
                    [index]="playerPageIndices[i]"
                    [parentForm]="parentForm"
                    [pagesContainer]="pagesScrolledContainer"
                    [page]="page"
                    [isLastPage]="i === lastScrollPageIndex"
                    (selectedIndexChange)="onSelectedIndexChange($event)">
          </app-page>
        </div>
      </ng-container>
    </div>
  </div>
</ng-template>