Make a grid using ngfor and ngif

Question

I'm trying to make a grid where 3 cards are displayed in one line, then a new row is added, and the next 3 cards are displayed.

This is the code I have at the moment:

<div class="container">
  <div *ngIf="recipes$ | async as recipes; else loadingOrError">
    <div class="row">
      <div class="col" *ngFor="let recipe of recipes; let i = index">
        <app-recipe [recipe]="recipe"></app-recipe>
        <div *ngIf="i % 3 === 0">
          <div class="row"></div>
        </div>
      </div>
    </div>
    <ng-template #loadingOrError></ng-template>
  </div>
</div>

This does not work. Is there an easier way to complete this task? I'm using the mdbootstrap framework.

Do you have `.row-cols-*` available (https://getbootstrap.com/docs/4.4/layout/grid/#row-columns) ? — Caramiriel, Jan 12 '20 at 20:50

score 0 · Accepted Answer · answered Jan 13 '20 at 01:16

I know you're using mdbootstrap, but this is an ideal scenario for CSS grid. If you cannot get mdbootstrap to work for you, consider this alternative:

Your template:

<div class="container" *ngIf="recipes$ | async as recipes; else loadingOrError">
  <div class="card" *ngFor="let recipe of recipes; let i = index">
    <app-recipe [recipe]="recipe"></app-recipe>
    <div *ngIf="i % 3 === 0">
      <div class="row"></div>
    </div>
  </div>  
</div>
<ng-template #loadingOrError></ng-template>

Your CSS:

.container {
  display: grid;
  gap: 1em;
  grid-template-columns: 1fr 1fr 1fr;
}

If you want an interactive example, take a look at this codepen. The hard-coded div elements are simulating the elements generated by the *ngFor directive.

Yeah, I thought about suing CSS Grid, I'll play around with it! — Mout Pessemier, Jan 13 '20 at 17:53

Make a grid using ngfor and ngif

1 Answers1