Dynamic multi-columns dropdown - Angular2 and Bootstrap - css

Question

How to create a dynamic multi column dropdown list. I am using angular2 and looking for something like this http://alijafarian.com/bootstrap-multi-column-dropdown-menu/
But here we have the columns fixed at 3 and the list items hardcoded.In my case I have a dynamic list and would like to display 5 items in one column.So for Eg: if the list contains 20 items then we would have 4 columns with 5 items each in one column.And my code looks like below
....
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown"
href="#" role="button"
aria-haspopup="true" aria-expanded="false">
Artists
<span class="caret"></span></a>
<ul class="dropdown-menu ">
<li *ngFor="let artist of artists">
<a><input type="checkbox"> {{artist.name}} </a>
</li>
</ul>
</li>
.....
I am using ngFor directive to loop through the list of artists and display it in single column now. But would like to display it in multi column depending on the size of the list.

Answer 1

You should be created a new array from the data by using a simple chunk function:
public chunk(arr, size) {
var newArr = [];
for (var i=0; i<arr.length; i+=size) {
newArr.push(arr.slice(i, i+size));
}
return newArr;
}
and do some changes in your view like this:
<ul class="dropdown-menu multi-column columns-2">
<div class="row">
<div class="col-sm-6" *ngFor="let persons of chunk(persons, 3)">
<ul class="multi-column-dropdown">
<li *ngFor="let person of persons">{{person.name}}</li>
</ul>
</div>
</div>
</ul>
Here is an example: plunker