title: previous data not getting selected after search in selectionmodel angular
body: <p>I am working on angular selectionmodel where I have a search bar where user searches for list and selects items and if user closes the search keyword then previous selected values i.e., before search not getting selected in the selectionmodel list.</p>
  
  <p><strong>Search code in ts</strong>:</p>
  
  <pre><code>searchUsers(filterValue: string) {
    this.previousSelectedValues = this.userSelection.selected;
    console.log("came to searchUsers",filterValue);
    this.searchKey = filterValue;
    let params = { 'searchData': this.searchKey}
    this.commCenterService.getSearchedUsers(params).subscribe((res)=&gt;{
      console.log("Search Response: Users",res);
      this.users = res;
      console.log("previous selected fields",this.userSelection.selected);
      if(filterValue == ""){
       this.previousSelectedValues.forEach(row =&gt; this.userSelection.select(row));
      }
      this.dataSource = new MatTableDataSource(this.users);
     });
  }
  </code></pre>
  
  <p><strong>selectionmodel initialization code</strong>:</p>
  
  <pre><code>userSelection = new SelectionModel&lt;AddRecipientsList&gt;(true, []);
  /** Whether the number of selected elements matches the total number of rows. */
  isAllSelected() {
    const numSelected = this.userSelection.selected.length;
    const numRows = this.dataSource.data.length;
    return numSelected === numRows;
  }
  /** Selects all rows if they are not all selected; otherwise clear selection. */
  masterToggle() {
    this.isAllSelected() ?
    this.userSelection.clear() :
    this.dataSource.data.forEach(row =&gt; this.userSelection.select(row));
  }
  /** The label for the checkbox on the passed row */
  checkboxLabel(row?: PeriodicElement): string {
   if (!row) {
    return `${this.isAllSelected() ? 'select' : 'deselect'} all`;
   }
  }
  </code></pre>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div fxFlex="auto" fxLayoutAlign="start center" fxLayoutGap="10px"&gt;
    &lt;mat-form-field fxFlex="100" appearance="outline"&gt;
      &lt;input matInput type="text" (keydown.enter)="searchUsers(value)" [(ngModel)]="value"&gt;
      &lt;mat-label fxLayoutAlign="start center"&gt;
       &lt;mat-icon class="s-16"&gt;search&lt;/mat-icon&gt;Search by Recipient Name, Email
      &lt;/mat-label&gt;
      &lt;button mat-button *ngIf="searchKey" matSuffix mat-icon-button aria-label="Clear" (click)="value=''; searchUsers(value);"&gt;
                  &lt;mat-icon class="s-16"&gt;close&lt;/mat-icon&gt;
      &lt;/button&gt;
   &lt;/mat-form-field&gt;
  &lt;/div&gt;    
  
  &lt;div&gt;
    &lt;mat-table [dataSource]="dataSource" class="display-table"&gt;
      &lt;!-- Checkbox Column --&gt;
      &lt;ng-container matColumnDef="select"&gt;
       &lt;mat-header-cell *matHeaderCellDef&gt;
        &lt;mat-checkbox (change)="$event ? masterToggle() : null"
                    [checked]="userSelection.hasValue() &amp;&amp; isAllSelected()"
                    [indeterminate]="userSelection.hasValue() &amp;&amp; !isAllSelected()" [aria-label]="checkboxLabel()"&gt;
        &lt;/mat-checkbox&gt;
       &lt;/mat-header-cell&gt;&gt;
       &lt;mat-cell *matCellDef="let row"&gt;
         &lt;mat-checkbox (click)="$event.stopPropagation()" (change)="$event ? userSelection.toggle(row) : null"
                    [checked]="userSelection.isSelected(row)" [aria-label]="checkboxLabel(row)"&gt;
         &lt;/mat-checkbox&gt;
       &lt;/mat-cell&gt;&gt;
      &lt;/ng-container&gt;
      &lt;!-- recepientName Column --&gt;
      &lt;ng-container matColumnDef="recepientName"&gt;
       &lt;mat-header-cell *matHeaderCellDef&gt; recepient Name &lt;/mat-header-cell&gt;
         &lt;mat-cell *matCellDef="let element"&gt; {{element.name}} &lt;/mat-cell&gt;
      &lt;/ng-container&gt;
      &lt;!-- recepientEmail Column --&gt;
      &lt;ng-container matColumnDef="recepientEmail"&gt;
       &lt;mat-header-cell *matHeaderCellDef&gt; recepient Email &lt;/mat-header-cell&gt;
         &lt;mat-cell *matCellDef="let element"&gt; {{element.email}} &lt;/mat-cell&gt;
       &lt;/ng-container&gt;
       &lt;mat-header-row *matHeaderRowDef="displayedColumns"&gt;&lt;/mat-header-row&gt;
       &lt;mat-row *matRowDef="let row; columns: displayedColumns;"&gt;&lt;/mat-row&gt;
    &lt;/mat-table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I am able to get my previous selected list from <code>this.userSelection.selected</code></p>
  
  <p>My selection/previous selected List is below:</p>
  
  <pre><code>previous selected fields 
  0:
   email: "email1@example.com"
   name: "some name" 
  1:
   email: "email2@example.com"
   name: "some name"
  </code></pre>
  
  <p>How does this work? Any Idea? Thanks.</p>