Creating Grid of Cards Dynamically using Angular Material 2

user_4302676 0
Viewed 35503

Hi I am new to Angular Material and I want to create grid of cards of the form r rows c columns (r X c) dynamically. e.g If I have 5 users then it should create r=3 and c=2 as follows.

user1 user2
user3 user4
user5

I achieved it as follows:

<md-grid-list cols="2" rowHeight="200px" gutterSize="10px">
  <md-grid-tile  class="divcls" *ngFor="let user1 of users">

     <md-card  fxLayoutWrap="wrap" fxLayout="column" fxFlex="90%" fxLayoutGap="16px">
      <md-card-title>User : {{user1.name}}</md-card-title>
      <md-card-content>{{user1.details}}</md-card-content>
       <md-card-actions>
    <button md-button>LIKE</button>
    <button md-button>SHARE</button>
  </md-card-actions>
      </md-card> 

  </md-grid-tile>
</md-grid-list>

Is this right approach? Because when I try to resize the windows it will overlap with card and grid cell. I checked on internet but didn't find any clean approach with pure angular material way. Please guide me to achieve the same with better approach than above.

angular-material2 angular
2 Answers

I think that the most elegant solution you can afford is putting a mat-card or a custom component which use mat-card with fxFlex value inside a div or whatever element with fxLayout="row wrap like this:

<div fxLayout="row wrap">
    <mat-card *ngFor="let obj of objects" fxFlex="50">{{obj}}</mat-card>
</div>
user_55069780
Related