CODEWITHSUNDEEP
angularpaginationangular-material
Da Mike
Da Mike

Reputation: 463

angular paginator not loading first page

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.

Upvotes: 0

Views: 1325

Answers (1)

Austin T French
Austin T French

Reputation: 5121

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>

Upvotes: 1

Related Questions