section.component.html

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

<ng-template #staticElements>
  <ng-container *ngFor="let element of section.elements; let i = index">
    <aspect-element-splitter
        class="static-element fixed-size-content"
        [style.width.px]="element.width"
        [style.height.px]="element.height"
        [style.left.px]="element.positionProps.xPosition"
        [style.top.px]="element.positionProps.yPosition"
        [style.z-index]="element.positionProps?.zIndex"
        [elementModel]="element">
    </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; let i = index">
      <aspect-element-splitter
          [style.min-width.px]="element.width"
          [style.min-height.px]="element.positionProps.useMinHeight ? element.height : 0"
          [style.margin-left.px]="element.positionProps.marginLeft"
          [style.margin-right.px]="element.positionProps.marginRight"
          [style.margin-top.px]="element.positionProps.marginTop"
          [style.margin-bottom.px]="element.positionProps.marginBottom"
          [style.grid-column-start]="element.positionProps.gridColumnStart"
          [style.grid-column-end]="element.positionProps.gridColumnEnd"
          [style.grid-row-start]="element.positionProps.gridRowStart"
          [style.grid-row-end]="element.positionProps.gridRowEnd"
          [style.z-index]="element.positionProps?.zIndex"
          [elementModel]="element">
      </aspect-element-splitter>
    </ng-container>
  </div>
</ng-template>