Skip to content

Commit 0e2b9c2

Browse files
authored
Merge pull request #919 from deveshbervar/docs/notification-service-909-v2
docs(phoenix-ui-components): add NotificationService documentation (#909)
2 parents 75e97fc + 0319772 commit 0e2b9c2

1 file changed

Lines changed: 66 additions & 0 deletions

File tree

  • packages/phoenix-ng/projects/phoenix-ui-components

packages/phoenix-ng/projects/phoenix-ui-components/README.md

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -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

Comments
 (0)