Angular with bootstrap ngFor repeat row every 3 items

Question

Im trying to line up 3 mat-card items next to each other but for some reasons it just doesn't want to go in the right position. I followed the answers given in this thread ( Angular ng-repeat add bootstrap row every 3 or 4 cols ).

The code:

<div class="container">
  <div *ngFor='let session of sessions' ng-if="$index % 3 == 0" class="row">
    <div class="col-md-4 col-lg-4">
    <mat-card class="example-card">

      <mat-card-header>
        <mat-card-title class="title">{{session.session_name}}</mat-card-title>
        <mat-card-subtitle>{{session.speakers[0].name}}</mat-card-subtitle>
      </mat-card-header>


      <mat-chip color="accent" class="pull-right" selected>{{session.level}}</mat-chip>

      <img mat-card-image height="150px" [src]="session.sessionImgUrl" alt="Photo of a Shiba Inu">

      <mat-card-content>

        <mat-accordion class="accordion">
          <mat-expansion-panel hideToggle>
            <mat-expansion-panel-header>
              <mat-panel-title>
                Lees meer.
              </mat-panel-title>
              <mat-panel-description>

              </mat-panel-description>
            </mat-expansion-panel-header>
            <p>{{session.speakers[0].name}}</p>
            <mat-chip-list aria-label="categories">
              <div *ngFor='let category of session.categories'>
                <mat-chip color="secondary">{{category}}</mat-chip>
              </div>
            </mat-chip-list>
          </mat-expansion-panel>
        </mat-accordion>
      </mat-card-content>
    </mat-card>
  </div>
</div>

</div>

Screen of the result (where they should be next to each other):

score 2 · Accepted Answer · answered Jun 16 '21 at 14:18

Your ngFor is on the division with the row class, you want to move that to the div below where you define the col class. You also don't need the modulo operator because bootstrap will wrap onto a new line for you automatically.

<div class="row">
    <div *ngFor='let session of sessions' class="col-md-4 col-lg-4">

Angular with bootstrap ngFor repeat row every 3 items

1 Answers1