Create cards dynamically and arrange their layout using Flex

Question

I want to create mat-cards and have some content in it . The number of cards can vary depending on the content from the api (if api gives me data of 5 parameters 5 cards have to be created ) These cards have to aligned like 3 or 4 in a row. Tried googling how to do it but could not find. Can someone help me?

<div fxLayout="row" fxLayoutAlign="center">
    <app-tile fxFlex="25%"></app-tile>
    <app-tile fxFlex="25%"></app-tile>
    <app-tile fxFlex="25%"></app-tile>
    <app-tile fxFlex="25%"></app-tile>
    <app-tile fxFlex="25%"></app-tile>
 </div>

This gives 5 elements in a row. I expected the 5th element to start in a new row because fxFlex percentage sum has reached 100%.

<div fxLayout="row" fxLayoutAlign="center">
    <app-tile fxFlex="25%"></app-tile>
    <app-tile fxFlex="25%"></app-tile>
    <app-tile fxFlex="25%"></app-tile>
    <app-tile fxFlex="25%"></app-tile>
 </div>

 <div fxLayout="row" fxLayoutAlign="center">
    <app-tile fxFlex="25%"></app-tile>
 </div>

Works fine when I do it like this.

But how do I do this using ngFor when the number of cards changes dynamically?

Answer 1

Use wrap in the fxLayout attribute in your template:

<div fxLayout="row wrap" fxLayoutAlign="center">
  <div fxFlex="25%"></div>
  <div fxFlex="25%"></div>
  <div fxFlex="25%"></div>
  <div fxFlex="25%"></div>
  <div fxFlex="25%"></div>
</div>

See stackblitz example here.