export class PaginatorConfigurableExample {
  length = 100;
  pageSize = 5;
  pageSizeOptions: number[] = [5, 10, 25, 100];
  cardsList = ['card 1', 'card 2','card 3', 'card 4','card 5', 'card 6','card 7', 'card 8','card 9', 'card 10','card 1', 'card 2','card 1', 'card 2','card 1', 'card 2','card 1', 'card 2','card 1', 'card 2'];

  filterdCards = this.cardsList.slice(0,this.pageSize);
  pageEvent: PageEvent;
  updateCards(e){
    console.log(e);
    this.filterdCards = this.cardsList.slice( e.pageIndex * e.pageSize, (e.pageIndex +1) * e.pageSize);
    console.log(this.filterdCards);
  }
}




<mat-card *ngFor="let card of filterdCards">{{card}}</mat-card>

<mat-paginator [length]="cardsList.length"
              [pageSize]="pageSize"
              [pageSizeOptions]="pageSizeOptions"
              (page)="pageEvent = updateCards($event)">
</mat-paginator>