CODEWITHSUNDEEP
htmltypescriptangular-materialangular7
Mark
Mark

Reputation: 171

Pagination does not work in angular 7. (I use angular material)

I need to implement pagination on the client side. From the back, I receive todo that I bring in the form of cards. I decided to connect mat-paginator, but I ran into a problem. I passed the number of todo to [length] = "length", but turning the pages and splitting the total number into parts does not work, displaying them on different pages. For example, I now have 13 todo (there may be more) and I need to display 4 todo on 1 page. 4 then on the second and so on. Here is my code.

component.html

...
<div class="tasks-list" >
    <mat-card class="task-card" *ngFor="let task of tasks">
        <mat-card-header>
            <mat-card-title>
/////////some code////////////
 </mat-card>
</div>

<mat-paginator [length]="length"
          [pageSize]="4"
          [pageSizeOptions]="[4, 8, 12]">
</mat-paginator>

component.ts

@ViewChild(MatPaginator) paginator: MatPaginator;
constructor(private taskService: TaskListService) {}
ngOnInit() { this.getTasks();}

getTasks() {
this.taskService.getTasks()
  .subscribe(
    (data) => {
      this.tasks = data;
      this.length = this.tasks.length;
    }) 
}

I'm confused what to do next to make it work. Everywhere I mainly write how to turn on pagination in tables, but I do not have a table. If the line add 'async', then it will not work.

Upvotes: 2

Views: 1926

Answers (1)

umutesen
umutesen

Reputation: 2640

The paginator works with a table data source.

All the paging work is done from within the iterator method. This method works out the skip and take and assigns that to the dataSource for the card list.

Live Demo

View:

<div class="tasks-list">
    <mat-card class="task-card" *ngFor="let task of dataSource">
        <mat-card-header>
            <mat-card-title>
        {{task}}
            </mat-card-title>
        </mat-card-header>
    </mat-card>
</div>

<mat-paginator #paginator [pageSize]="pageSize" [pageSizeOptions]="[1, 10, 20]" [showFirstLastButtons]="true" [length]="totalSize"
    [pageIndex]="currentPage" (page)="pageEvent = handlePage($event)">
</mat-paginator>

Component:

export class PaginatorOverviewExample implements OnInit {
  public tasks: any[];

  public dataSource: any;
  public pageSize = 1;
  public currentPage = 0;
  public totalSize = 0;

  @ViewChild(MatPaginator) paginator: MatPaginator;

  ngOnInit() { this.getTasks(); }

  getTasks() {
    // Replace with HTTP call
    var data = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11"];
    this.dataSource = new MatTableDataSource<any>(data);
    this.dataSource.paginator = this.paginator;
    this.tasks = data;
    this.totalSize = this.tasks.length;
    this.iterator(); 
  }

  handlePage(event?: PageEvent) {
    this.currentPage = event.pageIndex;
    this.pageSize = event.pageSize;
    this.iterator();
  }

  private iterator() {
    const end = (this.currentPage + 1) * this.pageSize;
    const start = this.currentPage * this.pageSize;
    const part = this.tasks.slice(start, end);
    this.dataSource = part;
  }
}

Upvotes: 2

Related Questions