How to change the position of toasts in ngx-toastr?

Set the positionClass option in global or individual configs, such as 'toast-top-right' or 'toast-bottom-left'. Configure it via ToastrModule.forRoot() or provideToastr() for standalone apps, as detailed in the options section.

How to create a custom toast component with ngx-toastr?

Extend the Toast class and override the toastComponent in global config. Declare your component in the module and set it in ToastrModule.forRoot({ toastComponent: YourToastComponent }), following the example from the pink.toast.ts demo.

ngx-toastr vs Angular Material snackbar: which is better?

ngx-toastr offers higher performance and customization without Angular animations, while Angular Material snackbar provides Material Design styling and deeper integration with Angular Material. Choose based on your app's design system and performance requirements.

How to handle click events on toasts in ngx-toastr?

Use the onTap observable returned by toastr service methods. Subscribe to it to execute actions when a toast is clicked, as shown in the FAQ with onTap.pipe(take(1)).subscribe(handler).

How to disable animations in ngx-toastr?

Override the default toast component with ToastNoAnimation by importing ToastNoAnimationModule and configuring it in your app module, as described in the 'Setup Without Animations' section for a simpler setup.

How to prevent duplicate toast messages in ngx-toastr?

Set preventDuplicates to true in global options. You can also use countDuplicates and resetTimeoutOnDuplicate for finer control, as outlined in the global options table.

Open-Awesome

ngx-toastr

MITTypeScriptv20.0.5

A customizable toast notification library for Angular applications with high performance and no external animation dependencies.

Visit Website GitHub

2.6k stars364 forks0 contributors

What is ngx-toastr?

ngx-toastr is an Angular library for displaying toast notifications—small, temporary pop-up messages that provide user feedback. It solves the need for a performant, customizable, and accessible notification system within Angular applications without relying on heavy animation libraries.

Target Audience

Angular developers building web applications that require user feedback mechanisms, such as success messages, error alerts, or informational updates.

Value Proposition

Developers choose ngx-toastr for its Angular-native design, high performance due to minimal change detection, and extensive customization options without external animation dependencies.

Overview

🍞 Angular Toastr

Use Cases

Best For

Adding toast notifications to Angular single-page applications
Displaying real-time user feedback like form submission success or errors
Creating custom-designed toast components that match application branding
Implementing accessible notifications with screen reader support
Applications requiring high-performance toast systems without animation overhead
Projects needing compatibility with AoT compilation and lazy loading

Not Ideal For

Applications requiring complex, built-in animations for notifications
Teams wanting plug-and-play notification libraries with zero CSS configuration
Projects using frontend frameworks other than Angular, like React or Vue
Environments where minimizing initial setup and dependency management is a top priority

Pros & Cons

Pros

High Performance Design

Avoids @for loops and @angular/animations to minimize Angular change detection overhead, reducing dirty checks and improving application speed, as highlighted in the README.

Extensive Customization Options

Supports component inheritance for creating fully custom toast components, allowing developers to tailor designs and layouts to match branding, with examples like pink.toast.ts.

Accessibility Built-In

Includes ARIA live regions for screen reader announcements and supports custom container directives, ensuring compliance with accessibility standards out of the box.

Angular Framework Compatibility

Works seamlessly with AoT compilation, lazy loading, and all modern Angular versions, as shown in the dependencies table, making it reliable for Angular projects.

Cons

Manual CSS Management Required

Developers must import and configure CSS files separately, adding setup complexity and potential for styling conflicts, as evidenced by the need to copy toastr.css or use SASS imports.

Limited Built-in Animation Support

The library avoids @angular/animations by default, requiring ToastNoAnimation or custom implementations for animated effects, which can be a barrier for teams needing rich, out-of-the-box animations.

Angular Version Dependencies

Specific ngx-toastr versions are tied to Angular versions, complicating upgrades and maintenance, as shown in the dependencies table with version mapping.

Frequently Asked Questions

Related Projects

ngx-sweetalert2

Declarative, reactive, and template-driven SweetAlert2 integration for Angular

Stars673

Forks99

Last commit1 month ago

hot-toast

🍞 Smoking hot toast notifications for Angular.

An opinionated toast component for Angular. A port of @emilkowalski's sonner.

Stars179

Forks14

Last commit1 year ago

grand-notifications

Framework/Library agnostic toasts for all js/ts frontend's

Stars20

Forks0