Angular 2 - ngFor while index < x

Question

I'm currently working on an angular app with an array of items (objects). I want to display each object in the array in its own list item, but want to limit the height of the list to 9 rows, before it starts on a new list next to it. So if the array has 13 elements, array[0] to array [8] should be listed in the first list, in the first column, while array [9] to array [12] should be listed in a new list. How can I make *ngFor stop looping at index = 9, and start looping from there on another list?

This is how my current code looks:

<div *ngIf="patients" class="col-sm-4" id="patientList">

  <!--Patient 0 to 8 should go in this space-->

  <table id="patientsTab">
    <tr *ngFor="let patient of patients; let i = index;" class="patientRow" >
      <td class="ptName"><button class="patientSelect" (click)="selectPatient(i)" >{{ patient.firstName }} {{ patient.lastName }}</button></td>
      <td class="ptPersonnr">{{ patient.personnr }}</td>
    </tr>
  </table>
</div>

<div *ngIf="patients.length > 9" class="col-sm-4">

  <!--Patient 9 to 13 should go in this space-->

</div>

<div *ngIf="patient" class="col-sm-4">

</div>

Answer 1

One way of doing this is using Array.prototype.slice method:

<div *ngIf="patients" class="col-sm-4" id="patientList">

  <!--Patient 0 to 8 should go in this space-->

  <table id="patientsTab">
    <tr *ngFor="let patient of patients.slice(0, 8); let i = index;" class="patientRow" >
      <td class="ptName"><button class="patientSelect" (click)="selectPatient(i)" >{{ patient.firstName }} {{ patient.lastName }}</button></td>
      <td class="ptPersonnr">{{ patient.firstName }}</td>
    </tr>
  </table>
</div>

<div *ngIf="patients.length > 9" class="col-sm-4">
  <div *ngFor="let patient of patients.slice(8, 13);">
    {{ patient.firstName }}
  </div>
</div>

Stackblitz Example

Answer 2

In addition to @yurzui's answer, you may use angular pipes

Stackblitz Example

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({name: 'stopat'})
export class StopAtPipe implements PipeTransform {
  transform(value: Array<any>, start:number, end:number) {    
    return value.slice(start,end);
  }
}

<div class="container">
  <div class="row">
    <div *ngIf="patients" class="col-sm-4" id="patientList">

      <!--Patient 0 to 8 should go in this space-->

      <table id="patientsTab">
        <tr *ngFor="let patient of patients | stopat:0:8; let i = index;" class="patientRow" >
          <td class="ptName"><button class="patientSelect" (click)="selectPatient(i)" >{{ patient.firstName }} {{ patient.lastName }}</button></td>
          <td class="ptPersonnr">{{ patient.firstName }}</td>
        </tr>
      </table>
    </div>

    <div *ngIf="patients.length > 9" class="col-sm-4">
      <div *ngFor="let patient of patients | stopat:8:13;">
        {{ patient.firstName }}
      </div>
    </div>

    <div *ngIf="patient" class="col-sm-4">

    </div>
  </div>

</div>