angular paginator not loading first page

Question

First of all, I know there have been several similar questions, but I have not managed to make it work the way I want it to. And it's the simplest thing anyone could ask from a paginator. Load the first page immediately, without having to press the next and previous buttons.

My HTML

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

</mat-paginator>

<div  *ngIf="pageEvent">
    <mat-grid-list cols="2" rowHeight="7:1">
      <ng-container>
        <mat-grid-tile>
            pageIndex = {{ pageEvent.pageIndex }}
        </mat-grid-tile>
      </ng-container>
    </mat-grid-list>
</div>

and typescript

import { Component, OnInit, ViewChild } from '@angular/core';
import { PageEvent } from '@angular/material/paginator';

@Component({
  selector: 'app-room',
  templateUrl: './room.component.html',
  styleUrls: ['./room.component.css']
})
export class RoomComponent implements OnInit {

  // MatPaginator inputs
  length = 6;
  pageSize = 1;

  // MatPaginator output
  pageEvent: PageEvent;

  constructor() { }

  ngOnInit(): void {}

}

Answers from posts like this or this do not work.

Any help would be appreiated!

Edit: I posted the whole ts file.

The TS has not data, nor a subscription to get data. I suspect what you want is to add a data call in the OnInit method. — Austin T French, Aug 25 '20 at 14:54
No, that is not the problem. All I want to show from my HTML is `pageIndex = 1, 2, 3...` according to the appropriate pageIndex. So when it loads I want it to show `pageIndex = 0`. But it does not do that. I have to press next page to get it to show `pageIndex = 1` and then previous page to get it to finally show `pageIndex = 0`. — Da Mike, Aug 25 '20 at 15:04
Try initializing something in the onInit method or injecting it so that the value is loaded without a PageEvent occurring. — JLazar0, Aug 25 '20 at 15:28

score 1 · Accepted Answer · answered Aug 25 '20 at 15:28

You are using *ngIf on an event (which won't really have a value until something triggers it)

You can do the following however:

TS:

ngOnInit(): void {
    this.pageEvent = new PageEvent();
  }

  getPageIndex(){
      if (!this.pageEvent.pageIndex)
      {
        return 0;
      }
      else
      {
        return this.pageEvent.pageIndex;
      }
    }

And then HTML, just call the function:

<div  *ngIf="pageEvent">
    <mat-grid-list cols="2" rowHeight="7:1">
      <ng-container>
        <mat-grid-tile>
            pageIndex = {{getPageIndex()}}
        </mat-grid-tile>
      </ng-container>
    </mat-grid-list>
</div>

angular paginator not loading first page

1 Answers1