Estoy usando Paginación de Valor Software (click para acceder) .
Quiero cambiar la entrada maxSize cuando el ancho de mi pantalla está cambiando, como en el siguiente ejemplo: Haga clic para ver el ejemplo .
Parece que maxSize solo cambia al actualizar la página y no cuando cambia el ancho. Observó que los enlaces de límite de entrada se pueden actualizar cuando cambia el ancho.
Para el ancho configuré un HostListener para escuchar el evento window:resize como en el siguiente ejemplo:
@HostListener('window:resize', ['$event']) onWindowResize() { this.getScreenWidthOnResize = window.innerWidth; if(this.getScreenWidthOnResize <= 1050) { this.maxSize = 3; } else { this.maxSize = 10; } console.log(this.getScreenWidthOnResize); }Para cambiar el maxSize. En la página html tengo lo siguiente:
<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>Solo lo normal diría yo. ¿Alguna idea de por qué maxSize no cambia cuando cambia el ancho?
O algo que me ayude a cambiar los límites en pantallas más pequeñas.
Parece que ngx-bootstrap (vs @ng-bootstrap/ng-bootstrap ) del componente de paginación no admite cambios dinámicos de maxSize .
Aquí hay una solución:
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) } } }