Angular material selection table, How to disable row selection on clicking on the row?

Question

I'm using Angular material selection table, The problem is that the check box is selected or deselected when i click any where on the row. I want to disable that so the checkbox will be selected or deselected only when i click on it.

HTML Code

   <div class="mat-elevation-z8">
    <table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
      <ng-container matColumnDef="select">
        <th mat-header-cell *matHeaderCellDef>
          <mat-checkbox (change)="$event ? masterToggle() : null"
                        [checked]="selection.hasValue() && isAllSelected()"
                        [indeterminate]="selection.hasValue() && !isAllSelected()"
                        [aria-label]="checkboxLabel()" color="primary">
          </mat-checkbox>
        </th>
        <td mat-cell *matCellDef="let row">
          <mat-checkbox (click)="$event.stopPropagation()"
                        (change)="$event ? selection.toggle(row) : null"
                        [checked]="selection.isSelected(row)"
                        [aria-label]="checkboxLabel(row)" color="primary">
          </mat-checkbox>
        </td>
      </ng-container>
      <!-- Position Column -->
      <ng-container matColumnDef="id">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> ID</th>
        <td mat-cell *matCellDef="let element"> {{element.id}} </td>
      </ng-container>

      <!-- Name Column -->
      <ng-container matColumnDef="candidates">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Candidates</th>
        <td mat-cell *matCellDef="let element" (click)="rowClicked()" class="candidateName"> {{element.candidates}} </td>
      </ng-container>

      <!-- Weight Column -->
      <ng-container matColumnDef="appliedFor">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Applied For</th>
        <td mat-cell *matCellDef="let element"> {{element.appliedFor}} </td>
      </ng-container>

      <!-- Symbol Column -->
      <ng-container matColumnDef="stages">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Stages</th>
        <td mat-cell *matCellDef="let element"> {{element.stages}} </td>
      </ng-container>

      <ng-container matColumnDef="owner">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Owner</th>
        <td mat-cell *matCellDef="let element"> {{element.owner}} </td>
      </ng-container>

      <ng-container matColumnDef="appliedDate">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Applied Date</th>
        <td mat-cell *matCellDef="let element"> {{element.appliedDate}} </td>
      </ng-container>

      <ng-container matColumnDef="status">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Status</th>
        <td mat-cell *matCellDef="let element"> {{element.status}} </td>
      </ng-container>


      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="selection.toggle(row)"></tr>
    </table>

    <mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
  </div>

I'm using Angular material selection table, The problem is that the check box is selected or deselected when i click any where on the row. I want to disable that so the checkbox will be selected or deselected only when i click on it.

ts code

import {ChangeDetectionStrategy, Component, OnInit, ViewChild} from '@angular/core';
import {MatPaginator} from '@angular/material/paginator';
import {MatTableDataSource} from '@angular/material/table';
import {MatSort} from '@angular/material';
import {SelectionModel} from '@angular/cdk/collections';
export interface PeriodicElement {
  id: number;
  candidates: string;
  appliedFor: string;
  stages: number;
  owner: string;
  appliedDate: string;
  status: string;
}
export interface Options {
  id: number;
  name: string;
}

const ELEMENT_DATA: PeriodicElement[] = [
  {id: 1, candidates: 'Max', appliedFor: 'Frontend Developer',
    stages: 3, owner: 'John', appliedDate: 'Jan, 24 2019', status: 'Hired'}
];

@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
  selector: 'app-candidates',
  templateUrl: './candidates.component.html',
  styleUrls: ['./candidates.component.css']
})

export class CandidatesComponent implements OnInit {

  displayedColumns: string[] = ['select', 'id', 'candidates', 'appliedFor', 'stages', 'owner', 'appliedDate', 'status'];
  dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);
  numSelected = 0;
  options: Options[];
  selectedOption: any;

  @ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
  @ViewChild(MatSort, {static: true}) sort: MatSort;
  selection = new SelectionModel<PeriodicElement>(true, []);

  constructor() {}

  ngOnInit() {
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
    this.options = [
      {id: 1, name: 'All Candidates'},
      {id: 1, name: 'Active'},
      {id: 1, name: 'Rejected'},
      {id: 1, name: 'Snoozed'}
    ];
    this.selectedOption = this.options[0];
  }
  isAllSelected() {
    this.numSelected = this.selection.selected.length;
    const numRows = this.dataSource.data.length;
    return this.numSelected === numRows;
  }
  masterToggle() {
    this.isAllSelected() ?
      this.selection.clear() :
      this.dataSource.data.forEach(row => this.selection.select(row));
  }
  checkboxLabel(row?: PeriodicElement): string {
    if (!row) {
      return `${this.isAllSelected() ? 'select' : 'deselect'} all`;
    }
    return `${this.selection.isSelected(row) ? 'deselect' : 'select'} row ${row.id + 1}`;
  }
  selectionChanged(option: Options) {
    this.selectedOption = option;
  }
  rowClicked() {
    console.log('candidates');
  }
}

Answer 1

You can just override the default click action and apply your logic there. It's similar to a question already answered in How to add click event on mat-row in angular material table

Added after your edit: In your code I see that you call the function selection.toggle(row) once in your mat-checkbox, and second time on row click (just before you close the table tag).

I think you meant to use rowClicked() in this row:

<tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="selection.toggle(row)"></tr>