11

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();
    }
  }
}
0

2 Answers 2

12

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.

3
  • 1
    This helped me so much! You saved my life (well, my job at least). Thank you!
    – Katherine
    Oct 6, 2020 at 1:35
  • 2
    @Katherine Glad to hear that! Jan 28, 2021 at 5:22
  • i was getting error replacing this (page)="pageEvent = OnPageChange($event)" to this (page)="OnPageChange($event)" solved error. might be helpful for someone Thanks @SachinParashar Dec 26, 2021 at 6:31
2

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.

1
  • What is datasource used for ? I don't understand the link between this.productListand the datasource. I'm also looking for a good way to paginate *ngForlist without any library
    – John
    Dec 27, 2018 at 14:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.