NGX-Bootstrap/Angular - Pagination - cannot change the maxSize input when my screen view (width) is changing

Question

I am using the Pagination from Valor Software (click to access).

I want to change the maxSize input when my screen width is changing, like in the following example: Click to see example.

Seems that the maxSize is only changing by refreshing the page and not when the width is changing. Noticed that the input boundaryLinks can be updated when the width is changing.

For the width I set a HostListener to listen for the window:resize event like in the following example:

@HostListener('window:resize', ['$event'])  onWindowResize() {
  this.getScreenWidthOnResize = window.innerWidth;
  if(this.getScreenWidthOnResize <= 1050) {
   this.maxSize = 3;
  } else {
   this.maxSize = 10;
  }
  console.log(this.getScreenWidthOnResize);
}

To change the maxSize. In the html page I have the following:

 <pagination                                                
  [boundaryLinks]="showBoundaryLinks=true"
  [totalItems]="totalItems=30"
  [itemsPerPage]="itemsPerPage=5"
  [(ngModel)]="currentPage=6"
  (pageChanged)="pageChanged($event)"
  [maxSize] = "maxSize=default 10, but when width gets smaller, change it to 3, meaning that will be visible only 3 pages that the user can choose"
  [rotate] = "true"
  ></pagination>

Just the regular I would say. Any idea why the maxSize is not changing when the width is changing?

Or something that helps me to change the limits on smaller screens.

Answer 1

Looks like ngx-bootstrap(vs @ng-bootstrap/ng-bootstrap) implementation of pagination component doesn't support dynamic changes of maxSize.

Here's a workaround:

import { Component, HostListener, ViewChild } from '@angular/core';
import { PaginationComponent } from 'ngx-bootstrap/pagination';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  maxSize = 3;

  @ViewChild(PaginationComponent) paginationComp!: PaginationComponent;

  @HostListener('window:resize', ['$event'])  onWindowResize() {
    const newMaxSize = window.innerWidth <= 1050 ? 3 : 10;
    if (this.paginationComp.maxSize !== newMaxSize) {
      this.paginationComp.maxSize = newMaxSize;
      this.paginationComp.selectPage(this.paginationComp.page)
    }
  }
}