fix(material/sidenav): resolve changed after checked error

Fixes a "changed after checked" error in the sidenav due to state in the container being dependent on state from the individual sidenavs.

Author: crisbeto

src/material/sidenav/drawer.spec.ts

@@ -7,13 +7,7 @@ import {
   dispatchEvent,
   dispatchKeyboardEvent,
 } from '@angular/cdk/testing/private';
-import {
-  Component,
-  ElementRef,
-  ErrorHandler,
-  provideCheckNoChangesConfig,
-  ViewChild,
-} from '@angular/core';
+import {Component, ElementRef, ErrorHandler, ViewChild} from '@angular/core';
 import {
   ComponentFixture,
   TestBed,
@@ -30,24 +24,7 @@ import {MATERIAL_ANIMATIONS} from '../core';
 describe('MatDrawer', () => {
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      providers: [
-        {provide: MATERIAL_ANIMATIONS, useValue: {animationsDisabled: true}},
-        provideCheckNoChangesConfig({exhaustive: false}),
-      ],
-      imports: [
-        MatSidenavModule,
-        A11yModule,
-        BasicTestApp,
-        DrawerContainerNoDrawerTestApp,
-        DrawerSetToOpenedFalse,
-        DrawerSetToOpenedTrue,
-        DrawerDynamicPosition,
-        DrawerWithFocusableElements,
-        DrawerOpenBinding,
-        DrawerWithoutFocusableElements,
-        IndirectDescendantDrawer,
-        NestedDrawerContainers,
-      ],
+      providers: [{provide: MATERIAL_ANIMATIONS, useValue: {animationsDisabled: true}}],
     });
   }));
 
@@ -898,23 +875,6 @@ describe('MatDrawer', () => {
 });
 
 describe('MatDrawerContainer', () => {
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      providers: [provideCheckNoChangesConfig({exhaustive: false})],
-      imports: [
-        MatSidenavModule,
-        A11yModule,
-        DrawerContainerTwoDrawerTestApp,
-        DrawerDelayed,
-        DrawerSetToOpenedTrue,
-        DrawerContainerStateChangesTestApp,
-        AutosizeDrawer,
-        BasicTestApp,
-        DrawerContainerWithContent,
-      ],
-    });
-  }));
-
   it('should be able to open and close all drawers', fakeAsync(() => {
     const fixture = TestBed.createComponent(DrawerContainerTwoDrawerTestApp);
 
@@ -1211,13 +1171,6 @@ describe('MatDrawerContainer', () => {
   });
 });
 
-/** Test component that contains an MatDrawerContainer but no MatDrawer. */
-@Component({
-  template: `<mat-drawer-container></mat-drawer-container>`,
-  imports: [MatSidenavModule, A11yModule],
-})
-class DrawerContainerNoDrawerTestApp {}
-
 /** Test component that contains an MatDrawerContainer and 2 MatDrawer in the same position. */
 @Component({
   template: `

src/material/sidenav/drawer.ts

@@ -42,6 +42,7 @@ import {
   ViewChild,
   ViewEncapsulation,
   DOCUMENT,
+  signal,
 } from '@angular/core';
 import {fromEvent, merge, Observable, Subject} from 'rxjs';
 import {debounceTime, filter, map, mapTo, startWith, take, takeUntil} from 'rxjs/operators';
@@ -273,12 +274,12 @@ export class MatDrawer implements AfterViewInit, OnDestroy {
    */
   @Input()
   get opened(): boolean {
-    return this._opened;
+    return this._opened();
   }
   set opened(value: BooleanInput) {
     this.toggle(coerceBooleanProperty(value));
   }
-  private _opened: boolean = false;
+  private _opened = signal(false);
 
   /** How the sidenav was opened (keypress, mouse click etc.) */
   private _openedVia: FocusOrigin | null;
@@ -385,7 +386,7 @@ export class MatDrawer implements AfterViewInit, OnDestroy {
     });
 
     this._animationEnd.subscribe(() => {
-      this.openedChange.emit(this._opened);
+      this.openedChange.emit(this.opened);
     });
   }
 
@@ -576,11 +577,11 @@ export class MatDrawer implements AfterViewInit, OnDestroy {
     restoreFocus: boolean,
     focusOrigin: Exclude<FocusOrigin, null>,
   ): Promise<MatDrawerToggleResult> {
-    if (isOpen === this._opened) {
+    if (isOpen === this.opened) {
       return Promise.resolve(isOpen ? 'open' : 'close');
     }
 
-    this._opened = isOpen;
+    this._opened.set(isOpen);
 
     if (this._container?._transitionsEnabled) {
       // Note: it's importatnt to set this as early as possible,

src/material/sidenav/sidenav.spec.ts

@@ -1,21 +1,9 @@
-import {Component, provideCheckNoChangesConfig, ViewChild} from '@angular/core';
-import {TestBed, fakeAsync, tick, waitForAsync} from '@angular/core/testing';
+import {Component, ViewChild} from '@angular/core';
+import {TestBed, fakeAsync, tick} from '@angular/core/testing';
 import {By} from '@angular/platform-browser';
 import {MatSidenav, MatSidenavContainer, MatSidenavModule} from './index';
 
 describe('MatSidenav', () => {
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      providers: [provideCheckNoChangesConfig({exhaustive: false})],
-      imports: [
-        MatSidenavModule,
-        SidenavWithFixedPosition,
-        IndirectDescendantSidenav,
-        NestedSidenavContainers,
-      ],
-    });
-  }));
-
   it('should be fixed position when in fixed mode', () => {
     const fixture = TestBed.createComponent(SidenavWithFixedPosition);
     fixture.detectChanges();

src/material/sidenav/testing/sidenav-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, parallel} from '@angular/cdk/testing';
 import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
@@ -16,9 +16,6 @@ describe('MatSidenavHarness', () => {
     let loader: HarnessLoader;
 
     beforeEach(() => {
-      TestBed.configureTestingModule({
-        providers: [provideCheckNoChangesConfig({exhaustive: false})],
-      });
       fixture = TestBed.createComponent(DrawerHarnessTest);
       fixture.detectChanges();
       loader = TestbedHarnessEnvironment.loader(fixture);