mp-common/common-tab-components/stops/stops.component.html

This is XPO MarketPlace common libary

<ul>
  <li *ngFor="let stop of stops; first as isFirst; last as isLast; let i = index">
    <div class="stops-data">

      <div id="first-stop" *ngIf="isFirst">
        <div class="load-stops">
          <span><xpo-icon id="first-stop-status-icon" class="origin-stop-marker">status-delivered</xpo-icon></span>
          <p><b>{{stop.city}}, {{ stop.state}} {{stop.zipcode}}</b></p>
          <p class="xpo-align-right"><b>Scheduled:</b> {{stop.scheduledTime | date: 'dd/MM/y H:mm'}}</p>
        </div>
        <div class="load-status-delay"></div>
      </div>

      <div id="intermediate-stop-{{i}}" *ngIf="!isFirst && !isLast">
        <div class="load-status-delay"></div>
        <div class="load-stops">
          <span><xpo-icon id="intermediate-stops-status-icon-{{i}}" class="secondary-stop-marker">status-delivered</xpo-icon></span>
          <p class="stops-city"><b>{{stop.city}}, {{ stop.state}} {{stop.zipcode}}</b></p>
          <p class="xpo-align-right"><b>Scheduled:</b> {{stop.scheduledTime | date: 'dd/MM/y H:mm'}}</p>
        </div>
        <div class="load-status-delay"></div>
      </div>

      <div id="last-stop" *ngIf="isLast">
        <div class="load-status-delay"></div>
        <div class="load-stops">
          <span><xpo-icon id="last-stop-status-icon" class="destination-stop-marker">status-delivered</xpo-icon></span>
          <p><b>{{stop.city}}, {{ stop.state}} {{stop.zipcode}}</b></p>
          <p class="xpo-align-right"><b>Scheduled:</b> {{stop.scheduledTime | date: 'dd/MM/y H:mm'}}</p>
        </div>
      </div>

    </div>
  </li>
</ul>