Angular Flex-layout with ngFor, X elements per row

Question

I tried to follow this post Angular flex-layout with ngFor to do what I want but I can't make it.

I have this code:

<div *ngFor="let room of listRoom;">
  <div class="room">
    Room {{room.label}}
    <div *ngFor="let bed of room.beds;">
      <div class="bed">
        Bed #{{bed.label}}
        <button mat-raised-button color="accent" (click)="assignThisBed(bed)">
          Assign this bed
        </button>
      </div>
    </div>
  </div>
</div>

My listRooms contains usually between 10-15 elements and I'd like to have 3 rooms on a row then breakline, 3 rooms, ...

Can someone help me? Thanks..

Here is a StackBlitz with my code.

Answer 1

Your code (derived from the other SO question) is not working because fxLayoutWrap is deprecated according to the changelog of Angular Flex-layout. Instead, you should set it directly to the fxLayout attribute to take effect:

fxLayout="row wrap" fxLayout.xs="column wrap"

is the outcome. I also add a percentage sign to the regularDistribution variable: 100 / 3 + '%'.

<div fxLayout="row wrap" fxLayout.xs="column wrap">
  <div fxFlex.gt-xs="50%" [fxFlex.gt-md]="regularDistribution" *ngFor="let room of listRooms;" class="room">
      Room {{room|json}}
  </div>
</div>

Here's an updated StackBlitz that solves your issue. If the viewport is larger than fxFlex.gt-md, it will show three items per row.