NotificationCenter | Neural UI v2

Usage

Place NotificationCenter where users can reach the inbox and inject NeuNotificationService. push returns an id; remove deletes one message, markAllRead clears the unread count and clearAll empties the inbox. duration is milliseconds; 0 retains a notification. In this example the service is local so the two demos do not share messages.

Examples

Try this application-owned interaction. Its event handling and initial data are included in Code.

Messages: 0 · Unread: 0

Inspect service state

Try and configure

Change the public options, try the result and inspect the updated template. Code contains the complete executable implementation.

Messages: 0 · Unread: 0

Inspect service state

Duration (ms, 0 = persistent)

<div class="remaining-actions">
  <button neu-button (neuClick)="show()">
    {{ t("Add message", "Añadir mensaje") }}</button
  ><button neu-button variant="outline" (neuClick)="service.clearAll()">
    {{ t("Clear all", "Limpiar todo") }}</button
  ><button neu-button variant="ghost" (neuClick)="service.markAllRead()">
    {{ t("Mark all read", "Marcar todo leído") }}
  </button>
</div>
<neu-notification-center />

this.service.push({
  "tone": "info",
  "message": "Your report is ready",
  "title": "Workspace",
  "duration": 0
});

State and events

Place NotificationCenter where users can reach the inbox and inject NeuNotificationService. push returns an id; remove deletes one message, markAllRead clears the unread count and clearAll empties the inbox. duration is milliseconds; 0 retains a notification. In this example the service is local so the two demos do not share messages.

Accessibility and keyboard

Tab reaches the bell. Enter opens the inbox; Escape closes and restores focus. Read, clear and dismiss actions are normal buttons.

Key	Action
`Tab`	Reach the bell and available read, clear and dismiss actions.
`Enter`	On the bell, open the inbox; on an action button, execute that action.
`Space`	On the bell, open the inbox; on an action button, execute that action.
`Escape`	Close the inbox and restore focus.

API

Inputs, models and Outputs are extracted from the installed Core package. Named public types link to their definitions. Templates below include executable examples.

Templates

ng-content projects content into the component. TemplateRef inputs receive a template; ng-template directives identify templates with a typed context. A directive shared by an entrypoint is not necessarily a slot of this component.

This component does not expose content projection or public customization templates.

Public configuration

Name	Contract
`NeuNotificationService`	`export declare class NeuNotificationService { clearAll(): void; markAllRead(): void; push(opts: Partial<NeuNotificationOptions> & Pick<NeuNotificationOptions, 'message'>): string; remove(id: string): void; readonly notifications: import("@angular/core").WritableSignal<NeuNotification[]>; readonly unreadCount: import("@angular/core").Signal<number>; }`

Public Types

Open a type to inspect its definition and interface fields.

NeuIconKeyTypeScript

NeuNotificationTypeScript

import type { NeuIconKey } from '@neural-ui/core/foundation';
import type { NeuNotificationTone } from '@neural-ui/core/notification-center';

import type { NeuNotification } from '@neural-ui/core/notification-center';

// Public declaration (reference only)
export interface NeuNotification {
  duration?: number;
  icon?: NeuIconKey;
  id: string;
  message: string;
  read: boolean;
  timestamp: Date;
  title?: string;
  tone: NeuNotificationTone;
}

NeuNotificationOptionsTypeScript

import type { NeuNotification } from '@neural-ui/core/notification-center';

import type { NeuNotificationOptions } from '@neural-ui/core/notification-center';

// Public declaration (reference only)
export interface NeuNotificationOptions extends Omit<NeuNotification, 'id' | 'timestamp' | 'read'> {
}

NeuNotificationToneTypeScript

import type { NeuNotificationTone } from '@neural-ui/core/notification-center';

// Public declaration (reference only)
export type NeuNotificationTone = 'neutral' | 'success' | 'info' | 'warning' | 'danger';

Styles and tokens

Use the supported public tokens listed below. Surrounding layout belongs to your application; validate the result in light and dark modes and narrow containers.

Specific tokens

This component uses shared theme tokens rather than dedicated component hooks.

Shared tokens used

Override these on a local wrapper to affect this example. An override on :root affects other components that use the same token.

Token	Purpose here	Other impact	Default / fallback
`--neu-error`	Invalid field or danger-action color	Shared by other Core consumers; scope the override.	`#dc2626`
`--neu-focus-ring`	Normal keyboard-focus ring	Shared by other Core consumers; scope the override.	`0 0 0 var(--neu-focus-ring-width) rgba(0, 122, 255, 0.15)`
`--neu-primary`	Brand color for active controls and emphasis	Shared by other Core consumers; scope the override.	`#007aff`
`--neu-primary-dark`	Dark brand shade; outline and ghost Button text in the light theme	Shared by other Core consumers; scope the override.	`#005fcc`
`--neu-primary-light`	Light brand shade; outline and ghost Button text in the dark theme	Shared by other Core consumers; scope the override.	`#339dff`
`--neu-surface`	Main field, header or control surface	Shared by other Core consumers; scope the override.	`#ffffff`
`--neu-surface-2`	Secondary surfaces and alternating rows	Shared by other Core consumers; scope the override.	`#f1f5f9`
`--neu-text`	Main text and inherited icon color	Shared by other Core consumers; scope the override.	`#0f172a`

Related components

Use related components when your task requires a different interaction or a composed control.