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