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

Answer 1

Do the below changes to your code.

In your component.html

<ng-container *ngFor="let process of Processes | async; let i = index;">

<mat-paginator [pageSizeOptions]="[5, 10, 50]" showFirstLastButtons></mat-paginator>

In your component.ts

@ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
dataSource: MatTableDataSource<any>;
Processes;

getProcessService() {
    // Getting all the data fetched from the active route
    this.actr.data.subscribe((res: any) => {
      this.dataSource = new MatTableDataSource(res.process);
      this.Processes = this.dataSource.connect();
      this.dataSource.paginator = this.paginator;
    });
}

Answer 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               
    )
}

Answer 3

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