How do I change the position of toasts in ngx-sonner?

Set the position via the `position` prop on the ` ` component for all toasts, or dynamically per toast in the toast() call. Options include top-left, top-center, top-right, bottom-left, bottom-center, and bottom-right, as documented in the README.

Does ngx-sonner work with Angular Universal?

The README doesn't explicitly mention server-side rendering compatibility. Since toasts are client-side components, you might need to handle hydration carefully in Angular Universal to avoid issues like flash of unstyled content.

ngx-sonner vs ngx-toastr: which should I use?

ngx-sonner offers a more modern API with features like promise integration, Tailwind CSS support, and dynamic positioning, inspired by React's Sonner. ngx-toastr is older but has wider adoption in Angular. Choose ngx-sonner for advanced customization and async handling.

How to handle errors in promise toasts with ngx-sonner?

Use the `toast.promise()` method with an error callback that can be a function receiving the error object. This allows custom error messages based on the failure, as shown in the promise examples where error messages adapt to the result.

Can I use ngx-sonner with Angular Material?

Yes, but you'll need to style it to match Material Design, as ngx-sonner is unstyled by default in Tailwind mode. It can coexist, but for a seamless look, manual CSS or class overrides are required.

Is ngx-sonner accessible for screen readers?

Yes, it includes accessibility features like ARIA attributes and keyboard navigation. You can customize hotkeys and ensure proper focus management, though specific screen reader testing is recommended for complex use cases.

ngx-sonner — Angular Toast Notification Component

What is ngx-sonner?

ngx-sonner is an Angular library for displaying toast notifications—temporary, non-intrusive messages that provide user feedback. It is a direct port of the popular React library Sonner, offering a similar API and feature set tailored for Angular developers. The library solves the need for a consistent, customizable, and easy-to-integrate toast system in Angular applications.

Target Audience

Angular developers (version 17.3.0 and above) who need a robust toast notification solution for their web applications. It is particularly useful for teams building user-facing applications that require real-time feedback, alerts, or status updates.

Value Proposition

Developers choose ngx-sonner because it brings the proven design and extensive features of the React Sonner library to the Angular ecosystem. Its opinionated yet flexible API reduces boilerplate, while support for promises, custom components, and Tailwind CSS integration makes it adaptable to diverse project requirements.

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

Use Cases

Best For

Adding toast notifications to Angular applications with minimal setup
Displaying real-time feedback for user actions like form submissions
Showing async operation status (e.g., loading, success, error) with promise integration
Creating accessible toast systems with keyboard navigation support
Customizing toast appearance to match an application's design system
Implementing dismissible alerts or temporary messages in admin dashboards

Not Ideal For

Projects stuck on Angular versions below 17.3.0, as compatibility is strictly limited to newer releases
Teams already using Angular Material or similar UI kits with built-in toast components, seeking a more integrated solution
Applications requiring advanced mobile gestures like swipe-to-dismiss with custom thresholds or animations beyond basic support

Pros & Cons

Pros

Promise Integration

Automatically handles loading, success, and error states for async operations, reducing boilerplate code, as demonstrated in the promise toast examples with dynamic message functions.

Extensive Customization

Offers full control over appearance via inline styles, CSS classes, or unstyled Tailwind CSS mode, allowing per-toast or global styling configurations detailed in the styling section.

Accessibility Features

Includes keyboard navigation with default hotkeys (Alt+T) and customizable shortcuts, plus focus management for assistive technologies, enhancing usability as noted in the keyboard focus section.

Dynamic Positioning

Supports six screen positions for toasts, both globally and per-toast, enabling flexible placement without affecting other toasts, as shown in the dynamic position examples.

Cons

Angular Version Lock-in

Requires Angular 17.3.0 or higher, excluding legacy projects without upgrades, as specified in the compatibility table—a hard limitation for teams on older versions.

Complex Styling Setup

Achieving custom styles, especially with Tailwind CSS, demands additional configuration and understanding of the classes structure, which can be cumbersome compared to drop-in styled components.

Port from React

As a direct port of the React Sonner library, it may not fully leverage Angular-specific optimizations like change detection, potentially leading to subtle performance issues in complex apps.

What is ngx-sonner?

Target Audience

Value Proposition

Use Cases

Best For

Adding toast notifications to Angular applications with minimal setup
Displaying real-time feedback for user actions like form submissions
Showing async operation status (e.g., loading, success, error) with promise integration
Creating accessible toast systems with keyboard navigation support
Customizing toast appearance to match an application's design system
Implementing dismissible alerts or temporary messages in admin dashboards

Not Ideal For

Projects stuck on Angular versions below 17.3.0, as compatibility is strictly limited to newer releases
Teams already using Angular Material or similar UI kits with built-in toast components, seeking a more integrated solution
Applications requiring advanced mobile gestures like swipe-to-dismiss with custom thresholds or animations beyond basic support

Pros & Cons

Pros

Promise Integration

Automatically handles loading, success, and error states for async operations, reducing boilerplate code, as demonstrated in the promise toast examples with dynamic message functions.

Extensive Customization

Offers full control over appearance via inline styles, CSS classes, or unstyled Tailwind CSS mode, allowing per-toast or global styling configurations detailed in the styling section.

Accessibility Features

Includes keyboard navigation with default hotkeys (Alt+T) and customizable shortcuts, plus focus management for assistive technologies, enhancing usability as noted in the keyboard focus section.

Dynamic Positioning

Supports six screen positions for toasts, both globally and per-toast, enabling flexible placement without affecting other toasts, as shown in the dynamic position examples.

Cons

Angular Version Lock-in

Requires Angular 17.3.0 or higher, excluding legacy projects without upgrades, as specified in the compatibility table—a hard limitation for teams on older versions.

Complex Styling Setup

Achieving custom styles, especially with Tailwind CSS, demands additional configuration and understanding of the classes structure, which can be cumbersome compared to drop-in styled components.

Port from React

As a direct port of the React Sonner library, it may not fully leverage Angular-specific optimizations like change detection, potentially leading to subtle performance issues in complex apps.

ngx-sonner

What is ngx-sonner?

Overview

Use Cases

Best For

Not Ideal For

Pros & Cons

Pros

Cons

Frequently Asked Questions

Related Projects

Found a gem we're missing?

ngx-sonner

What is ngx-sonner?

Overview

Use Cases

Best For

Not Ideal For

Pros & Cons

Pros

Cons

Frequently Asked Questions

Related Projects

Found a gem we're missing?