Angular 7 : Pagination not working properly

Question

I've problem with pagination. Sorry, I not so understand it how to make it working as expected by passing this.total = res.totalPage;from Component to Service to make it count page.Because it now just display 1 page only "image reference". Bellow I provide html, Component and Service code to make you easy to understand. In html code, I just show part pagination.

HTML

    <table
      mat-table
      [dataSource]="dataSource"
      matSort
      multiTemplateDataRows
      class="mat-elevation-z8-"
    >
    <ng-container
        matColumnDef="{{ column }}"
        *ngFor="let column of columnsToDisplay | paginate: { id: 'server', itemsPerPage: 10, currentPage: p, totalItems: total }"
      ><!-- -->
      <ng-container *ngIf="column === 'select'; else notSelect">
        <th mat-header-cell *matHeaderCellDef>
          <mat-checkbox (change)="$event ? masterToggle() : null"
                        [checked]="selection.hasValue() && isAllSelected()"
                        [indeterminate]="selection.hasValue() && !isAllSelected()">
          </mat-checkbox>
        </th>
        <td mat-cell *matCellDef="let row">
          <mat-checkbox (click)="$event.stopPropagation()"
                        (change)="$event ? selection.toggle(row) : null"
                        [checked]="selection.isSelected(row)"
                        >
          </mat-checkbox>
        </td>
      </ng-container>

      <ng-container *ngIf="column.length == 11"  matColumnDef="name"><!---->
        <th mat-header-cell *matHeaderCellDef mat-sort-header><strong>{{ column }}</strong></th>
      </ng-container>
      <ng-container #headerSort><!---->
        <th mat-header-cell *matHeaderCellDef><strong>{{ column }}</strong></th>
      </ng-container>
        <td
          mat-cell
          *matCellDef="let element"
          (click)="open(element)"
          class="pointer"
        >
        <p>
         {{element.name}}
         </p>
         <p *ngIf="column.length == 7">
            {{element.location}}
          </p>
          <p *ngIf="column.length == 6">
              {{element.status}}
          </p>
          <p *ngIf="column.length == 8">
            {{date}}
        </p>
        </td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
      <tr
        mat-row
        *matRowDef="let element; columns: columnsToDisplay"
        class="example-element-row"
        [class.example-expanded-row]="expandedElement === element"

      ></tr>

      <tr
        mat-row
        *matRowDef="let item; columns: ['expandedDetail']"
        class="example-detail-row"
      ></tr>
    </table>
    <pagination-controls (pageChange)="loadAgents($event)" id="server"></pagination-controls>

Component

ngOnInit() {
    this.getPage(1);
}

getPage(page: number) {
  this.allService.getAllService(pageIndex).subscribe(res =>{
  this.dataSource = new MatTableDataSource<AllDetails>(res['allList']);

  this.total = res.totalPage;
  console.log(this.total)
  this.p = pageIndex;
  this.dataSource.sort = this.sort;

 }
}

Service

getAllService(page:number): Observable<any>  {
    console.log("TEST page back" +page)
    const urls: string = `http://192.168.0.101:9080/project/api/listall/${orgId}`
   const requestUrl: string = `${urls}/${page + 1}/desc`;

    return this.http.get<AllDetails>(requestUrl).pipe(map(res => {
      return {
        allList: res['allList'],
        noPage: res['noPage'],
        totalPage: res['totalPage']
      };
  }));

  }

Part noPage: res['noPage'] refer to current page.

I've example pagination code but I don't know to implement in my code.

Hope you all can help.

Thanks in advance

The link to your example does not seem to be correct. – riorudo Aug 22 '19 at 05:24 — riorudo, Aug 22 '19 at 05:24

score 0 · Answer 1 · answered Aug 22 '19 at 06:04

0

Try changing

<ng-container matColumnDef="{{ column }}" *ngFor="let column of columnsToDisplay | 
  paginate: { id: 'server', itemsPerPage: 10, currentPage: p, totalItems: total }">

to

<ng-container matColumnDef="{{ column }}" *ngFor="let column of columnsToDisplay | 
async | paginate: { id: 'server', itemsPerPage: 10, currentPage: p, totalItems: total }">

answered Aug 22 '19 at 06:04

Azzam Asghar

346
1
10

Thank for answer... But I got error `ERROR Error: "InvalidPipeArgument:` – swapy Aug 22 '19 at 06:06
1

Can you add the code where you are creating `columnsToDisplay` ? – Azzam Asghar Aug 22 '19 at 06:11
`columnsToDisplay: string[] = ['select','Name','Status', 'Location.' , 'Date'];` – swapy Aug 22 '19 at 06:16
Are you sure columnsToDisplay has length of more than 10 items. As you have limited `itemsPerPage` to 10 so for `pagination` to show more than one page `columnsToDisplay` must have more than 10 items. – Azzam Asghar Aug 22 '19 at 06:18
Yes it has 9 page. 10 length per page. I `console.log(total)` it come out 9 – swapy Aug 22 '19 at 06:27
Okay try making it more than 10 and also increase the length of `columnsToDisplay` more than 10 too – Azzam Asghar Aug 22 '19 at 06:29
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/198293/discussion-between-swapy-and-azzam-asghar). – swapy Aug 22 '19 at 10:23

Angular 7 : Pagination not working properly

1 Answers1