Angular 2 & Bootstrap - split a list into 2 columns based on the number of elements in array

Question

I just started to learn Angular 2 and was thinking about a good way to do this. Let's say I have an array containing 10 objects. So I'd like to place 5 objects in each Bootstrap column. I hope someone can help me out.

Answer 1

An easy way to go about this would to just be to use the column-count css property.

css:

.columnList {
  column-count: 2;
}

html:

<ul class="columnList">
  <li *ngFor="let item of items">{{item}}</li>
</ul>

Answer 2

This is not a real Angular or Typescript problem. Here are two possibilities:

Cut the array in half:

let half = Math.ceil(array.length / 2);    

let leftSide = array.splice(0, half);

let rightSide = array.splice(half, array.length - half);

Or render element alternating, loop over array for each column:

<template *ngFor="let item of array; let i = index">

<li *ngIf="i % 2 == 0"></li>

</template>