SFM-Broker/src/app/loan-steps/loan-steps.component.html

{{LoanId}}
<kendo-listview
  [data]="steps"
  containerClass="k-d-flex k-flex-col k-flex-nowrap"
>
  <ng-template
    kendoListViewItemTemplate
    let-dataItem="dataItem"
    let-index="index"
    let-isFirst="isFirst"
    let-isLast="isLast"
  >
    <div class="product" [class.border-bottom]="!isLast">
      <strong>[{{ index }}]:</strong>
      <span class="product-name">{{ dataItem.label }}</span>
      <span class="item-position"
      >({{ isFirst ? "first" : isLast ? "last" : "mid" }})</span
      >
    </div>
  </ng-template>
</kendo-listview>

<kendo-tilelayout [columns]="1" [gap]="gap" [reorderable]="true">
  <kendo-tilelayout-item [col]="1" title="Tile 1">
    <kendo-tilelayout-item-body>
      {{ firstTileContent }}
    </kendo-tilelayout-item-body>
  </kendo-tilelayout-item>

  <kendo-tilelayout-item [col]="1" title="Tile 2">
    <kendo-tilelayout-item-body>
      {{ secondTileContent }}
    </kendo-tilelayout-item-body>
  </kendo-tilelayout-item>

  <kendo-tilelayout-item title="Tile 3" [col]="1">
    <kendo-tilelayout-item-body>
      {{ thirdTileContent }}
    </kendo-tilelayout-item-body>
  </kendo-tilelayout-item>

  <kendo-tilelayout-item title="Tile 4" [col]="1">
    <kendo-tilelayout-item-body>
      {{ fourthTileContent }}
    </kendo-tilelayout-item-body>
  </kendo-tilelayout-item>
</kendo-tilelayout>