How to Create a Toast Service Using Angular 14 and Bootstrap 5
Introduce a common notification pattern to inform your users
In most web applications there is a requirement to display some kind of notifications to the user. A common UX pattern for this is so-called toast notifications.
A toast in this context can be simply explained as a piece of information that pops up somewhere on the screen. In this post, we want to have a look on how to create a service for sending Bootstrap 5 toast notifications using Angular 14.
Structure of the Toaster
Our Angular Toaster consists of the following three parts:
ToastServicethat provides the methods for sending the toastsToasterComponentthat takes care of managing and stacking current toastsToastComponentthat presents a single toast notification
Creating the Toast Service
First, we need to create the toast service that we can later call from our application to send different types of toasts.
For the service, we use RxJS to handle our toast events using Observables.
Building the Toaster Component
The toaster component takes care of managing and stacking the toasts. For this the toaster subscribes to our previously created toast service.
In the template of the component, we iterate over all current toast notifications to display them stacked among each other.
The toaster component should be included in the app.component.html of the Angular application to ensure toast notifications are always displayed when a toast event is fired.
Define and style the Toasts
Last but not least, we need to take care of the individual toasts themselves. A single toast mainly defines the methods to show and hide the notification. A small special feature at this point are the error toasts, because we don’t let them disappear automatically like the rest of the toasts do.
Regarding the styling of the toasts, you can also refer to the Bootstrap 5 Toast Documentation. Otherwise, you can also find the link to the full source code below.
The full source code is available on GitHub:
Deployed application on Vercel
To check out the running toaster application, there is a live version deployed on Vercel:
