index.component.html

<div
  class="component-group dark-scrollbar justify-center md:justify-start"
  *ngIf="components.length > 0"
  [class.directionCol]="direction === 'column'"
>
  <ng-container *ngFor="let item of components; trackBy: trackByItem">
    <ng-container [ngSwitch]="item.type">
      <app-calendar *ngSwitchCase="ComponentType.Calendar" [data]="item" />
      <app-runtime *ngSwitchCase="ComponentType.Runtime" [data]="item" />
      <app-offwork *ngSwitchCase="ComponentType.OffWork" [data]="item" />
      <app-image *ngSwitchCase="ComponentType.Image" [data]="item" />
      <app-countdown *ngSwitchCase="ComponentType.Countdown" [data]="item" />
      <app-html
        *ngSwitchCase="ComponentType.HTML"
        [data]="item"
        [class.hidden]="!item['html']"
      />
      <app-holiday *ngSwitchCase="ComponentType.Holiday" [data]="item" />
    </ng-container>
  </ng-container>

  <ng-content />
</div>