Unable to retain the value of check boxes present on a dialog modal

Bringing this question again! I have modal which then has checkboxes inside it . I choose the options and the selected options works the correct way and gets back what I want. But once I close the modal(where the checboxes are present) and open it again, the values that I chose before disappears and I get a clean slate. I am fine with having a clean slate once the user refreshes the page, but it should keep the selection until then, Is there a easy way out in which I can do that. I am using Angular. Below is the screenshot of my modal

TEMPLATE

<h1 mat-dialog-title></h1>
<div mat-dialog-content>

  <mat-form-field *ngIf="this['gradeFilter']">
    <mat-select [formControl]="gradeCtrl" placeholder="Choose Grade">
      <mat-option *ngFor="let grade of grades" [value]="grade">
        
      </mat-option>
    </mat-select>
  </mat-form-field>
  <mat-form-field color="accent">

    <mat-label></mat-label>
    <input type="text" matInput (keyup)="searchList($event.target.value)" />
  </mat-form-field>

  <mat-table [dataSource]=filteredList cdkScrollable style="overflow:scroll; height:400px;">
    <ng-container matColumnDef="selected">
      <mat-header-cell *matHeaderCellDef> 
        <mat-checkbox (change)="AllItemsChange($event);saveSelectedItems($event)" [(checked)]="selectAllItems"></mat-checkbox>
      </mat-header-cell>
      <mat-cell *matCellDef="let group"> 
        <mat-checkbox [(ngModel)]=group.selected></mat-checkbox>
      </mat-cell> 
    </ng-container>
    <ng-container matColumnDef="noSearchResults">
      <mat-header-cell *matHeaderCellDef> 
        <mat-checkbox disabled="disabled" [(checked)]="selectAllItems"></mat-checkbox>
      </mat-header-cell>
      <mat-cell *matCellDef="let group"> 
        No  found
      </mat-cell> 
    </ng-container>
    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
  </mat-table>
</div>
<div mat-dialog-actions>
  <button type="button" (click)="onNoClick()">Cancel</button>
  <button type="button" (click)="confirmModal(); saveSelectedItems()">Ok</button>

TS FILE::

AllItemsChange($event) {
    for (var i = 0; i < this.filteredList.length; i++) {
      this.filteredList[i].selected = $event.checked;
    }
  }
 //Keystrokes entered on View to search and filter the list.
  public searchList(value: string) {
    this.listFilterSubject.next(value);
  }

  performFilter(value: string): GroupItem[] {

    this.filteredList = this.dialogGroupList.filter((item: GroupItem) =>
      item.name.toLowerCase().includes(value.toLowerCase()));

      this.updateDisplayForSearch();

      return this.filteredList;
  }

  ngOnInit(): void {
    this.filteredList = this.dialogGroupList;

    //Defaulting to first value(All Grades)
    this.gradeCtrl.setValue(this.grades[0]);

    this.updateDisplayForSearch();
  }


  private updateDisplayForSearch(): void {
    if (this.filteredList.length === 0) {
      this.displayedColumns = [this.nofilteredResults_Column]
      this.filteredList.push(new GroupItem()); //need a fake item for the no results message to show up in.
    } else {
      this.displayedColumns = [this.resultsFound_Column]
    }
  }

  confirmModal() {
    this.result = this.filteredList.filter(x => x.selected);
    this.close();
  }

  onNoClick() {
    this.result = null;
    this.close();
  }