bug(MatBottomSheet): zoneless - Expression has changed after it was checked #29258
Description
Is this a regression?
- Yes, this behavior used to work in the previous version
The previous version in which this bug was not present was
No response
Description
I am testing the experimental zoneless beauty of Angular 18 and it worked very well so far in our application.
I found one issue with the MatBottomSheet if you configure it to not automatically close in any case like so
this.matBottomSheet.open<MyBottomSheetComponent, MyBottomSheetConfig>(MyBottomSheetComponent, {
disableClose: true,
closeOnNavigation: true,
hasBackdrop: false,
and then open another MatBottomSheet instance while one is open already.
This will throw that exception:
Error: NG0100: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value for '@state': 'void'. Current value: 'visible'. Expression location: _MatBottomSheetContainer component. Find more at https://angular.dev/errors/NG0100
at throwErrorIfNoChangesMode (core.mjs:10210:11)
at bindingUpdated (core.mjs:19300:17)
at ɵɵsyntheticHostProperty (core.mjs:24470:9)
at MatBottomSheetContainer_HostBindings (bottom-sheet.mjs:101:14)
at definition.hostBindings (core.mjs:18762:13)
at processHostBindingOpCodes (core.mjs:11414:17)
at refreshView (core.mjs:13220:9)
at detectChangesInView (core.mjs:13386:9)
at detectChangesInViewWhileDirty (core.mjs:13081:9)
at detectChangesInternal (core.mjs:13060:9)
The reason I provided two buttons is, that it is exactly my use-case to open another bottom sheet (accepting the previous one gets closed then).
Reproduction
- Start the reproducer-project:
** https://stackblitz.com/github/imario42/zoneless-matbottomsheet-bug
** Repo: https://github.com/imario42/zoneless-matbottomsheet-bug.git - click on any button (this opens the bottom sheet)
- click on any button again (this closes the bottom sheet and prints the exception above)
Expected Behavior
The BottomSheet should close and the new one should open
Actual Behavior
The BottomSheet closes and the exception above is thrown.
Environment
- Angular: 18.0.3
- CDK/Material: 18.0.3
- Browser(s): Brave, Safari
- Operating System (e.g. Windows, macOS, Ubuntu): macOS