@slck/ngx-notify

Angular 21+ notification library — signal-based toast notifications & API response tray. Zero NgRx dependency.

Features

• Toast notifications — success, error, warning, info with auto-dismiss
• API notification tray — captures HTTP responses via an interceptor, groups & deduplicates messages
• Signal-based — fully reactive with Angular signals
• Dark/light mode — respects prefers-color-scheme automatically
• Zero dependencies beyond @angular/cdk (overlay)

Installation

npm install @slck/ngx-notify

Peer dependencies

"@angular/cdk": ">=21.0.0",
"@angular/common": ">=21.0.0",
"@angular/core": ">=21.0.0",
"rxjs": ">=7.0.0"

Setup

1. Register the provider

// app.config.ts
import { provideNgxNotify } from '@slck/ngx-notify';

export const appConfig: ApplicationConfig = {
  providers: [
    provideNgxNotify({
      toastDefaultDuration: 4000,   // ms, default 5000
      toastMaxCount: 3,             // max simultaneous toasts, default 3
      toastTopOffset: 16,           // px from top, default 16
      tray: {
        maxMessages: 15,            // default 10
        groupSimilarMessages: true, // deduplicate within 5s, default true
        autoCloseDuration: 0,       // ms, 0 = manual close (default)
      },
    }),
  ],
};

2. Add the tray component to your shell (optional — only if using the API tray)

<!-- app.component.html -->
<slck-api-notification-tray />

// app.component.ts
import { ApiNotificationTrayComponent } from '@slck/ngx-notify';

@Component({
  imports: [ApiNotificationTrayComponent],
  ...
})
export class AppComponent {}

Toast Notifications

Inject NotificationService anywhere and call one of the helper methods:

import { NotificationService } from '@slck/ngx-notify';

@Component({ ... })
export class MyComponent {
  private notify = inject(NotificationService);

  save() {
    this.notify.showSuccess('Saved successfully');
    this.notify.showError('Something went wrong', 'Retry', 8000);
    this.notify.showWarning('Low disk space');
    this.notify.showInfo('Sync in progress');
  }
}

Full options via show()

this.notify.show({
  message: 'Upload complete',
  type: 'success',       // 'success' | 'error' | 'warning' | 'info'
  duration: 6000,        // ms — 0 for persistent
  action: 'View',        // optional action label
});

Dismiss all

this.notify.dismissAll();

API Notification Tray

Register the interceptor

// app.config.ts
import { provideHttpClient, withInterceptors } from '@angular/common/http';
import { apiNotificationInterceptor } from '@slck/ngx-notify';

export const appConfig: ApplicationConfig = {
  providers: [
    provideHttpClient(withInterceptors([apiNotificationInterceptor])),
    provideNgxNotify(),
  ],
};

The interceptor automatically captures HTTP responses and errors and routes them to the tray.

Skip a specific request

Add the X-Skip-Notification header — it is stripped before the request is sent:

this.http.get('/api/health', {
  headers: { 'X-Skip-Notification': 'true' }
});

Interact with the tray programmatically

import { ApiNotificationService } from '@slck/ngx-notify';

@Component({ ... })
export class MyComponent {
  private tray = inject(ApiNotificationService);

  // Signals (read-only)
  unreadCount = this.tray.unreadCount;   // Signal<number>
  isVisible   = this.tray.isVisible;     // Signal<boolean>
  messages    = this.tray.messages;      // Signal<ApiNotificationMessage[]>
  primaryType = this.tray.primaryType;   // Signal<NotificationType>

  open()      { this.tray.show(); }
  close()     { this.tray.hide(); }
  clearAll()  { this.tray.clear(); }
  markRead()  { this.tray.markAllRead(); }
}

Configuration Reference

| Option | Type | Default | Description | |---|---|---|---| | toastDefaultDuration | number | 5000 | Auto-dismiss time in ms. 0 = persistent | | toastMaxCount | number | 3 | Max simultaneous toasts | | toastTopOffset | number | 16 | Top offset in px for toast container | | tray.maxMessages | number | 10 | Max messages stored in the tray | | tray.groupSimilarMessages | boolean | true | Deduplicate identical messages within 5s | | tray.autoCloseDuration | number | 0 | Auto-close tray after ms (0 = manual) |

Notification Types

| Type | Usage | |---|---| | 'success' | Successful operations | | 'error' | Failures, HTTP 4xx/5xx | | 'warning' | Non-critical alerts | | 'info' | Neutral information |

License

MIT