Angular2 + Bootstrap Grid

Question

In Angular2, I have a list of objects and I'm trying to use bootstrap's grid layout system, but am having some difficulty figuring out how to best do this in Angular2. Any help would be appreciated!

If I was using HandlebarsJS, I could accomplish this with the following code:

{{#for elements}}
    {{#if index % 12 === 0}}
          <div class="row">
    {{/if}}
    <div class="col-md-2">
          {{element.name}}
    </div>
    {{#if index % 12 === 0}}
          </div>
    {{/if}}
{{/for}}

So I want it to look like:

<div class="row">
    <div class="col-md-2">
        Bob
    </div>
    <div class="col-md-2">
        Joe
    </div>
    ...
</div>
<div class="row">
    <div class="col-md-2">
        Julie
    </div>
    <div class="col-md-2">
        Cheryl
    </div>
    ...
</div>

Answer 1

This is the rehashing of an old debate, but for a new version of Angular. Some of the more popular/creative solutions for this question in Angular 1.x can be found here and can be updated for your purposes. Personally, I favor Duncan's solution , but I think that's a matter of opinion. An updated version of that code for Angular2 with a simple Codepen below:

  <div class="row">
    <div *ngFor="let hero of heroes; let i = index">
      <div class="clearfix" *ngIf="i % 3 == 0"></div>
      <div class="col-md-4">{{hero.name}}</div>
    </div>
  </div>

Working Codepen

Codepen Note: Blue background color is the row . Red is the col-md-* cell.

As you can see, this code only uses one row element that wraps all of the col-* elements and inserts a clearfix element every x elements. IMO, this solution is relatively clean and seems to employ more of a Google Material Design Lite (MDL) -style grid implementation for rows and cells than the Bootstrap standard row/col implementation.

Granted, none of these answers provide you with exactly what you asked for, but it's a bit of apples to oranges.

Answer 2

we had the same issue here creating a list with the ability to switch between list style and grid style. The best way to set up the grid style with bootstrap and angular 2 is to manipulate the input array to the needs of the grid row/col arrangement.

Create a two dimensional array of rows with the amount of cols you need. This example shows a full dynamic version.

We hope this will help you...

Component code:

export class Component implements OnChanges {

    @Input() items: any[] = [];
    @Input() gridCols: number = 4; // The number of cols in grid
    private gridItems: any[][];
    private gridValidValues = [1, 2, 3, 4, 6, 12]; // divisible without remainder col count

    private initGrid() {
        this.gridCols = this.gridCols | 0; // cast to int
        this.gridCols = this.gridCols || 1; // ensure min. one row

        if(!this.gridValidValues.find(value => this.gridCols === value)) {
            this.gridCols = 4; // correct invalid input to default col count
        }

        let addition = this.items.length % this.gridCols > 0 ? 1 : 0;
        let rows = ((this.items.length / this.gridCols) | 0) + addition;

        this.gridItems = [];

        let index = 0;
        for(var i = 0; i < rows; i++) {
            let row: any[] = [];

            for(var j = 0; j < this.gridCols && index < this.items.length; j++) {
                    row.push(this.items[index]);
                    index++;
            }

            this.gridItems.push(row);
        }
    }

    ngOnChanges(changes: SimpleChanges): void {
        let itemsChange: SimpleChange = changes["items"];

        if(itemsChange) {
            let previous: any[] = itemsChange.previousValue;
            let current: any[] = itemsChange.currentValue;

            if(previous.length != current.length) {
                this.initGrid();
            }
        }
    }
}

Template code:

<div class="row"
     template="ngFor let row of gridItems">
    <div bind-class="'col-md-' + (12 / gridCols)"
         template="ngFor let item of row">
        {{item.anyvalue}}
    </div>
</div>