CODEWITHSUNDEEP
javascriptangulartypescripttwo-way-binding
doubting
doubting

Reputation: 347

Two way data binding not working properly

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:

enter image description here

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>

Upvotes: 0

Views: 385

Answers (1)

Eliseo
Eliseo

Reputation: 58039

You should use pageChange, not (click). It's like you split [(ngModel)] in [ngModel] and (ngModelChange)

<ngb-pagination [page]="page" (pageChange)="page=$event;setPageNumber()"
     [maxSize]="5" [pageSize]="pageSize" [rotate]="true" [boundaryLinks]="true">
</ngb-pagination>

NOTE: you can also use (pageChange)="setPageNumber($event)" and in setPAgeNumber change also the variable this.page

Else your "click" is executed before ngb-paginator change the page

Upvotes: 1

Related Questions