Wrap material cards inside an ngFor

Question

I'm generating cards from an Api when user makes a search.

I have film list component in which I show my cards

here's the HTML

<div fxLayout='row' fxLayoutWrap class="cards">

  <div fxFlex="20" class="example-card" *ngFor="let film of dataResult.results">
    <mat-card>
      <mat-card-header>
        <mat-card-title>{{film.title}}</mat-card-title>
        <mat-card-subtitle>{{film.release_date}}
        </mat-card-subtitle>
      </mat-card-header>
      <img mat-card-image src="http://image.tmdb.org/t/p/w185/{{film.poster_path}}" alt="Photo of a Shiba Inu">
      <mat-card-content>
        <p>
          {{film.overview}}
        </p>
      </mat-card-content>
      <mat-card-actions>
        <button mat-button>
          <mat-icon>favorite</mat-icon>
        </button>
        <button mat-button>SHARE</button>
      </mat-card-actions>
    </mat-card>
  </div>
</div>

And CSS

.example-card {
    min-width: 100%;
    margin: 40px;

}
.cards {
    width: 400px;
}

the services are working and also component ts logic.

My problem is that material cards are not wrapping to a new line while I'm using fxLayoutWrap to wrap content when fxFlex get 100 of value.

Here's a stacklitz demo ( I get an https error when I call the API, if someone could fix it I'll be grateful )

Here's a screenshot of my problem

Answer 1

<div fxLayout='row' fxLayoutWrap class="cards">

<div fxFlex="20" class="example-card">
<mat-card *ngFor="let film of dataResult.results" style="margin-top:10px;>
  <mat-card-header>
    <mat-card-title>{{film.title}}</mat-card-title>
    <mat-card-subtitle>{{film.release_date}}
    </mat-card-subtitle>
  </mat-card-header>
  <img mat-card-image src="http://image.tmdb.org/t/p/w185/{{film.poster_path}}" alt="Photo of a Shiba Inu">
  <mat-card-content>
    <p>
      {{film.overview}}
    </p>
  </mat-card-content>
  <mat-card-actions>
    <button mat-button>
      <mat-icon>favorite</mat-icon>
    </button>
    <button mat-button>SHARE</button>
  </mat-card-actions>
</mat-card>

Because there is no problem repeating the code, you must be sure to place the repeat command as well as the essence of the code in the smart design material, and the codes are merged in the absence of space, so they must be separated for them Write css style margin-top:10px. Verify the code above for you.