Let's talk toast..r

This should be a brief post, but famous last words of anyone who writes, right?

In Angular several projects I've used ngx-toastr to display quick toast style notifications to my users. If you're not familiar with the concept of toast messages, they are small notifications that usually display on one side of the screen. Typically, these are used to display messages like "Save successful" or "Please check form, and try again". They tend to allow unobtrusive indicators to the user about their actions.

Bootstrap 4 introduced their toast component, but I always felt it wasn't very usable in an Angular context. Ngx Toastr provides the means to abstract the toasting process and includes a style sheet override for Bootstrap 4.

Bootstrap 5 is the new hotness now though and the people at Bootstrap have removed deprecated functions and mixins causing the provided styles not to work.

I've recently updated one of my projects to Bootstrap 5 and worked out the changes needed to make things work again. For me, I don't use the provided context styled toasts provided by toastr (e.g. "success()", "error()") since the styling never felt like it fit quite right. Instead of use the much more flexible show method that takes a configuration object.

I've created a github repo as an example on how I use toastr to display toast messages like shown in the Bootstrap 5 documentation and ngx-bootstrap to display alert and confirmation modals.

The key to making toastr provide Bootstrap 5 style toast is in the BootstrapToast.ts file. This provides the html body of the toast with a few logic bits thrown in to change what pieces display based on if you provide a title, a message, or both.

Using it is very simple. You just need to provide the toast configuration as such config.toastComponent = BootstrapToast ;.