CODEWITHSUNDEEP
angularangular2-formsangular-material2ngfor
tanmay parmar
tanmay parmar

Reputation: 279

How to display maximum 5 cards in each row in angular material in NgFor Loop

I am getting around 1000 contacts array from api.I want to display it in contact card. However, I just want to display maximum 5 contact card in each row. I also, want to need a pagination like angular material paginator for this. 

 <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>

this is my card div. I need something like this

Upvotes: 1

Views: 4764

Answers (1)

Morteza Ebrahimi
Morteza Ebrahimi

Reputation: 760

Try this:

Component.html:

<div style="display:flex">
    <mat-card class="mt-2" *ngFor="let item of tempList">
        <mat-card-header>
            <mat-card-title> {{item.title}} </mat-card-title>
        </mat-card-header>
    </mat-card>
</div>

<mat-paginator [length]="list.length" [pageSize]="pageSize" [pageSizeOptions]="[5, 10, 25, 100]" (page)="onPageChange($event)">
</mat-paginator>

Component.ts:

import { Component } from '@angular/core';

@Component({
  selector: 'paginator-overview-example',
  templateUrl: 'paginator-overview-example.html',
  styleUrls: ['paginator-overview-example.css'],
})
export class PaginatorOverviewExample {

  list = [];
  pageSize=5;
  tempList=[];

  ngOnInit() {
  // get your list from api
    for (let i = 1; i < 1000; i++) {
      this.list.push({
        title:"item " + i
      });
    }

    this.tempList=this.list.slice(0,this.pageSize);
  }

  onPageChange(e) {
      this.tempList = this.list.slice(e.pageIndex * e.pageSize,(e.pageIndex + 1) *e.pageSize);
  }

}

I hope this help you.

Upvotes: 1

Related Questions