How do you loop through different rows (bootstrap rows) in Angular?

Question

I am asking myself: How would you loop through different rows using *ngFor? Lets say an array is given

let arr = [1,2,3,4] // arr can have a arbitrary number of elements

Now I want to loop trough that array and display the values. I want two elements to be in a row (using bootstrap 4.0). My approach:

<div class="row">
    <div class="col-6" *ngFor="let el of arr"> {{el}} </div>
</div>

Now I would have this html-code

<div class="row">
    <div class="col-6"> 1 </div>
    <div class="col-6"> 2 </div>
    <div class="col-6"> 3 </div>
    <div class="col-6"> 4 </div>
</div>

but I want it this way:

<div class="row">
    <div class="col-6"> 1 </div>
    <div class="col-6"> 2 </div>
</div>
<div class="row">
    <div class="col-6"> 3 </div>
    <div class="col-6"> 4 </div>
</div>

because this would be correct regarding the elements in a row. How can I achieve this?

Himanshu Sharma · Accepted Answer · 2020-06-12 12:13:21Z

4

You can achieve it without second loop provided col-6 is fixed.

<div>
  <ng-container  *ngFor="let el of arr; index as i">
    <div class="row" *ngIf="i%2 === 0">
            <div class="col-6" > {{arr[i]}} </div>
            <div class="col-6" > {{arr[i+1]}} </div>
    </div>
  </ng-container>
</div>

This will do as you are expecting.

answered Jun 12, 2020 at 12:13

Himanshu Sharma

5903 silver badges12 bronze badges

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

Comments

Community · Accepted Answer · 2020-06-20 09:12:55Z

2

Option 1

The quickest option would be to use the slice pipe. But it might not be suitable for large data sets.

<div class="row">
  <div class="col-6" *ngFor="let el of arr | slice:0:2"> {{el}} </div>
</div>
<div class="row">
  <div class="col-6" *ngFor="let el of arr | slice:2:4"> {{el}} </div>
</div>

Option 2

Split the array into chunks of arrays and loop through them.

Controller

export class AppComponent  {
  arr = [1,2,3,4];
  finalArr = [];    // <-- [[1,2], [3,4]]

  constructor(private http: HttpClient){
    for (let i = 0, j = this.arr.length; i < j; i += 2) {
      this.finalArr.push(this.arr.slice(i, i + 2));
    }
  }
}

Template

<div class="row" *ngFor="let arr of finalArr">
  <div class="col-6" *ngFor="let el of arr"> {{el}} </div>
</div>

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jun 12, 2020 at 12:05

Barremian

31.2k4 gold badges37 silver badges67 bronze badges

Comments

Subhadeep · Accepted Answer · 2020-06-12 11:43:32Z

1

From the pattern it looks like a outer and a inner loop will solve the problem. outer loop will control the "row" - div inner loop will control the "col-6" - div Kindly give it a try.

answered Jun 12, 2020 at 11:43

Subhadeep

1495 bronze badges

1 Comment

Logik Over a year ago

So do I have to calculate how many row I would need if I had x elements? For example 12 elements means 6 rows. Does it have to be so complicated?

Collectives™ on Stack Overflow

How do you loop through different rows (bootstrap rows) in Angular?

3 Answers 3

Comments

Option 1

Option 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Option 1

Option 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related