Angular Select All Pagination Issue-CodePudding

how can i check all entries from current page in angular? If I click the Select all checkbox, all entries will be selected. But if I have a list of users containing 50 users and I paginate them 5 per page, if I press the checkbox, they will be all selected, not just the entries on the selected page. How can I resolve this?

https://stackblitz.com/edit/ngx-pagination-example-hq94bl?file=app/app.component.ts

My stackblitz for reference

CodePudding user response：

Demo: Stackbliz

I think you should use a getter function to check if all items on the page are checked then that check-all button isChecked will equal true

get isSelected() {
  const itemIndex = 5 * (this.page - 1);
  const itemsInCurrentPage = this.usersList.slice(itemIndex, itemIndex   5);
  const isSelected = itemsInCurrentPage.every((item) => item.selected);
  return isSelected;
}

And use ngModel for input to update the state of checkbox

<input
        type="checkbox"
        [(ngModel)]="user.selected"
        (change)="saveSelectedList($event, user.name)"
      />

CheckAll button

<input
        type="checkbox"
        (change)="selectAll($event, page)"
        [checked]="isSelected"
      />