Ngx Sonner

Overview

The ngx-sonner is an opinionated toast component specifically designed for Angular applications, drawing inspiration from the popular React implementation by emilkowalski. This tool enables developers to seamlessly integrate customizable toast notifications that can enhance user experience through effective feedback mechanisms.

With its features catering to a broad range of use cases—whether it's conveying success, error, or other types of notifications—ngx-sonner is an essential addition for anyone looking to build responsive Angular applications. The component's ease of use and versatility make it a standout choice for developers aiming to improve their app's user-interface dynamics.

Features

• Dynamic Positioning: Easily change the toast's position on the screen by providing a position prop, ensuring optimum visibility without disturbing the layout.

• Customizable Toasts: Create toasts with customized icons and descriptions, including variations for success, info, warning, error, and action notifications.

• Promise Support: Utilize a loading state for toasts associated with asynchronous operations, automatically updating once the promise is resolved or rejected.

• Headless Component Option: Leverage the toast.custom() function to render unstyled toasts with custom components, while retaining the core functionalities.

• On Close Callbacks: Implement callbacks like onDismiss and onAutoClose to manage user interactions and automate behaviors as toasts appear or disappear.

• Programmatic Dismissal: Dismiss specific toasts or clear all toasts at once using simple commands, offering refined control over notification management.

• Rich Styling Support: Integrate with TailwindCSS or apply custom CSS for rich visual presentations of toasts, enhancing aesthetics while maintaining functionality.