CODEWITHSUNDEEP
angularangular-materialmat-table
Rob
Rob

Reputation: 7217

How to programmatically set check state of mat-checkbox in mat-table?

I am using Angular with material and specifically, I'm building a table using mat-table. My table is simple, and has two columns - a name column and a "select" column (checkbox).

Here's my table component code:

    <mat-table #table [dataSource]="dataSource" matSort matSortActive="name">
  
      <ng-container matColumnDef="name">
        <mat-header-cell *matHeaderCellDef mat-sort-header> Name </mat-header-cell>
        <mat-cell *matCellDef="let element"> {{element.name}} </mat-cell>
      </ng-container>
  
      <ng-container matColumnDef="select">
        <mat-header-cell *matHeaderCellDef> Select </mat-header-cell>
        <mat-cell *matCellDef="let element"> 
        
          <mat-checkbox #checkBox [value]="element.position"(change)="getCheckbox(checkBox)"></mat-checkbox>
        
        </mat-cell>
      </ng-container>
  
      <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
      <mat-row (click)="setCheckedState()" *matRowDef="let row; columns: displayedColumns;"></mat-row>
    </mat-table>

I then collect a list of checked items using the following code:

  @ViewChildren ('checkBox') checkBox: QueryList<any> | undefined;

  checked: any = [];

  getCheckbox(checkbox: any){
    this.checked = []; // resetting each Time new event is fire.
    // filtering only checked vlaue and assign to checked variable.
    const checked = this.checkBox?.filter(checkbox => checkbox.checked);

    // then, we make object array of checked, and value by checked variable  
    checked?.forEach(data => {
      this.checked.push ({ 
        'checked' : data.checked,
        'value':  data.value
      });
    });
  }

Stackbliz example of getting a list of checked items found here: https://stackblitz.com/edit/angular-efyvdr?file=src%2Fapp%2Fapp.component.html

On the mat-table, what I'd like to be able to do is click the row to set the checked state of the checkbox on that row.

I tried this setting the click of the row (which does trigger) but can't seem to catch the checkbox for the row. How do I set the checked state (true/false) based on the mat-row click?

Thanks in advance for any pointers!

Upvotes: 0

Views: 17742

Answers (1)

Chad K
Chad K

Reputation: 952

The easiest way to do this is to create a class to hold the name and the status of the check box, similar to this:

export class ItemStatus {
  name: string;
  checked: boolean;
  id: number;

  constructor(id, name) {
    this.id = id;
    this.name = name;
    this.checked = false;
  }
}

Then, you change to use [(ngModel)] instead of [value] like so:<mat-checkbox [(ngModel)]="element.checked">

Then lastly, change the get checked function to filter based on the checked status, like so:

getCheckedItems() {
   this.checked = this.items.filter(i => i.checked == true);
}

To wrap it all up, here is a stackblitz: https://stackblitz.com/edit/angular-gg394h?file=src%2Fapp%2Fapp.component.html

Upvotes: 2

Related Questions