Handling Checkbox Interactions and Pagination in Angular Table

I am working on an Angular application that includes a table with pagination implemented on the server side. One of the columns in the table contains a checkbox that acts as a "Select All" and "Unselect All" feature. Each row in the table represents a document with its own checkbox for individual selection.

I need to find a proper way to handle the interaction between these checkboxes, taking into account the pagination feature. When navigating between pages, the checkbox states should be preserved.

Specifically, I want to achieve the following functionality:

The master checkbox should have three states: true (checked), false (unchecked), and null (indeterminate) when at least one row checkbox is selected. When paginating, the checkbox states should be maintained. I am also unsure about the best approach to communicate with the server in this scenario. Should I send the document IDs? However, in the case of "Select All," I don't have all the IDs.

I am using Angular, and the table library I'm working with is Taiga UI.

Any guidance on how to handle the checkbox interactions and maintain the states during pagination, as well as the recommended approach for communicating with the server, would be greatly appreciated.

don't know Taiga, but I put checked state in the model. Then trigger a toggle function selectUnSelectAll() like so:

<input type="checkbox" (click)="selectUnSelectAll()" />

selectUnSelectAll function:

//class property toggleSelectAll...
 public toggleSelectAll: boolean = false;     
 
 selectUnSelectAll(): void {
  if (this.toggleSelectAll) {
    this.pullListData.forEach((dat) => {
      dat.selectedToPull = false;
    });
    this.toggleSelectAll = false;
  }
  else {
    this.pullListData.forEach((dat) => {
      dat.selectedToPull = true;
    });
    this.toggleSelectAll = true;
  }
}

Sounds like you'll also want to send the data to the endpoint to update the DB as well... you could alternatively trigger that when a user navigates away, or after they click a "submit" button.

The state is reflected in the HTML like so (you might not need indexes):

<tr *ngFor="let pull of pullListData; let i=index;">
// <td>s and data...
    <input type="checkbox" [(ngModel)]="pull.selectedToPull" id="selectedToPull-{{i}}" name="selectedToPull-{{i}}" />

You shouldn't need the "null" state for the select/unselect all checkbox, but I suppose you could set it to disabled for that state. (but when to enable? I think the user gets that the checkbox only checks all or unchecks all... they can then check/uncheck individual items if they like.) The IDs should come in with the data. The data you send can just be the IDs with the checked state.