@flusys/ng-notification

Real-time notification UI for FLUSYS — Socket.IO WebSocket client, signal-based state, notification bell widget injected into the layout topbar.

Installation

npm install @flusys/ng-notification socket.io-client

1. Register Providers

Call provideNotificationProviders() in app.config.ts. This registers the bell component into the layout topbar via LAYOUT_NOTIFICATION_BELL — no layout package dependency on ng-notification.

// app.config.ts
import { provideNotificationProviders } from '@flusys/ng-notification';

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

2. Add Notification Route

// app.routes.ts
import { NOTIFICATION_ROUTES } from '@flusys/ng-notification';

export const routes: Routes = [
  {
    path: 'notifications',
    loadChildren: () => NOTIFICATION_ROUTES, // full notification list page, requires auth
  },
];

3. Connect the WebSocket After Login

NotificationSocketService.connect() requires the JWT access token. Call it after authentication is confirmed — typically from an auth bridge service.

import { NotificationStateService } from '@flusys/ng-notification';

@Injectable({ providedIn: 'root' })
export class AuthNotificationBridge {
  private readonly notifState = inject(NotificationStateService);

  onUserLoggedIn(accessToken: string): void {
    this.notifState.connectSocket(accessToken); // connects Socket.IO, loads unread count
  }

  onUserLoggedOut(): void {
    this.notifState.disconnectSocket();
  }
}

The socket connects to {apiBaseUrl}/notifications (or services.notification.socketUrl if set in APP_CONFIG).

4. Read Notification State

NotificationStateService is root-provided and exposes readonly signals.

import { NotificationStateService } from '@flusys/ng-notification';

@Component({ ... })
export class MyComponent {
  private readonly notifState = inject(NotificationStateService);

  readonly unreadCount = this.notifState.unreadCount;   // Signal<number>
  readonly notifications = this.notifState.notifications; // Signal<INotification[]>
  readonly isLoading = this.notifState.isLoading;       // Signal<boolean>
  readonly isConnected = this.notifState.isConnected;   // Signal<boolean>

  markRead(id: string): void {
    this.notifState.markAsRead(id);
  }

  markAll(): void {
    this.notifState.markAllAsRead();
  }

  loadPage(page: number): void {
    this.notifState.loadNotifications(page);
  }
}

Socket Events (Reference)

| Server event | Payload | Effect | |---|---|---| | notification:new | INotificationPayload | Prepended to list, unread count +1, PrimeNG toast shown | | notification:read | { id: string } | Marks item read, count -1 | | notification:read-all | — | All items marked read, count set to 0 |

Socket reconnects automatically up to 5 times (1 s delay, max 5 s) before stopping.

License

MIT © FLUSYS