@nmrhub/notifications

A small, backend-agnostic Angular notification service shared across the NMRhub and USNAN projects. It shows the "glassmorphism" toast/snackbar those apps use, and renders through either Angular Material or PrimeNG — you install whichever your app already uses; neither is a hard dependency.

The core service owns the message model, the well-known API-error handling, and the post-dismissal navigation. The actual presentation is delegated to a pluggable NotificationRenderer, picked by importing one of the optional entry points.

Installation

npm install @nmrhub/notifications

Required peers (Angular 21): @angular/core, @angular/common, @angular/router, rxjs.

Optional peers — install only the one matching your chosen backend:

• Material backend: @angular/material, @angular/cdk
• PrimeNG backend: primeng

Usage

1. Provide a backend in your app config

Angular Material:

import { provideMaterialNotifications } from '@nmrhub/notifications/material';
import { environment } from './environments/environment';

export const appConfig: ApplicationConfig = {
  providers: [
    // ...
    provideMaterialNotifications({
      apiName: 'the NMRhub API',
      validRedirects: environment.validRedirects,
    }),
  ],
};

PrimeNG:

import { providePrimeNgNotifications } from '@nmrhub/notifications/primeng';

export const appConfig: ApplicationConfig = {
  providers: [
    // ...
    providePrimeNgNotifications({
      apiName: 'the NMRhub API',
      validRedirects: environment.validRedirects,
    }),
  ],
};

The PrimeNG backend additionally needs a <p-toast> rendered somewhere in your app template, plus the glass stylesheet (see PrimeNG styling):

<p-toast />

2. Inject and use the service

The service API is identical regardless of backend:

import { NotificationService } from '@nmrhub/notifications';

export class SomeComponent {
  private notifications = inject(NotificationService);

  save() {
    this.api.save().subscribe({
      next: response => this.notifications.sendMessageFromAPI(response),
      error: error => this.notifications.sendMessageFromAPIError(error),
    });
  }

  greet() {
    this.notifications.newMessage('Saved!', 'success', 5000);
  }
}

Configuration

provideMaterialNotifications / providePrimeNgNotifications accept a NotificationConfig:

| Field | Default | Description | |-------|---------|-------------| | validRedirects | [] | URL prefixes safe for a full browser navigation on navigate_to. Anything else routes via the Angular Router. | | navigate | — | Replace navigation entirely with your own callback (e.g. an existing redirect service). | | defaultTimeout | 15000 | Timeout (ms) applied to messages built from an API response. | | apiName | "the API" | Woven into the default error copy. | | errorMessages | composed | Override the 413 / 500 / generic error copy individually. | | colors | brand defaults | Per-type base colours (info/success/warning/error). |

Theming

Tints default to the NMRhub brand colours — blue info, green success, amber warning, red error — in both backends. The renderer applies the glass treatment (translucency + blur) on top of whatever base colour is in effect.

Override per type either through config:

providePrimeNgNotifications({
  colors: { success: '#1cac54', error: '#c0392b' },
})

…or directly via CSS custom properties (only the types you set are changed):

:root {
  --nmr-notify-info:    #1a87bd;
  --nmr-notify-success: #1cac54;
  --nmr-notify-warning: #d9a441;
  --nmr-notify-error:   #da5050;
}

The PrimeNG backend additionally falls back to the active theme palette (--p-blue-500, --p-green-500, …) when a type has no explicit override, before the brand colour. The Material backend uses the brand colour directly (Material exposes no suitable semantic success/warning tokens).

PrimeNG styling

Include the shipped glass stylesheet once, globally — e.g. in angular.json:

{
  "styles": [
    "node_modules/@nmrhub/notifications/assets/primeng-glass.css"
  ]
}

Exports

@nmrhub/notifications (core)

| Name | Kind | Description | |------|------|-------------| | NotificationService | service | The injectable service (newMessage, sendMessage, sendMessageFromAPI, sendMessageFromAPIError, clearMessage). | | NotificationMessage | class | The message model (constructor, fromAPI). | | NotificationApiResponse | interface | The API response envelope shape. | | NotificationType | type | 'info' \| 'success' \| 'warning' \| 'error'. | | NotificationConfig | interface | Host configuration shape. | | NotificationColors | type | Per-type colour overrides (Partial<Record<NotificationType, string>>). | | provideNotificationConfig | function | Provide just the config (for custom renderers). | | applyNotificationColorVars | function | Apply colors as --nmr-notify-* CSS vars (called by the built-in renderers). | | NotificationRenderer | abstract class | The pluggable presentation contract / DI token. | | NotificationHandle, RenderedNotification | interface | Renderer-facing types. |

@nmrhub/notifications/material

| Name | Kind | Description | |------|------|-------------| | provideMaterialNotifications | function | Wire up the Material backend. | | MaterialNotificationRenderer | class | The MatSnackBar-based renderer. | | GlassSnackBarComponent | component | The glassmorphism snackbar. |

@nmrhub/notifications/primeng

| Name | Kind | Description | |------|------|-------------| | providePrimeNgNotifications | function | Wire up the PrimeNG backend. | | PrimeNgNotificationRenderer | class | The MessageService-based renderer. |

Custom backends

Implement NotificationRenderer and provide it alongside provideNotificationConfig(...):

providers: [
  provideNotificationConfig({ apiName: 'the NMRhub API' }),
  { provide: NotificationRenderer, useClass: MyCustomRenderer },
]

Development

npm install
npm run build      # ng-packagr → dist/ (Angular Package Format, all entry points)

Publish with npm run release (clean build, then publishes the built dist/).