MatSnackBar Alert Deduplication Behavior in Angular

Direct Answers

1. Concurrent alert management: MatSnackBar has no built-in deduplication. Each open() call creates a new instance that stacks by default. You must implement a wrapper service to suppress duplicates.

2. Notification sound: MatSnackBar plays no default sound. Any audio alert requires custom code using the HTML5 Audio API or Web Audio API—there is no configuration option to mute because nothing plays by default.

3. Alert batching pattern: Use an RxJS Subject to collect messages, then bufferTime or debounceTime to combine them before opening a single snackbar, or queue sequentially via afterDismissed().

Deduplication Implementation

Create a singleton AlertService that wraps MatSnackBar and tracks recent message hashes with timestamps:

import { Injectable } from '@angular/core';
import { MatSnackBar, MatSnackBarRef, MatSnackBarConfig } from '@angular/material/snack-bar';
import { filter } from 'rxjs/operators';

@Injectable({ providedIn: 'root' })
export class AlertService {
  private recent = new Map<string, number>();
  private readonly DEDUP_WINDOW_MS = 3000;

  constructor(private snackBar: MatSnackBar) {}

  open(message: string, action?: string, config?: MatSnackBarConfig): MatSnackBarRef<any> | null {
    const key = `${message}|${action || ''}`;
    const now = Date.now();
    const last = this.recent.get(key);

    if (last && now - last < this.DEDUP_WINDOW_MS) {
      return null; // suppressed duplicate
    }

    this.recent.set(key, now);
    const ref = this.snackBar.open(message, action, config);

    ref.afterDismissed().subscribe(() => {
      // Clean up after dismissal to allow re-showing later
      const stored = this.recent.get(key);
      if (stored === last) this.recent.delete(key);
    });

    return ref;
  }
}

Adjust DEDUP_WINDOW_MS based on your UX requirements—too long hides legitimate retries, too short defeats deduplication.

Batching with RxJS

For high-frequency alerts (e.g., validation errors), buffer them into a single notification:

import { Subject } from 'rxjs';
import { bufferTime, filter, map } from 'rxjs/operators';

private alert$ = new Subject<string>();

constructor() {
  this.alert$.pipe(
    bufferTime(2000), // collect for 2 seconds
    filter(msgs => msgs.length > 0),
    map(msgs => msgs.length === 1 ? msgs[0] : `${msgs.length} issues: ${msgs.join('; ')}`)
  ).subscribe(msg => this.snackBar.open(msg, 'Dismiss', { duration: 5000 }));
}

notify(msg: string) { this.alert$.next(msg); }

For sequential display instead of combining, replace bufferTime with a queue that waits for afterDismissed() before opening the next.

Verification Steps

1. Confirm no default sound: Run a minimal StackBlitz with only MatSnackBar.open() and verify no audio plays.
2. Test deduplication window: Use fakeAsync/tick in unit tests to advance time past the window and assert open() returns a ref vs null.
3. Validate sequential queue: Subscribe to afterDismissed() and ensure the next alert opens only after the previous dismisses.
4. SSR guard: Wrap any MatSnackBar usage with isPlatformBrowser to avoid hydration errors in server-side rendered apps.

One Diagnostic Detail

What Angular Material version are you using? Deduplication behavior has been unchanged since v5, but confirming the version rules out any edge-case regressions in very recent releases.