title: Angular 2 - ngFor while index < x
body: <p>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?</p>
  
  <p>This is how my current code looks:</p>
  
  <pre><code>&lt;div *ngIf="patients" class="col-sm-4" id="patientList"&gt;
  
    &lt;!--Patient 0 to 8 should go in this space--&gt;
  
    &lt;table id="patientsTab"&gt;
      &lt;tr *ngFor="let patient of patients; let i = index;" class="patientRow" &gt;
        &lt;td class="ptName"&gt;&lt;button class="patientSelect" (click)="selectPatient(i)" &gt;{{ patient.firstName }} {{ patient.lastName }}&lt;/button&gt;&lt;/td&gt;
        &lt;td class="ptPersonnr"&gt;{{ patient.personnr }}&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
  &lt;/div&gt;
  
  &lt;div *ngIf="patients.length &gt; 9" class="col-sm-4"&gt;
  
    &lt;!--Patient 9 to 13 should go in this space--&gt;
  
  &lt;/div&gt;
  
  &lt;div *ngIf="patient" class="col-sm-4"&gt;
  
  &lt;/div&gt;
  </code></pre>