Pfthb

I need to enable the submit button if checked the single check box from the "td" tag and its working fine when checked the master checkbox from "th" tag. Am using angular material. thanks in advance.

Find the Stackblitz link: https://angular-material2-5cgxqf.stackblitz.io/

app.component.html

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
 <!-- Checkbox Column -->
 <ng-container matColumnDef="select">
 <th mat-header-cell *matHeaderCellDef>
 <mat-checkbox (change)="$event ? masterToggle() : null"
 [checked]="selection.hasValue() && isAllSelected()"
 [indeterminate]="selection.hasValue() && !isAllSelected()"></mat-checkbox>
 </th>
 <td mat-cell *matCellDef="let row">
 <mat-checkbox (click)="$event.stopPropagation()"
 (change)="$event ? selection.toggle(row) : null"
 [checked]="selection.isSelected(row)"></mat-checkbox>
 </td>
 </ng-container>
</table>
/**Button*/

<button [disabled]="isButtonEnable">Submit</button>

app.component.ts

import SelectionModel from '@angular/cdk/collections';
import Component from '@angular/core';
import MatTableDataSource from '@angular/material';

isButtonEnable:boolean =true;
/** Whether the number of selected elements matches the total number of rows. */
 isAllSelected() 
 const numSelected = this.selection.selected.length;
 const numRows = this.dataSource.data.length;
 return numSelected === numRows;
 

 /** Selects all rows if they are not all selected; otherwise clear selection. */
 masterToggle() 
 if(this.isAllSelected())
 this.selection.clear();
 this.isButtonEnable = true;
 else
 this.dataSource.data.forEach(row => this.selection.select(row));
 this.isButtonEnable = false;
 
 

You should check for any change in any checkbox. If any of the checkbox is selected then it should enable the submit button. Add the below snippet.

 constructor()
 this.selection.changed.subscribe(item=>
 this.isButtonEnable = this.selection.selected.length == 0;
 )
 

Here is the working demo - https://stackblitz.com/edit/angular-material2-p8r4pe

app.component.html

<mat-checkbox (click)="SingleSelection(); $event.stopPropagation()"
 (change)="$event ? selection.toggle(row) : null"
 [checked]="selection.isSelected(row)">
 </mat-checkbox>

app.component.ts

SingleSelection()
 const numSelected = this.selection.selected.length;
 numSelected <= 0 ? this.isButtonEnable = false : this.isButtonEnable = true;
 

this also working fine and please find the link: https://stackblitz.com/edit/angular-material2-p8r4pe?file=app%2Fapp.component.ts