I am using a pagination component from ng-bootstrap. I put this component inside a generic component that also contains a select dropdown to determinate how many items per page will be shown. I emitted an event from this generic component and caught it in the father component (member-list.component). The thing is that I am getting the previous page selected instead the current one in the father component. Can anyone help me? Thank you in advance.

Problem:

pagination.component.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>

pagination.component.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);
  }

}

member-list.component.html:

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