Toasts

Toasts are a way to show the user when an action is successful or not.

The ToastService is an injectable Angular service that manages and displays toast notifications in your application. It allows the registration of multiple toast streams and provides methods to trigger, display, and manage toast notifications.

Key Features:

• Toast Notification Management: Handles the display of toast messages with a customizable duration.
• Toast Streams: Registers and listens to multiple observable streams, automatically showing toast notifications when they emit.
• Automatic and Manual Removal: Toasts are automatically removed after 10 seconds or can be manually dismissed.

How to Use the ToastService

1. Display a Single Toast

You can display a toast notification immediately by calling the showToast() method and passing in the toast details:

toastService.showToast({ label: 'Operation Successful', type: 'success' });

• label: The message to display in the toast.
• type: The type of toast, which can be either 'success' or 'danger' (used for styling and conveying message urgency).

The toast will be displayed for 10 seconds and then automatically removed.

2. Register Multiple Toast Streams

The service can subscribe to multiple observables (streams) that emit toast messages. Whenever a stream emits, the toast will be shown for 10 seconds.

toastService.registerToastStreams([successStream$, errorStream$]);

Since we want to separate the state layer (which holds the values for the toasts) from the presentation layer (that has to show the toasts), we usually use toasts like this in the feat-shell-lib:

this.#toastService.registerToastStreams([
  this.#facadeService.topicStateMachine.toast$,
  this.#facadeService.pagedIdeaStateMachine.toast$,
  this.#facadeService.todoStateMachine.toast$,
  this.#facadeService.productStateMachine.toast$,
  this.#facadeService.channelStateMachine.toast$,
  this.#facadeService.recurringTaskStateMachine.toast$,
]);

• streams: An array of Observable<{ label: string; type: 'success' | 'danger' }> that emit toast notifications. Each emitted toast will be automatically shown for 10 seconds.

3. Close a Toast Manually

You can manually remove a specific toast by calling the closeToast() method with the ID of the toast:

toastService.closeToast(toastId);

• id: The ID of the toast to be removed. Each toast is assigned a unique ID when displayed.

4. Access Current Toasts

The service provides a readonly signal, toasts, that holds the list of currently displayed toast messages. This can be used to bind the toast data to your UI components:

const currentToasts = toastService.toasts();

• toasts: A signal that contains an array of toast objects, where each toast has a label, id, and type (success or danger).

Summary of Methods

• showToast(toast: { label: string; type: 'success' | 'danger' }): void: Instantly displays a toast notification.
• registerToastStreams(streams: Observable<{ label: string; type: 'success' | 'danger' }>[]): void: Registers multiple observable streams that emit toast notifications.
• closeToast(id: number): void: Closes a toast notification by its ID.
• toasts: Readonly signal: Provides access to the current list of displayed toasts.

---

Showing the toasts

To show the toasts we need to add the following to the HTML of the shell entry component:

<nitrokit-toast-container></nitrokit-toast-container>