title: Keeping checkbox values in Angular 8 in table page change
body: <p>I am using a sheeted sheet. There is a checkbox in every row of the table and when the checkbox is selected, the id value of that row is added to FormArray, when it is removed, the id value is deleted from the array. Since I have my pages in the table, after I made my selection, when I make my selections on the next page and return to the first page, my checkbox values are false even though my row id values are in FormArray. How can I ensure that my selections remain true if true and false if false, without being affected by the page change</p>
  
  <p>.ts file</p>
  
  <pre><code>  selectedAppeals: FormArray = new FormArray([]);
  ...
  updateApeealChecked(event, id: string) {
      if (event.target.checked) {
        this.selectedAppeals.push(new FormControl(id));
      }
      else {
        let i: number = 0;
        this.selectedAppeals.controls.forEach((item: FormControl) =&gt; {
        if (item.value == id) {
           this.selectedAppeals.removeAt(i);
           return;
        }
        i++;
     });
   }
  }
  </code></pre>
  
  <p>.html file</p>
  
  <pre><code>&lt;mat-checkbox *ngIf="(row.status === appealStatus.Waiting || row.status === appealStatus.Redirected 
           || row.status === appealStatus.AwaitingApproval)"
           (change)="updateApeealChecked($event, row.id)"&gt;
  &lt;/mat-checkbox&gt;
  </code></pre>