Diagnosing MatSnackBar Auto‑Close Failures in Angular Material

Problem Overview

In many Angular Material applications the MatSnackBar appears as expected but never disappears after the duration you set. The message stays on screen until the user manually dismisses it or the page is refreshed. This is a subtle issue that can be caused by a handful of misconfigurations or styling conflicts.

Common Causes

• Missing BrowserAnimationsModule – Angular Material relies on the animation engine to trigger the hide transition.
• Incorrect duration value (0 or negative) – by design, a non‑positive duration disables auto‑close.
• Custom OverlayContainer that omits MatSnackBarContainer – the snack‑bar component cannot find its container to trigger the close animation.
• Global CSS that hides or overrides .mat-snack-bar-container animations or visibility.
• Runtime error from MatSnackBarService due to missing MatSnackBarModule import.

Diagnostic Table

Condition	Possible Cause	Check
Snack‑bar shows but never hides	Missing BrowserAnimationsModule or animation disabled	Inspect module imports and enableAnimations: false flag
Snack‑bar disappears immediately or not at all	Duration set to 0 or negative	Verify duration value passed to open()
Runtime error: MatSnackBarContainer not found	Custom OverlayContainer missing the container component	Check OverlayContainer provider implementation
Snack‑bar visible but hidden behind other UI	CSS overrides hiding .mat-snack-bar-container	Use browser dev tools to inspect computed styles

Ordered Checks & Fixes

1. Verify Module Imports

   Ensure both MatSnackBarModule and BrowserAnimationsModule are imported in the module that declares the component using the snack‑bar.

   import {MatSnackBarModule} from '@angular/material/snack-bar';
   import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
   
   @NgModule({
     imports: [
       MatSnackBarModule,
       BrowserAnimationsModule,
       // other imports
     ],
   })
   export class AppModule {}
   

   Run ng serve and confirm the snack‑bar auto‑closes. If it still hangs, proceed to step 2.

2. Check Duration Value

   Open the component that triggers the snack‑bar and confirm duration is a positive number.

   this.snackBar.open('Operation succeeded', 'Close', {
     duration: 3000, // 3 seconds
   });
   

   Note: duration: 0 or duration: -1 intentionally disables auto‑close.

3. Inspect Overlay Container

   If you provide a custom OverlayContainer (e.g., for theming or SSR), make sure it includes MatSnackBarContainer in its template.

   @Injectable()
   export class CustomOverlayContainer extends OverlayContainer {
     protected createContainer(): void {
       const container = document.createElement('div');
       container.classList.add('cdk-overlay-container');
       container.appendChild(document.createElement('mat-snack-bar-container'));
       this._containerElement = container;
       this._document.body.appendChild(container);
     }
   }
   

   Without this, the snack‑bar will render but the auto‑close animation never triggers.

4. Check Global CSS

   Open dev tools, locate an active snack‑bar element, and examine the .mat-snack-bar-container styles. Look for display: none, visibility: hidden, or overridden transition properties. Remove or adjust any conflicting rules.

5. Confirm Runtime Errors

   Open the browser console. A missing MatSnackBarModule will produce an error like MatSnackBarContainer is not a component. If you see this, re‑import the module in the appropriate NgModule.

Escalation Criteria

• After all checks, the snack‑bar still fails to auto‑close.
• The console shows animation-related errors (e.g., AnimationPlayer is not a function).
• The application uses a custom theme that overrides the mat-snack-bar-container class globally.

At this point, consider filing an issue on the Angular Components GitHub repo with a minimal reproduction, or consult the Angular Material documentation for advanced configuration.

Quick Reference Table

Check	Action
Import modules	MatSnackBarModule + BrowserAnimationsModule
Duration	Positive integer (ms)
Custom Overlay	Include MatSnackBarContainer
Global CSS	Remove overrides on .mat-snack-bar-container
Runtime error	Re‑import MatSnackBarModule

Practical Verification

After applying a fix, run ng serve and trigger the snack‑bar. Use the browser’s “Network” tab to confirm no error responses. In the “Elements” panel, watch the mat-snack-bar-container element appear and then disappear after the specified duration. If it disappears instantly, the duration was set to 0.

Limitations

• These diagnostics assume Angular 16+ and Angular Material 16+. Earlier versions may have subtle differences in API names.
• Custom theme overrides can be highly project‑specific; the guide covers only the most common patterns.
• Server‑side rendering (SSR) can affect the overlay container; ensure the container is created on the client side.