'select deselect all mat-select dynamic

I need to select and deselect select options from a dynamic list. If I list all select box in a loop how can i do the select deselect process for each select box independently.

    import {MatOption, MatSelect} from "@angular/material";


    allSelected = false;

    @ViewChild('selectBox') sel: MatSelect;

    constructor() {}

  toggleAllSelection() {
  this.allSelected = !this.allSelected;
  
  if (this.allSelected) {
    this.sel.options.forEach( (item : MatOption) => item.select());
     } else {
       this.sel.options.forEach( (item : MatOption) => {item.deselect()});
     }
     this.sel.close();
   }
 }


  <tr *ngFor="let person of persons">
  <td>
      <mat-select #selectBox [formControl]="myFormControl" multiple>
        <mat-option [value]="0" (click)="toggleSelection()">All</mat-option>
        <mat-option *ngFor="let places of person" [value]="place">{{place.name}}
      </mat-option>
      </mat-select>
  <td>
  </tr>


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source