Nested ngFor using outer index in inner loop - html

Question

Given a list of elements:
const l = ["one", "two", "three", "four", "five", "six", "seven"]
We want to create 1 row for every 3 elements in the list, and (up to) 3 columns per row.
In this case, the resulting html would look like:
<div class="row">
<div class="col"><p>one</p></div>
<div class="col"><p>two</p></div>
<div class="col"><p>three</p></div>
</div>
<div class="row">
<div class="col"><p>four</p></div>
<div class="col"><p>five</p></div>
<div class="col"><p>six</p></div>
</div>
<div class="row">
<div class="col"><p>seven</p></div>
</div>
How can I dynamically do this? The only way I can see to accomplish this is a nested ngFor loop, but there doesn't seem to be a way to use the outer index value in the inner for loop. How can one do this?
Something like:
<div *ngFor="let content of l; index as i">
<div class="row" *ngIf="i % 3 === 0">
<div class="col" *ngFor="<!--HOW TO ACCOMPLISH THIS FOR LOOP? j = i; j < i + 3; j++ -->">
<p [innerHTML]="l[j]"></p>
</div>
</div>
</div>

Answer 1

You can do it like this:
<ng-container *ngFor="let content of [].constructor(l.length); let item_index = index">
<div class="row" *ngIf="item_index % 3 === 0">
<ng-container *ngFor="let item of [0, 1, 2]; let column_index = index">
<ng-container *ngIf="item+item_index < l.length">
<div class="col">
<p [innerHTML]="l[item + item_index]"></p>
</div>
</ng-container>
</ng-container>
</div>
</ng-container>
Working example