Estoy usando un componente de paginación de ng-bootstrap. Coloqué este componente dentro de un componente genérico que también contiene un menú desplegable de selección para determinar cuántos elementos por página se mostrarán. Emití un evento de este componente genérico y lo atrapé en el componente principal (member-list.component). El caso es que estoy seleccionando la página anterior en lugar de la actual en el componente padre. ¿Alguien puede ayudarme? Gracias de antemano.

Problema:

paginacion.componente.html:

 <ngb-pagination [collectionSize]="120" [(page)]="page" (click)="setPageNumber()" [maxSize]="5" [pageSize]="pageSize" [rotate]="true" [boundaryLinks]="true"></ngb-pagination> <select class="custom-select mb-3" (change)="setPageSize(selectSize)" #selectSize> <option value="10" selected>10</option> <option value="20">20</option> <option value="50">50</option> </select> <hr> <pre>Current page from generic component: {{page}}</pre>

paginación.componente.ts:

 import { Component, Input, OnInit, Output, EventEmitter} from '@angular/core'; @Component({ selector: 'app-pagination', templateUrl: './pagination.component.html', styleUrls: ['./pagination.component.css'] }) export class PaginationComponent implements OnInit { @Input() page: number; @Input() pageSize: number; @Input() collectionSize: number; @Output() pageNumber = new EventEmitter<number>(); constructor() { } ngOnInit(): void { this.pageSize = 10; } setPageSize(option: any) { this.pageSize = Number(option.value) } setPageNumber() { this.pageNumber.emit(this.page); } }

lista-de-miembros.componente.html:

 <app-pagination [page]="page" [collectionSize]="120" (pageNumber)="page=$event"></app-pagination> <pre>Current page from member list: {{page}}</pre>