section.component.html

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

<ng-template #staticElements>
  <div *ngFor="let element of section.elements; let i = index"
       [style.position]="'absolute'"
       [style.overflow]="'auto'"
       [style.width.px]="element.width"
       [style.height.px]="element.height"
       [style.left.px]="element.xPosition"
       [style.top.px]="element.yPosition">
    <app-element-overlay
        [elementModel]="element"
        [parentForm]="sectionForm"
        [parentArrayIndex]="i">
    </app-element-overlay>
  </div>
</ng-template>

<ng-template #dynamicElements>
  <div [style.display]="'grid'"
       [style.grid-template-columns]="section.gridColumnSizes"
       [style.grid-template-rows]="section.gridRowSizes"
       [style.min-height.px]="section.height">
    <div *ngFor="let element of section.elements; let i = index"
         [style.min-width.px]="element.width"
         [style.min-height.px]="element.height"
         [style.margin-left.px]="element.marginLeft"
         [style.margin-right.px]="element.marginRight"
         [style.margin-top.px]="element.marginTop"
         [style.margin-bottom.px]="element.marginBottom"
         [style.grid-column-start]="element.gridColumnStart"
         [style.grid-column-end]="element.gridColumnEnd"
         [style.grid-row-end]="element.gridRowEnd">
      <app-element-overlay
          [elementModel]="element"
          [parentForm]="sectionForm"
          [parentArrayIndex]="i">
      </app-element-overlay>
    </div>
  </div>
</ng-template>