@dignite/ng.notification-center

Angular UI library for the Dignite Notification Center — a notification bell (unread badge + dropdown) and a subscriptions management component, plus the ABP-generated API proxies (UserNotificationService + NotificationSubscriptionService + DTOs/enums) over /api/notification-center. It mirrors the module's MVC UI for Angular consumers and is packaged like ABP's own @abp/ng.* libraries: a main entry point plus a /config secondary entry point.

npm install @dignite/[email protected]

The npm package version stays in lockstep with the repository's NuGet package version.

Entry points

| Import | Contents | |---|---| | @dignite/ng.notification-center | NotificationBellComponent (<abp-notification-bell>), NotificationSubscriptionsComponent, the inbox page (NotificationInboxComponent + createRoutes()), and the ABP-generated inbox + subscription API proxies (UserNotificationService, NotificationSubscriptionService) + DTOs/enums. | | @dignite/ng.notification-center/config | provideNotificationCenterConfig() — registers the toolbar bell, the subscriptions settings tab and the (menu-hidden) /notifications route into the host — plus the eNotificationCenterRouteNames route-name enum. Call the provider once in app.config.ts. |

Usage

Register the menu contribution in the host's app.config.ts (mirrors provideIdentityConfig() etc.):

import { provideNotificationCenterConfig } from '@dignite/ng.notification-center/config';

export const appConfig: ApplicationConfig = {
  providers: [
    // ...ABP providers...
    provideNotificationCenterConfig(),
  ],
};

When the SignalR hub is not under the same remote service URL as the generated Notification Center REST proxy, configure it once with the same provider. hubPath is appended to the NotificationCenter remote API URL; hubUrl is a fully resolved override:

provideNotificationCenterConfig({
  realtime: {
    hubPath: '/signalr-hubs/notifications',
    // hubUrl: 'https://notifications.example.com/signalr-hubs/notifications',
  },
});

Inbox page

The inbox lists the user's notifications under group tabs with unread counts, with an all/unread filter, paging, per-item delete, "mark all as read" and "clear read". Clicking an item marks it read and follows its entity link; the item stays listed. Mount its lazy routes at /notifications — the path the config package registers, hidden from the main menu because the page is reached from the bell:

// app.routes.ts
{
  path: 'notifications',
  loadChildren: () => import('@dignite/ng.notification-center').then(c => c.createRoutes()),
},

Replace the page through ABP's ReplaceableComponentsService with the eNotificationCenterComponents.Notifications key. After the page marks or deletes notifications it emits NotificationCenterEventsService.inboxChanged$, which the bell uses to refresh its badge.

Use the subscriptions component in a page:

import { NotificationSubscriptionsComponent } from '@dignite/ng.notification-center';

@Component({
  imports: [NotificationSubscriptionsComponent],
  template: `
    <abp-notification-subscriptions />
  `,
})
export class MyNotificationsPage {}

The toolbar bell is registered by provideNotificationCenterConfig(). It loads its initial count/list once, then listens to the application-scoped NotificationRealtimeService. Multiple bells or pages share one SignalR connection; mounting and destroying components only reference-counts that shared runtime and cannot accumulate duplicate ReceiveNotification handlers. SignalR is only a prompt: ReceiveNotification, reconnect, token renewal, login/logout, and tenant/account changes all invalidate the bell and trigger authoritative REST refreshes for unread count/list state. The hub endpoint follows ABP's SignalR convention and is mapped server-side by ABP. Angular uses the Microsoft SignalR client, as ABP's SignalR documentation directs non-MVC clients to do.

Advanced hosts can inject NotificationRealtimeService directly to observe refreshRequested$ and lifecycle$, or call requestRefresh() after local user actions that should resynchronize notification UI.

Custom notification bodies and entity links

The bell keeps the notification title and time in a fixed header row. The body below it is rendered by the notification data discriminator; register custom body components with NotificationDataComponentsService.

Notifications are not required to be navigable. The bell lists the ten most recent notifications, read and unread (unread ones highlighted; the badge counts only unread), with a "View all" link to the inbox page. Clicking an item marks it as read in place and updates the badge; the item stays listed, rendered as read. If a resolver is registered for the item's entityTypeName, the bell marks it as read and navigates through Angular Router so the SPA is not reloaded:

import { inject, provideAppInitializer } from '@angular/core';
import { NotificationEntityLinksService } from '@dignite/ng.notification-center';

provideAppInitializer(() => {
  inject(NotificationEntityLinksService).register('MyApp.Order', notification => [
    '/orders',
    notification.entityId,
  ]);
});

Return a Router commands array, a UrlTree, or an app-relative URL string. External URLs still use normal browser navigation.

Structure

The config entry follows ABP's own convention (see @abp/ng.identity/config):

config/src/
├── enums/route-names.ts   # eNotificationCenterRouteNames (menu name = localization key)
├── providers/
│   ├── route.provider.ts                     # routes
│   ├── nav-item.provider.ts                  # toolbar bell
│   ├── setting-tab.provider.ts               # subscriptions settings tab
│   └── notification-center-config.provider.ts # provideNotificationCenterConfig()
└── public-api.ts

The proxy is generated — don't hand-edit

Everything under src/lib/proxy/ is produced by abp generate-proxy -t ng -m notification-center -s Host --target notification-center -a NotificationCenter (run against a running backend). Hand-written code (components) lives outside proxy/ so it survives regeneration.

Building

From the angular/ workspace root:

ng build notification-center

This emits both entry points — dist/notification-center (main) and dist/notification-center/config.

During local development the demo app consumes this library from source: the TypeScript path aliases in angular/tsconfig.json point at src/public-api.ts (and config/src/public-api.ts), so you don't need to pre-build the library or set up any symlinks to see your edits — just ng serve the host app.

Publishing

Tagged repository releases build, smoke-test, and publish this package automatically. Pre-releases use npm's next dist-tag and stable releases use latest. npm requires every package to have a latest tag, so the initial pre-release temporarily owns both tags until the first stable release. Do not publish a different npm version manually. For a local package inspection, run npm pack ./dist/notification-center from the angular/ workspace after building.