How to use angular-material pagination with mat-card?

I had the exact same requirement and I did this using mat-paginator with mat-grid-list containing the mat-cards. I used mat-grid-list to make my list responsive so that it can adjust the no. of elements in a row according to screen size. Here is what I did:

<mat-paginator [length]="length"[pageSize]="pageSize"[pageSizeOptions]="pageSizeOptions"(page)="pageEvent = OnPageChange($event)"></mat-paginator><mat-grid-list [cols]="breakpoint" rowHeight="4:5" (window:resize)="onResize($event)" >  <mat-grid-tile *ngFor="let product of pagedList">    <div>      <mat-card class="example-card">          mat-card content here..      </mat-card>    </div>  </mat-grid-tile></mat-grid-list>

This is what component looks like:

  productsList: Product[]= [];  pagedList: Product[]= [];  breakpoint: number = 3;  //to adjust to screen  // MatPaginator Inputs  length: number = 0;  pageSize: number = 3;  //displaying three cards each row  pageSizeOptions: number[] = [3, 6, 9, 12];  ngOnInit() {        this.breakpoint = (window.innerWidth <= 800) ? 1 : 3;        this.productsList = <GetOrInitializeYourListHere>;        this.pagedList = this.productsList.slice(0, 3);        this.length = this.productsList.length;    });  }  OnPageChange(event: PageEvent){    let startIndex = event.pageIndex * event.pageSize;    let endIndex = startIndex + event.pageSize;    if(endIndex > this.length){      endIndex = this.length;    }    this.pagedList = this.productsList.slice(startIndex, endIndex);  }  onResize(event) { //to adjust to screen size    this.breakpoint = (event.target.innerWidth <= 800) ? 1 : 3;  }

Hope it helps.

This Post answers the question.

observableData: Observable<any>;ngOnInit() {    this.observableData = this.dataSource.connect();}

And in your HTML file.

<mat-card *ngFor="let item of observableData | async"></mat-card>

I am able to get this code working. If above code is not enough for explanation, I can post entire code here (the code is on different machine and hence not pasting now). Also see above code is hand written here (not pasted from editor) so may face minor glitches.

Hope it helps.