mat-checkbox does not properly display checked value

Question

I am using the mat-checkbox component from Angular Material. But when I check on the checkbox, if I reference event.target.querySelector('input[type=checkbox"]').checked , it will tell me the value is false, and when I uncheck the checkbox, it will tell me the value is true. It should be the reverse.

Also, if I try to use ViewChild with mat-checkbox, it yields undefined. Therefore, I cannot reach the element using this.el.nativeElement .

I illustrate the issue with this isolated git repo:

https://github.com/lovefamilychildrenhappiness/AngularMaterialDefaultStyle/commit/4ab86c34adf9ee966981e7ca6afe14ca403fb9c1

Here is some relevant code from the repo:

// app.component.ts
@ViewChild('ref', {static: false}) el: ElementRef;

doSomething(e) {
    // this reads false when you check the checkbox and true when you uncheck the check box:
    console.log('checkbox checked? ', e.target.querySelector('input[type="checkbox"]').checked);

    // I can't even use ViewChild with mat-checkbox. It is undefined:
    // 'cannot read property nativeElement of undefined'
    console.log('the native element: ', this.el.nativeElement);

  }

 // app.component.html
 <mat-checkbox
 (click)="doSomething($event)"
 >Bladder</mat-checkbox
 > 

Why does event.target.querySelector('input[type=checkbox"]').checked give the wrong value? And why is this.el undefined?

Answer 1

with the the latest angular 8.0.0-rc.5, a breaking change was included where @ViewChild must define a static option.

In the angular 7 release (7.2.15) this option does not exist, causing a typescript error during compilation.

one workaround is to "cast" the options type to any

@ViewChild('ref', {static: false} as any) el: ElementRef;

For this.el undefined, it can be issue if your target element is inside a hidden element, then don't use *ngIf . Instead use a class to show/hide your element being hidden. You can read more here

For checked values to see true or false, you can try to use in this way:

onChange(item, event) {
  if (event.checked) {            
     // Add checked / true vlaues to array
      this.selectedValues.push((item));
      // use for loop to iterate values to check true or false and perform operations
     }
       else{
        //remove unchecked / false values
        let index = this.selectedValues.indexOf(item);
        this.selectedValues.splice(index, 1);
      }
  }

in html:

<mat-checkbox (change)="onChange(val1, $event)" [ngModel]="checkedVal">label1</mat-checkbox>

Answer 2

I assume click happens before checked value gets updated. Try with (change) event and add #ref to your checkbox

html

 <mat-checkbox #ref (change)="doSomething($event)">Bladder</mat-checkbox> 

ts

 doSomething(e) {
   console.log(e.target.checked, this.el.nativeElement);
   // true/false, HTMLInputElement
 }