title: Ionic 3 loop list and divide into 2 columns
body: <p>I'm trying to divide the list into 2 column to display a list when loop. I'm not sure how it should be done. I have already loop my list with a index but it is currently looping in a way from top to bottom in 1 director. How do I loop it like this as below:</p>
  
  <pre><code>1 7
  2 8
  3 9
  4 10
  5 11
  6 12
  </code></pre>
  
  <p>My code below:</p>
  
  <pre><code>&lt;--html--&gt;
              &lt;ion-content padding&gt;
              &lt;ion-row class="heat-row"&gt;
                &lt;ion-col *ngFor="let heatUp of heatUps; let i = index"&gt;
                  &lt;ion-item&gt;
                    {{ heatUp.id }} 
                    &lt;button ion-button large&gt;
                      {{ heatUp.item }}&lt;ion-icon [name]="fireIcon"&gt;&lt;/ion-icon&gt;
                    &lt;/button&gt;
                  &lt;/ion-item&gt;
                &lt;/ion-col&gt;
              &lt;/ion-row&gt;
          &lt;/ion-content&gt;
  </code></pre>
  
  <p>Typescript</p>
  
  <pre><code>   &lt;-- ts --&gt; 
          export class QueuePage {
          heatUps: any[];
          fireIcon: string = "flame";
  
            constructor() {
            }
  
            // displayHeatUps(heatUp) {
            //   console.log(heatUp.text);
            // }
  
  
            ionViewDidLoad() {
              console.log('ionViewDidLoad QueuePage');
              this.heatUps = []
              for(let i = 1; i &lt; 7; i++) {
                this.heatUps.push({
                  item: 'Stop',
                  id: i
                });
              }
            }
          }
  </code></pre>
  
  <p>please advise thanks.</p>