@@ -86,3 +86,69 @@ export class TestComponent {
8686 phoenixMenuRoot = new PhoenixMenuNode (' Phoenix Menu' , ' phoenix-menu' );
8787}
8888```
89+
90+ ## Services
91+
92+ ### NotificationService
93+
94+ ` NotificationService ` provides user-facing notifications with four severity levels and configurable auto-dismiss durations. It replaces silent console errors with actionable feedback visible directly in the UI.
95+
96+ #### Severity levels and default durations
97+
98+ | Severity | Default duration | Behaviour |
99+ | --------- | ---------------- | ----------------------- |
100+ | ` success ` | 5000ms | Auto-dismisses |
101+ | ` info ` | 5000ms | Auto-dismisses |
102+ | ` warning ` | 8000ms | Auto-dismisses |
103+ | ` error ` | 0ms | Requires manual dismiss |
104+
105+ #### Usage
106+
107+ Inject ` NotificationService ` into any Angular component or service:
108+
109+ ``` ts
110+ import { NotificationService } from ' phoenix-ui-components' ;
111+
112+ @Component ({ ... })
113+ export class MyComponent {
114+ constructor (private notificationService : NotificationService ) {}
115+
116+ loadFile() {
117+ try {
118+ // ... load file
119+ this .notificationService .success (' File loaded successfully.' );
120+ } catch (error ) {
121+ this .notificationService .error (
122+ ' Could not parse event file. Please ensure it is valid JSON.' ,
123+ );
124+ }
125+ }
126+ }
127+ ```
128+
129+ To display notifications, subscribe to the service and store the unsubscribe function:
130+
131+ ``` ts
132+ private unsubscribe : () => void ;
133+
134+ ngOnInit () {
135+ this .unsubscribe = this .notificationService .subscribeToNotifications (
136+ (notification ) => {
137+ // notification.message — the text to display
138+ // notification.severity — 'success' | 'info' | 'warning' | 'error'
139+ // notification.duration — auto-dismiss duration in ms (0 = no auto-dismiss)
140+ },
141+ );
142+ }
143+
144+ ngOnDestroy () {
145+ this .unsubscribe ?.();
146+ }
147+ ```
148+
149+ A custom duration can be passed as an optional second argument:
150+
151+ ``` ts
152+ this .notificationService .warning (' Large file detected.' , 12000 );
153+ this .notificationService .error (' Connection lost.' , 10000 );
154+ ```
0 commit comments