Dynamic multi-columns dropdown - Angular2 and Bootstrap

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.

Ha Hoang · Accepted Answer · 2017-04-25 06:36:17Z

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"><a href="#">{{person.name}}</a></li>
            </ul>
        </div>
    </div>
</ul>

Here is an example: plunker

answered Apr 25, 2017 at 6:36

Ha Hoang

1,68413 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Dynamic multi-columns dropdown - Angular2 and Bootstrap

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related