MatCheckbox preventDefault() and event.checked value

Question

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:

• https://github.com/angular/material2/issues/1142
• https://github.com/angular/angular/issues/2042
• https://github.com/angular/material2/issues/13156

Donne

you want to disable checkbox ? – Lebel

@Chellappan No, I want to manually change the value of the checkbox (checked or not checked). – Donne

Answer 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

Mangrove

Answer 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
}

Heartless

Note that this will change the default click action for ALL checkboxes within the provider scope, usually not what you want. – Newsmagazine

@Newsmagazine how can we do it for only a particular checkbox / restrict the scope? – Daron

@SnailCadet yes I would assume so – Newsmagazine

@Newsmagazine I was asking how, not if it's possible – Daron

Answer 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();
    }
  }

Schwa

Answer 4

try indeterminate

check
Toggle checked value of the checkbox, ignore indeterminate value. If the checkbox is in indeterminate state, the checkbox will display as an indeterminate checkbox regardless the checked value.

check-indeterminate
Default behavior of mat-checkbox. Always set indeterminate to false when user click on the mat-checkbox. This matches the behavior of native "input type="checkbox""

https://material.angular.io/components/checkbox/overview#-code-check-code-

Trinitrocresol

Answer 5

We cannot control the default behavior of checkbox and event properties. You can create 2 image icons with checked and unchecked state, toggle it based on value.

Hellraiser