fix(material/checkbox): resolve change after checked error

Resolves a "change after checked" error when the `indeterminate` value is set on a checkbox.

Author: crisbeto

src/components-examples/material/checkbox/checkbox-harness/checkbox-harness-example.spec.ts

@@ -3,14 +3,12 @@ import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
 import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {MatCheckboxHarness} from '@angular/material/checkbox/testing';
 import {CheckboxHarnessExample} from './checkbox-harness-example';
-import {provideCheckNoChangesConfig} from '@angular/core';
 
 describe('CheckboxHarnessExample', () => {
   let fixture: ComponentFixture<CheckboxHarnessExample>;
   let loader: HarnessLoader;
 
   beforeEach(() => {
-    TestBed.configureTestingModule({providers: [provideCheckNoChangesConfig({exhaustive: false})]});
     fixture = TestBed.createComponent(CheckboxHarnessExample);
     fixture.detectChanges();
     loader = TestbedHarnessEnvironment.loader(fixture);

src/material/checkbox/checkbox.ts

@@ -26,6 +26,7 @@ import {
   numberAttribute,
   inject,
   HostAttributeToken,
+  signal,
 } from '@angular/core';
 import {
   AbstractControl,
@@ -261,7 +262,7 @@ export class MatCheckbox
   }
 
   ngAfterViewInit() {
-    this._syncIndeterminate(this._indeterminate);
+    this._syncIndeterminate(this.indeterminate);
   }
 
   /** Whether the checkbox is checked. */
@@ -298,26 +299,26 @@ export class MatCheckbox
    */
   @Input({transform: booleanAttribute})
   get indeterminate(): boolean {
-    return this._indeterminate;
+    return this._indeterminate();
   }
   set indeterminate(value: boolean) {
-    const changed = value != this._indeterminate;
-    this._indeterminate = value;
+    const changed = value != this._indeterminate();
+    this._indeterminate.set(value);
 
     if (changed) {
-      if (this._indeterminate) {
+      if (value) {
         this._transitionCheckState(TransitionCheckState.Indeterminate);
       } else {
         this._transitionCheckState(
           this.checked ? TransitionCheckState.Checked : TransitionCheckState.Unchecked,
         );
       }
-      this.indeterminateChange.emit(this._indeterminate);
+      this.indeterminateChange.emit(value);
     }
 
-    this._syncIndeterminate(this._indeterminate);
+    this._syncIndeterminate(value);
   }
-  private _indeterminate: boolean = false;
+  private _indeterminate = signal(false);
 
   _isRippleDisabled() {
     return this.disableRipple || this.disabled;
@@ -419,8 +420,8 @@ export class MatCheckbox
       // When user manually click on the checkbox, `indeterminate` is set to false.
       if (this.indeterminate && clickAction !== 'check') {
         Promise.resolve().then(() => {
-          this._indeterminate = false;
-          this.indeterminateChange.emit(this._indeterminate);
+          this._indeterminate.set(false);
+          this.indeterminateChange.emit(false);
         });
       }
 

src/material/checkbox/testing/checkbox-harness.spec.ts

@@ -1,4 +1,4 @@
-import {Component, provideCheckNoChangesConfig, signal} from '@angular/core';
+import {Component, signal} from '@angular/core';
 import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {HarnessLoader} from '@angular/cdk/testing';
 import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
@@ -11,11 +11,6 @@ describe('MatCheckboxHarness', () => {
   let loader: HarnessLoader;
 
   beforeEach(() => {
-    TestBed.configureTestingModule({
-      providers: [provideCheckNoChangesConfig({exhaustive: false})],
-      imports: [MatCheckboxModule, ReactiveFormsModule, CheckboxHarnessTest],
-    });
-
     fixture = TestBed.createComponent(CheckboxHarnessTest);
     fixture.detectChanges();
     loader = TestbedHarnessEnvironment.loader(fixture);