Toasts

Angular Bootstrap 5 Toast component

Responsive Toast built with Bootstrap 5, Angular and Material Design. Non-disruptive notification message in the corner of the interface. It provides quick 'at-a-glance' feedback on the outcome of an action.

Push notifications to your visitors with a 'toast', a lightweight and easily customizable toast message. Toasts are designed to mimic the push notifications that have been popularized by mobile and desktop operating systems.

Note: Read the API tab to find all available options and advanced customization

Basic example

Click the buttons to launch the toasts.

You can create toast dynamically from any component using a built-in service. To achieve this, follow these steps:

1. Create a new component with Angular CLI and add some HTML code to the template.

ng generate component toast

Inject and receive data

You can inject data to the toast by passing it to the data parameter in the toast options.

Here is an example showing how to use injected data in the toast component:

Receive data from the toast

You can receive data from the toast to use it in other components:

Here is an example showing how to use data received from toast in other components:

Static example

Colors

Create different toast color schemes with our color and background utilities.

Placement

You can set position of every notification using data-mdb-position attribute or update() method.

Offset

You can also change offset of every notification using offset option.

Stacking

You can turn on/off stacking your notifications using stacking option.

Related resources