Я получаю около 1000 массивов контактов из API. Я хочу отобразить его в карточке контакта. Однако я просто хочу отображать максимум 5 контактных карточек в каждой строке. Я также хочу, чтобы для этого нужна пагинация, такая как угловой материал paginator.
<div class="col" *ngFor="let yuvak of unAssignedYuvaks | paginate: { itemsPerPage: 30, currentPage: p }">
<mat-card class="example-card mt-2">
<mat-card-header>
<mat-card-title> {{yuvak.cnt_first_name + ' ' + yuvak.cnt_last_name}} </mat-card-title>
<mat-card-subtitle> <i class="i-contact nb-phone"></i>{{yuvak.cnt_mobile_no}}</mat-card-subtitle>
<mat-card-subtitle> <fa-icon [icon]="faAt"></fa-icon> {{yuvak.email}}</mat-card-subtitle>
</mat-card-header>
<img mat-card-image src="{{thumbnailImg}}{{yuvak.profile_picture}}" alt="Photo of a {{yuvak.cnt_first_name + ' ' + yuvak.cnt_last_name}}">
<mat-card-content>
</mat-card-content>
<mat-card-actions>
<button mat-button></button>
<button mat-button></button>
</mat-card-actions>
</mat-card>
</div>
это моя карточка div. Мне нужно что-то вроде это