mat-pagination without mat-table

Question

I have been trying to implement mat-pagination to my result list which does not use the mat-table. However, all the examples I found here are using mat-table with pagination.

Appreciate your help regarding this.

I'm currently getting all the data from the resolver on onInit and do not need to fetch data from the backend every time a user interacts with the pagination.

component.html

<div class="axi-results-wrapper">
    <mat-accordion>
      <ng-container *ngFor="let process of Processes; let i = index;">
        <mat-expansion-panel (opened)="setOpened(i)"
                             (closed)="setClosed(i)" hideToggle="true">
          <mat-expansion-panel-header [collapsedHeight]="'66px'" [expandedHeight]="'60px'">
            <div *ngIf="currentlyOpenedItemIndex !== i" class="row axi-results-row">
              <span class="col-md-4 axi-results-row__txt">
                <div class = "axi-result-circle axi-result-circle--bg-color">
                  <i class="far fa-copy"></i>
                </div>
                <div class="axi-results-row__txt axi-results-row__txt--primary">{{process.name}}</div>
              </span>
              <span class="col-md-3 axi-results-row__txt axi-results-row__txt--secondary">{{process.repoUrl}}</span>
              <span class="col-md-3 axi-results-row__txt axi-results-row__txt--secondary">{{process.processType}}</span>
              <span class="col-md-2 axi-results-row__txt axi-results-row__icon" *appHasAccess="roleTitle">
                <span (click)="editProcess(process, i); $event.stopPropagation();">
                  <i class="material-icons">edit</i>
                </span>
                <span (click)="deleteProcess(process.id, i); $event.stopPropagation()">
                  <i class="material-icons">delete_outline</i>
                </span>
              </span>
            </div>
            <div *ngIf="currentlyOpenedItemIndex === i">
              <app-result-header [iconType]="type" [headerName]="process.name" (editData)="editProcess(process, i)" (deleteFunc)="deleteProcess(process.id, i)"></app-result-header>
            </div>
          </mat-expansion-panel-header>
          <app-process-detail-view [process]="process"></app-process-detail-view>
        </mat-expansion-panel>
      </ng-container>
    </mat-accordion>

    <mat-paginator [length]="length"
    [pageIndex]="pageIndex"
    [pageSize]="pageSize"
    [pageSizeOptions]="[5, 10, 25, 100]">
    </mat-paginator>
  </div>

component.ts

@ViewChild(MatPaginator, {static: true}) paginator: MatPaginator; 

  constructor(private actr: ActivatedRoute) { }

  ngOnInit() {
    this.getProcessService();
  }

  getProcessService() {
    // Getting all the data fetched from the active route
    this.actr.data.subscribe((res) => {
      this.Processes = res.process;
    });
  }

Eliseo · Answer 1 · 2020-07-16T12:37:48.463

2

A mat-paginator is as others components, has inputs and outputs. You control the inputs using [name of property] and outputs (name of output)="yourFunction($event)"

See in the docs

So you can use,e.g.

<mat-paginator [length]="length"
               [pageSize]="pageSize"
               [pageSizeOptions]="pageSizeOptions"
               (page)="change($event)">
</mat-paginator>

change(event:PageEvent)
{
    //make something
    console.log(event.length);
    console.log(event.pageIndex);
    console.log(event.pageSize);
    console.log(event.previousPageIndex)
    //possible call to a function in a service to get data from one index to another one
    this.obs$=this.data.service.getItems(event.previousPageIndex*event.pageSize,
           event.PageIndex*event.pageSize               
    )
}

edited Jul 16 '20 at 12:37

answered Jul 16 '20 at 10:04

Eliseo

50,109
4
29
67

This was an eye-opener for me. I didn't want to use the service call inside the change function because I already have all the data. Instead, I used array.slice function to get the data I want for a specific page. – ONE_FE Jul 16 '20 at 11:43
True, if you has already all the data, use a slice -I read so quickly your question- – Eliseo Jul 16 '20 at 12:39

score 0 · Answer 2 · answered Sep 27 '22 at 17:54

0

Optionally you can save yourself all this effort by putting the ng-container inside a table, with just one <tr> and one <td>.

answered Sep 27 '22 at 17:54

stephen carvalho

127
1
17

mat-pagination without mat-table

2 Answers2