section.component.html

<ng-container *ngTemplateOutlet="section.dynamicPositioning ? dynamicElements : staticElements"></ng-container>

<ng-template #staticElements>
  <ng-container *ngFor="let element of section.elements">
    <aspect-element-splitter
        class="static-element fixed-size-content"
        [style.width.px]="element.width"
        [style.height.px]="element.height"
        [style.left.px]="element.position.xPosition"
        [style.top.px]="element.position.yPosition"
        [style.z-index]="element.position?.zIndex"
        [elementModel]="element"
        [pageIndex]="pageIndex">
    </aspect-element-splitter>
  </ng-container>
</ng-template>

<ng-template #dynamicElements>
  <div
      class="dynamic-section"
      [style.grid-template-columns]="!section.autoColumnSize ? section.gridColumnSizes : undefined"
      [style.grid-template-rows]="!section.autoRowSize ? section.gridRowSizes : undefined"
      [style.grid-auto-columns]="section.autoColumnSize ? 'auto' : undefined"
      [style.grid-auto-rows]="section.autoRowSize ? 'auto' : undefined"
      [style.backgroundColor]="section.backgroundColor">
    <ng-container *ngFor="let element of section.elements">
      <aspect-element-splitter
          [style.min-width.px]="element.width"
          [style.min-height.px]="element.position.useMinHeight ? element.height : null"
          [style.margin-left.px]="element.position.marginLeft"
          [style.margin-right.px]="element.position.marginRight"
          [style.margin-top.px]="element.position.marginTop"
          [style.margin-bottom.px]="element.position.marginBottom"
          [style.grid-column-start]="element.position.gridColumn"
          [style.grid-column-end]="element.position.gridColumn ?
            element.position.gridColumn + element.position.gridColumnRange:
            null"
          [style.grid-row-start]="element.position.gridRow"
          [style.grid-row-end]="element.position.gridRow ?
            element.position.gridRow + element.position.gridRowRange:
            null"
          [style.z-index]="element.position?.zIndex"
          [elementModel]="element"
          [pageIndex]="pageIndex">
      </aspect-element-splitter>
    </ng-container>
  </div>
</ng-template>