MatCheckbox preventDefault() and event.checked value

angular typescript event-handling angular-material2

10,013

Solution 1

If you want to check the check box manually @ViewChild get the ref of the element then use checked to set the value true or false like this

@ViewChild('ref') ref;

  onClick(bool){
    this.ref._checked=bool;
  }

Example:https://stackblitz.com/edit/matcheckbox-checked-ybru81

Same example while event handling: https://stackblitz.com/edit/matcheckbox-checked-a1le6o

Solution 2

You can prevent default action on "change" with a provider in the component:

providers: [{
    provide: MAT_CHECKBOX_DEFAULT_OPTIONS, 
    useValue: { clickAction: 'noop' } as MatCheckboxDefaultOptions
}]

(source: https://material.angular.io/components/checkbox/overview#noop)

and you can bind the checked to a local variable (or a getter function)

<mat-checkbox
(click)="changeValue()"
[checked]="theValue"
>
   Whatever
</mat-checkbox>

So, in the code, for examle, you use theValue as the value, and set that value programmatically. This way you do not need to receive the checkbox state as a parameter of the click method, you can access it from theValue.

theValue: boolean = false;

changeValue(): void {
    this.theValue = !this.theValue
}

Solution 3

In my personal case, I have to code for mouse and also for keyboard events, in case you care about accessibility you know :)

if you hit 'Space' it with still check, so (click) is not enough, you also need to include (keydown). No just that but after I fixed the issue with the Space, I noticed that it will also block the Tab which I need it to navigate with the keyboard, so I just had to add a little code for that

      <mat-checkbox [checked]="descendantsAllSelected(node)" 
        [indeterminate]="descendantsPartiallySelected(node)"
        (click)="toggleDescendants(node,$event)"
        (keydown)="toggleDescendants(node,$event)"
        >
        {{node.name}}
      </mat-checkbox>

In Code

  toggleDescendants(node, $event) {
    this._logger.debug('toggleDescendants()');
    this.treeControl.toggleDescendants(node);
    if ($event.code !== 'Tab') {
      $event.preventDefault();
    }
  }

10,013

szab.kel

Updated on June 04, 2022

Comments

szab.kel almost 2 years
How can I achieve a Material checkbox so It won't get checked/unchecked by default (eg. calling preventDefault() on the event) and also get the checked value from the event?

It seems like I can only achieve one of the conditions. Using the (click) event I cannot get the checkbox's value and using the (change) event I can't prevent the default checkbox value change (I will only change the checkbox value if the underlying HTTP request was successful).

Stackblitz: https://stackblitz.com/edit/matcheckbox-checked
```
<mat-checkbox 
  [checked]="checked"   
  (click)="onClick($event)"
>onClick me!</mat-checkbox>

<br/>

<mat-checkbox 
  [checked]="checked"
  (change)="onChange($event); false"
>onChange me!</mat-checkbox>

export class CheckboxOverviewExample {
  checked: boolean = false;

  onClick(event) {
    event.preventDefault();
    console.log('onClick event.checked ' + event.checked);
    console.log('onClick event.target.checked '+event.target.checked);
  }

  onChange(event) {
    // can't event.preventDefault();
    console.log('onChange event.checked '+event.checked);
  }
}
```
The (click) event prints undefined values, but successfully prevents the event propagation, the (change) event prints the value but will propagate the event.

Connected issues:
- Chellappan வ over 5 years
  
  you want to disable checkbox ?
- szab.kel over 5 years
  
  @Chellappan No, I want to manually change the value of the checkbox (checked or not checked).