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

Question

I want to use mat-card directive for show my products.The angular-material docs seems to me not thorough. I found many examples on the Internet with using Table with dataSource ( example 1, example 2 )

Now I get the productList with all products and iterate it with ngFor. I show all products on the page. How can I feed the productList to the paginator and iterate with processed data ( paginationList ).

*component.html file it show all products:

<mat-paginator #paginator 
  [length]="productList.length" 
  [pageSize]="5" 
  [pageSizeOptions]="[5, 10, 25, 100]" 
  [showFirstLastButtons]="true"
</mat-paginator>

<ng-container *ngIf="productList.length; else notHeaveProducts">
  <mat-card class="product-card" *ngFor="let product of productList">
    <mat-card-header>
      <mat-card-title>
        <h3>{{ product.title }}</h3>
      </mat-card-title>
    </mat-card-header>
    <img mat-card-image [src]="product.img_url" [alt]="product.title" [title]="product.title">
    <mat-card-content>
      <p>{{ product.description }}</p>
    </mat-card-content>
    <mat-card-actions>
      <button mat-raised-button color="accent" (click)="addItemToCard(product)">Add to card</button>
    </mat-card-actions>
  </mat-card>
</ng-container>

*component.ts

export class ListComponent implements OnInit, OnDestroy {
  public productList: Product[] = [];
  public paginationList: Product[] = [];

  ngOnInit() {
    // I receive the products
    this.activatedRoute.params.subscribe((params: any) => {
      this.catalogService.getProductList()
        .do((products: any) => {
          this.productList = products;
        })
        .subscribe();
    }
  }
}

Answer 1

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.

Answer 2

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.