Angular5 Need function to check/uncheck mat-checkbox inside mat-table

Question

I can get checkboxes within the table to emit changes on check/uncheck, but am having troubles reciprocating when clicking on map pins to toggle checkbox states.

my table with map

Here's my table:

      <mat-table [dataSource]="dataSource">
        <ng-container matColumnDef="number">
          <mat-header-cell *matHeaderCellDef> Number </mat-header-cell>
          <mat-cell *matCellDef="let stock">
            // #myCheckbox needs to be unique
            <mat-checkbox #myCheckbox [checked] (change)="selectStock(stock, $event)"></mat-checkbox> <a href="">{{ stock.number }}</a>
          </mat-cell>
        </ng-container>
        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
        <mat-row *matRowDef="let row; columns: displayedColumns;" (click)="clickRow(row._id,$event)"></mat-row>
      </mat-table> 

Then from my map, when you click on a pin, run some function

  (click)="someFunction(myCheckbox)"

In my class

    @ViewChild('myCheckbox') private myCheckbox: MatCheckbox;

    someFunction(myCheckbox){
         if (stock.isChecked) {
            this.myCheckbox.checked = false;
            } else {
            this.myCheckbox.checked = true;
         }
    }        

This is the example I'm working off of but it's applying the same #id to each checkbox so only the first checkbox gets toggled (I'm assuming I need unique a unique id for each checkbox?)

• Angular mat-checkbox getElementById

Answer 1

After more searching on the site, I was able to fix the issue using ViewChildren

• Angular 4: setting the local variable # dynamically

• angular4 local variable issue for *ngFor

        @ViewChildren('myCheckbox') private myCheckboxes : QueryList<any>;
  
  
        someFunction(item, index){
  
            let myCheckboxes = this.myCheckboxes.toArray();
  
            if (item.isChecked) {
                myCheckboxes[index].checked = true;
            } else {
                myCheckboxes[index].checked = false;
            }
  
        } 
  

Good Stuff