Toaster in Angular
Overview
Angular is a popular front-end framework for building web applications, and it offers a wide range of tools and components to enhance the user experience. One such component is the "Toast" component, which displays non-intrusive, transient notifications or messages to users. These Toastr notifications in Angular often provide feedback, alerts, or information without interrupting the user's workflow.
Creating Angular Toastr Notifications Examples
Basic
We advise a header and body to promote extendable and predictable toasts. Toast headers use display: flex, which makes content alignment simple thanks to our flexbox and margin tools.
Toastr notifications in Angular have very minimal necessary markup and are as flexible as you need them to be. We strongly recommend a dismiss button, only requiring a single element to contain your "toasted" information.
In this example, we'll create a simple Toastr notifications in Angular to display a message.
Translucent
You can customize the appearance of Toastr notifications, including making them translucent.
Here is an example for the same:
Stacking
Toastr supports stacking notifications by default. You can create multiple notifications, which stack on top of each other.
You can stack toasts by wrapping them in a c-toaster container, which will vertically add some spacing.
Custom content
You can customize the content of Toastr notifications. For example, you can include HTML content.
Remove sub-components from your toasts, make changes using tools, or add your own markup to personalize them. Here, we've simplified the toast by eliminating the built-in c-toast-header, adding a cButtonClose, and modifying the layout with some flexbox utilities.
Alternatively, you can also add additional controls and components to toasts.
Color schemes
You can customize the color scheme of Toastr notifications by using the toastClass option or creating your custom CSS classes.
Using our color and background utilities, you can develop toast color schemes based on the example mentioned. Here, we inserted and set color="primary". After adding the text-white class to the c-toast, we set the close button's white value to true. We remove the default border to create a clean edge.border-0.
Placement
You can control where Toastr notifications appear on the screen by using the positionClass option.
Place toasts where need them to show. The top right or top middle is often used for notifications.
API reference
Toast Module
| Component/Directive | Exported As | Inputs | Outputs |
|---|---|---|---|
| c-toast Component | cToast | - autohide: Auto hide the toast (boolean, default: true) - color: Sets the color context of the component to one of CoreUI’s themed colors (Colors, default: undefined) - delay: Delay for hiding the toast (ms, default: 5000) - fade: Apply a fade transition to the toast (boolean, default: true) - visible: Toggle the visibility of the component (boolean, default: false) | - visibleChange: Event emitted on visible change (boolean) - timer: Event emitted on the clock tick (seconds) |
| c-toast-body Component | cToastBody | N/A | N/A |
| c-toast-header Component | cToastHeader | - closeButton: Add a close button to the toast header (boolean, default: true) | N/A |
| c-toaster Component | cToaster | - placement: Toaster placement (string, default: 'top-end') - position: Toaster position (string | absolute |
| cToastClose Directive | cToastClose | - cToastClose: The toast to close (ToastComponent, required) | N/A |
This table provides a clear overview of the components, their exported names, input properties, and output events in the context of toast notifications in an Angular application.
Conclusion
- In conclusion, Toastr notifications in Angular are a valuable tool for enhancing the user experience in web applications.
- These notifications provide a non-intrusive way to convey important messages, feedback, or alerts to users.
- By utilizing libraries like ngx-toastr, developers can easily create and customize toast notifications with various styles, colors, and behaviors. Toastr notifications contribute to better user engagement and communication while maintaining a smooth user workflow. When used effectively, they can significantly improve the usability and responsiveness of Angular applications.