CODEWITHSUNDEEP
javascriptangulartwitter-bootstrapngfor
frontendkiller
frontendkiller

Reputation: 125

How to implement fixed div columns inside ngFor?

I want to implement a design where I have an array of data that are dynamic and I want to render them in only 3 bootstrap columns per row like this:

<div class="row">

  <div class="col-md-4">
   <a>data</a>
   <a>data</a>
   <a>data</a>
  </div

 <div class="col-md-4">
   <a>data</a>
   <a>data</a>
   <a>data</a>
  </div

 <div class="col-md-4">
   <a>data</a>
   <a>data</a>
   <a>data</a>
  </div

</div>

The output should look like this:

enter image description here

But when I put *ngFor on column div like this:

<div class="row">
  <div class="col-md-4" *ngFor="let d of data">
   <a>{{d.name}}</a>
  </div>
</div

it won't give the same result with the first static approach, any help to reproduce dynamic data looping to give the same result?

Upvotes: 2

Views: 343

Answers (1)

Dmitriy Snitko
Dmitriy Snitko

Reputation: 960

You can do it like this:

columns: string[][] = [];
ngOnInit() {
    const itemsInColumn = Math.floor(this.data.length()/3);
    columns[0] = data.slice(0, itemsInColumn);
    columns[1] = data.slice(itemsInColumn, itemsInColumn * 2);
    columns[2] = data.slice(itemsInColumn * 2);
}

In template:

<div class="row">
     <div class="col-md-4" *ngFor="let c of columns">
          <a *ngFor="let d of c">{{d}}</a>
     </div>
</div>

Upvotes: 2

Related Questions