CODEWITHSUNDEEP
angularselectionangular7mat-table
HUSSAIN
HUSSAIN

Reputation: 640

How to prevent checkbox to be selected when click anywhere on row?

my row get selected when i click anywhere on the row even my radio button and slide toggle, i want it to be selected only when user clicks on checkbox

selection: SelectionModel<aproveTable> = new SelectionModel<aproveTable>(true, []);
@Output() approveSelectEvent: EventEmitter<aproveTable[]> = new EventEmitter<aproveTable[]>();
ngOnInit() {
        this.selection.changed.asObservable().subscribe(
            (value: SelectionChange<aproveTable>) => {
                this.approveSelectEvent.emit(this.selection.selected);
        });
    }

<ng-container matColumnDef="select">

                <th mat-header-cell *matHeaderCellDef>
                </th>
                <td mat-cell *matCellDef="let row">
                    <mat-checkbox (change)="$event ? selection.toggle(row) : null"
                    [checked]="selection.isSelected(row)">
                    </mat-checkbox>
                </td>

</ng-container>

enter image description here

Upvotes: 0

Views: 2835

Answers (3)

onik
onik

Reputation: 1631

From below line:

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

Remove:

(click)="selection.toggle(row)" -- remove this

by that, you are telling angular, whenever you click row selection has to be changed.

and 

<mat-checkbox (click)="changeSelection(row)" [checked]="selection.isSelected(row)">
</mat-checkbox>

write this, that only checkbox toggled selection, here's changeSelection method,

changeSelection(row){
  setTimeout(()=>{
    this.selection.toggle(row);
  })
}

Upvotes: 4

Daniel Pi&#241;eiro
Daniel Pi&#241;eiro

Reputation: 3159

Thanks to your stackblitz example I could see the error. You are making an extra toggle of the selection in the line 78 (click)="selection.toggle(row)", just get rid of it: 

      <tr mat-row *matRowDef="let row; columns: displayedColumns;">

Live example:

https://stackblitz.com/edit/angular-stack-55862476-materialrow?file=app/table-selection-example.html

Upvotes: 1

Ivan Blanar
Ivan Blanar

Reputation: 51

to use (click)="$event.stopPropagation()" on th and td helps. but here should be some more logical way

Upvotes: 0

Related Questions