How to nest html when looping through array using Angular + ngFor / ng-template?

Question

I'm trying to output html in the following format for an array

weekDaysHeaderArr whose length is 42 = 6 x 7.

In other words I want to nest every 7 column div elements in a row div (6 total) like so.

<div class="row">
    <div class="col-md-auto"> <-- **repeated 7 times**
    </div>
</div>
<div class="row">
    <div class="col-md-auto"> <-- **repeated 7 times**
    </div>
</div>
<div class="row">
    <div class="col-md-auto"> <-- **repeated 7 times**
    </div>
</div>
<div class="row">
    <div class="col-md-auto"> <-- **repeated 7 times**
    </div>
</div>
<div class="row">
    <div class="col-md-auto"> <-- **repeated 7 times**
    </div>
</div>
<div class="row">
    <div class="col-md-auto"> <-- **repeated 7 times**
    </div>
</div>

I can use ngFor to obviously produce the same html element (div class="col-md-auto">) 42 times but how do I nest every 7 elements inside a <div class="row"> ?

I've not used ng-template and ng-container before and I can't get my head around the documentation, can these be used to do this? As far as I can tell these are designed for switching between html elements rather than nesting.

Federico Galfione · Accepted Answer · 2019-04-23 11:00:59Z

1

Create a matrix from your array

private weekDaysHeaderArr = [ /*Your elements here*/ ]
private groupSize: number = 7;
get matrix(){ 
  return this.weekDaysHeaderArr.map((item, index, arr)=>{
    return index % this.groupSize === 0 ? arr.slice(index, index + this.groupSize) : null; 
  })
  .filter((item) => { return item; });
}

Then use it inside your template like this

<div class="row" *ngFor="let week of matrix">
    <div class="col-md-auto" *ngFor="let day of week">
    </div>
</div>

edited Apr 23, 2019 at 11:00

answered Apr 23, 2019 at 10:26

Federico Galfione

1,1191 gold badge8 silver badges20 bronze badges

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

1 Comment

Andrew Allen Over a year ago

needs to be this.groupSize but yeah, works out the box

Hoff · Accepted Answer · 2019-04-23 10:20:05Z

1

Nesting for-loops in angular template is pretty straightforward. Given you have two separate arrays, you can do the following:

const sixThings = [1, 2, 3, 4, 5, 6]

const weekdays = ['mon', 'tue', 'wed']

<div class="row" *ngFor="let thing of sixThings"> <-- **repeated 6 times**
    <div class="col-md-auto" *ngFor="let weekday of weekdays"> <-- **repeated 7 times**
    </div>
</div>

I'll update the answer later for the case where you have a nested array already, or can compose one.

answered Apr 23, 2019 at 10:20

Hoff

40.2k17 gold badges84 silver badges104 bronze badges

Comments

Tzannetos Philippakos · Accepted Answer · 2019-04-23 10:21:31Z

1

You can do something like this....

<div class="row" *ngFor="let week of [0,1,2,3,4,5]">
    <div class="col-md-auto" *ngFor="let day of [0,1,2,3,4,5,6]">
    </div>
</div>

then, to get the index from weekDaysHeaderArr you can do....

 weekDaysHeaderArr[week * 7 + day];

answered Apr 23, 2019 at 10:21

Tzannetos Philippakos

4994 silver badges13 bronze badges

3 Comments

Andrew Allen Over a year ago

I get Binding expression cannot contain chained expression at the end of the expression when trying to use weekDaysHeaderArr[week * 7 + day];

Tzannetos Philippakos Over a year ago

@AndrewAllen Can you show the html from the outer loop all the way in?

Tzannetos Philippakos Over a year ago

@AndrewAllen if you want to use let day of week you can define week as Array(6).fill([0,1,2,3,4,5,6]), and use the index of week inside weekDaysHeaderArr

Collectives™ on Stack Overflow

How to nest html when looping through array using Angular + ngFor / ng-template?

3 Answers 3

1 Comment

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related