Skip to main content

NotificationService

Create a notification. The notification will appear as a badge on the notification icon, which, when clicked, will show a dialog with all notification messages.

import {NotificationService, notify, notifyError, Priority} from '@nsx/ngx-glint-shared';

export class MyComponent {
private notificationService = inject(NotificationService)

showInfoMessage() {
this.notificationService.add(notify({
title: "Hello world",
priority: Priority.INFO
}))
}

showErrorMessage() {
this.notificationService.add(notify({
title: "Something went wrong",
priority: Priority.ERROR,
detail: "Click to refresh page",
onClick: () => window.location.reload()
}))
}

doTask() {
try {
// Task that can fail
} catch (e) {
this.notificationService.add(notifyError(e))
}
}

}

A notification can have the following fields:

  • id (default is a random UUID): Unique identifier
  • title: Short label for the notification.
  • subtitle: Some additional information.
  • detail: Detailed error message. Can be multiline. If the value is an array, the items are treated as separate lines. If the value is a string, it will be split on \n characters.
  • priority (default=ERROR): Priority of the notification
  • onClick: Function to execute when the user clicks the message.

Priorities

The priority defines the color of the message. When there are multiple messages, the badge on the notification icon will have the color of the highest priority among them.

  • ERROR: red
  • WARNING: orange
  • SUCCESS: blue
  • INFO: green
  • TRACE: gray