Ngx Toastr

Overview

The ngx-toastr is a library for Angular that provides a customizable and versatile toast component for displaying messages to users. It offers features such as toast component injection, AoT compilation compatibility, animations using Angular’s Web Animations API, as well as the ability to output toasts to an optional target directive. The library supports lazy loading, has systemJS/UMD rollup bundle, and offers the latest version for each Angular version.

Features

• Toast Component Injection: Customize toast components without passing ViewContainerRef.
• High Performance: Fewer dirty checks for improved performance.
• AoT Compilation & Lazy Loading Compatible: Supports Ahead of Time compilation and lazy loading.
• Component Inheritance: Ability to inherit components for custom toasts.
• SystemJS/UMD Rollup Bundle: Provides compatibility with SystemJS and UMD rollup bundle.
• Animations using Angular’s Web Animations API: Enables animations using Angular’s Web Animations API.
• Optional Target Directive: Allows users to output toasts to an optional target directive.
• Dependency Management: Offers the latest version compatible with each Angular version.

Installation

To install the ngx-toastr library in your Angular project, follow these steps:

1. Add the @angular/animations package as a required dependency.
2. If not using animations, refer to the setup guide for Setup Without Animations.
3. Include the necessary CSS files in your project.

// Copy and include toastr.css in your project

4. Add ToastrModule to your app NgModule or provide Toastr to providers. Ensure you have BrowserAnimationsModule (or provideAnimations) as well.

Summary

ngx-toastr is a feature-rich Angular library that simplifies displaying toast messages to users. With its customizable options and support for various Angular versions, it offers developers a flexible and efficient solution for incorporating toast notifications in their applications. The library’s performance optimizations and compatibility with lazy loading and AoT compilation make it a valuable addition to Angular projects requiring interactive and responsive user feedback.