@memberjunction/ng-notifications

Angular singleton service for managing user notifications in MemberJunction applications. Provides both temporary UI notifications (Kendo toasts) and persistent database-backed notifications via the User Notifications entity.

Installation

npm install @memberjunction/ng-notifications
Copy

Overview

The notification service acts as a centralized hub for all notifications across the application. It automatically subscribes to MemberJunction global events, manages real-time push notification updates via GraphQL WebSockets, and maintains an observable stream of unread notification counts.

flowchart TD
    subgraph Sources["Notification Sources"]
        A["Application Code"]
        B["MJGlobal Events"]
        C["Push Notifications (WebSocket)"]
    end
    subgraph Service["MJNotificationService (Singleton)"]
        D["CreateSimpleNotification()"]
        E["CreateNotification()"]
        F["Notification State"]
    end
    subgraph Outputs["Outputs"]
        G["Kendo UI Toast"]
        H["UserNotification Entity (DB)"]
        I["Notifications$ Observable"]
        J["UnreadCount$ Observable"]
    end

    A --> D
    A --> E
    B --> D
    C --> F
    D --> G
    E --> H
    F --> I
    F --> J

    style Sources fill:#2d6a9f,stroke:#1a4971,color:#fff
    style Service fill:#7c5295,stroke:#563a6b,color:#fff
    style Outputs fill:#2d8659,stroke:#1a5c3a,color:#fff
Copy

Usage

Module Import

import { MJNotificationsModule } from '@memberjunction/ng-notifications';

@NgModule({
  imports: [MJNotificationsModule]
})
export class YourModule {}
Copy

Simple (Transient) Notifications

import { MJNotificationService } from '@memberjunction/ng-notifications';

// Via singleton instance
MJNotificationService.Instance.CreateSimpleNotification(
  'Record saved successfully',
  'success',
  3000  // auto-hide after 3 seconds
);

// Error notification without auto-hide
MJNotificationService.Instance.CreateSimpleNotification(
  'Failed to load data',
  'error'
);
Copy

Persistent (Database) Notifications

const notification = await MJNotificationService.Instance.CreateNotification(
  'Report Ready',
  'Your monthly sales report has been generated',
  reportResourceTypeId,  // optional resource type ID
  reportId,              // optional resource record ID
  { format: 'pdf' },    // optional configuration JSON
  true                   // display UI notification immediately
);
Copy

Accessing Notification State

// All notifications
const all = MJNotificationService.UserNotifications;

// Unread only
const unread = MJNotificationService.UnreadUserNotifications;

// Unread count
const count = MJNotificationService.UnreadUserNotificationCount;

// Refresh from server
await MJNotificationService.RefreshUserNotifications();
Copy

API Reference

MJNotificationService

Notification Styles

Event Integration

The service automatically handles these MJGlobal events:

• MJEventType.LoggedIn -- Refreshes notifications and subscribes to push updates
• MJEventType.DisplaySimpleNotificationRequest -- Displays notifications from any part of the application
• MJEventType.ComponentEvent (UserNotificationsUpdated) -- Refreshes the notification list

Dependencies

• @memberjunction/core -- Metadata, UserInfo
• @memberjunction/core-entities -- UserNotificationEntity
• @memberjunction/global -- MJGlobal event system
• @memberjunction/graphql-dataprovider -- Push notification subscriptions
• @progress/kendo-angular-notification -- Toast notification rendering