### Install ngx-sonner
Source: https://github.com/tutkli/ngx-sonner/blob/master/README.md
Install the ngx-sonner package using your preferred package manager.
```bash
npm i ngx-sonner
# or
yarn add ngx-sonner
# or
pnpm add ngx-sonner
# or
bun add ngx-sonner
```
--------------------------------
### Basic App Setup with Toaster and Toast
Source: https://github.com/tutkli/ngx-sonner/blob/master/README.md
Integrate the NgxSonnerToaster component into your app's template and import the toast function to display toasts.
```typescript
import { toast, NgxSonnerToaster } from 'ngx-sonner';
@Component({
selector: 'app-root',
imports: [NgxSonnerToaster],
template: `
`
})
export class AppComponent {
protected readonly toast = toast;
}
```
--------------------------------
### Create a Toast with Custom Icon and Description
Source: https://github.com/tutkli/ngx-sonner/blob/master/README.md
Customize a toast with a specific icon component and a descriptive text.
```typescript
toast('Event has been created', {
description: 'Monday, January 3rd at 6:00pm',
icon: IconComponent
});
```
--------------------------------
### Create a Default Toast
Source: https://github.com/tutkli/ngx-sonner/blob/master/README.md
Display a basic toast message. Customization is possible by passing an options object as the second argument.
```typescript
toast('Event has been created');
```
--------------------------------
### Create an Info Toast
Source: https://github.com/tutkli/ngx-sonner/blob/master/README.md
Display a toast with an informational indicator, typically a question mark icon.
```typescript
toast.info('Event has new information');
```
--------------------------------
### Create a Success Toast
Source: https://github.com/tutkli/ngx-sonner/blob/master/README.md
Display a toast with a success indicator, typically a checkmark icon.
```typescript
toast.success('Event has been created');
```
--------------------------------
### Display a Loading Toast
Source: https://github.com/tutkli/ngx-sonner/blob/master/README.md
Show a toast with a loading spinner, useful for manual state management.
```typescript
toast.loading('Loading data');
```
--------------------------------
### Create a Headless Custom Toast
Source: https://github.com/tutkli/ngx-sonner/blob/master/README.md
Render an unstyled custom component toast using `toast.custom()`, allowing full control over the toast's appearance and behavior.
```typescript
@Component({
selector: 'app-custom',
template: `
This is a custom component
`
})
export class CustomComponent {
toastClick() {
console.log('Hello world!');
}
}
import { CustomComponent } from './custom.component';
tost.custom(CustomComponent);
```
--------------------------------
### Create a Warning Toast
Source: https://github.com/tutkli/ngx-sonner/blob/master/README.md
Display a toast with a warning indicator.
```typescript
toast.warning('Event has warning');
```
--------------------------------
### Configure Keyboard Focus Hotkey
Source: https://github.com/tutkli/ngx-sonner/blob/master/README.md
Customize the keyboard shortcut to focus on the toast area. Provide an array of 'event.code' values to override the default (⌥/alt + T).
```html
```
--------------------------------
### Configure Default Toast Duration
Source: https://github.com/tutkli/ngx-sonner/blob/master/README.md
Set the default duration for all toasts in milliseconds. To make a toast persistent, use Number.POSITIVE_INFINITY.
```html
```
--------------------------------
### Configure Toaster Expand and Visible Toasts
Source: https://github.com/tutkli/ngx-sonner/blob/master/README.md
Enable the expand effect for toasts and control the maximum number of toasts visible simultaneously. The default for visibleToasts is 3.
```html
```
--------------------------------
### Enable Rich Colors for Toasts
Source: https://github.com/tutkli/ngx-sonner/blob/master/README.md
Enhance the visual distinction of success and error toasts by enabling the 'richColors' prop.
```html
```
--------------------------------
### Style Toasts with Tailwind CSS (Global)
Source: https://github.com/tutkli/ngx-sonner/blob/master/README.md
Use the 'unstyled' prop with Tailwind CSS for flexible styling. Define custom classes for different toast elements via 'toastOptions.classes'.
```html
```
--------------------------------
### Configure Custom Offset for Toaster
Source: https://github.com/tutkli/ngx-sonner/blob/master/README.md
Adjust the distance of the toasts from the edges of the screen using the 'offset' prop.
```html
```
--------------------------------
### Configure Toaster Theme
Source: https://github.com/tutkli/ngx-sonner/blob/master/README.md
Set the visual theme for all toasts rendered by the Toaster component. The default theme is 'light'.
```html
```
--------------------------------
### Create an Error Toast
Source: https://github.com/tutkli/ngx-sonner/blob/master/README.md
Display a toast with an error indicator.
```typescript
toast.error('Event has not been created');
```
--------------------------------
### Provide Custom Icons to Toaster
Source: https://github.com/tutkli/ngx-sonner/blob/master/README.md
Replace default icons with custom ones by placing custom icon components within the ngx-sonner-toaster element.
```html
```
--------------------------------
### Create a Toast with a Cancel Button
Source: https://github.com/tutkli/ngx-sonner/blob/master/README.md
Add a secondary cancel button to a toast. Clicking it closes the toast and executes the provided callback.
```typescript
toast('My cancel toast', {
cancel: {
label: 'Cancel',
onClick: () => console.log('Cancel!'),
},
});
```
--------------------------------
### Create a Toast with an Action Button
Source: https://github.com/tutkli/ngx-sonner/blob/master/README.md
Add a primary action button to a toast. The callback can prevent the toast from closing by calling event.preventDefault().
```typescript
toast('My action toast', {
action: {
label: 'Action',
onClick: () => console.log('Action!')
}
});
```
--------------------------------
### Apply Global Styling to Toasts
Source: https://github.com/tutkli/ngx-sonner/blob/master/README.md
Style all toasts globally using the 'toastOptions' prop on the Toaster component. This allows setting inline styles or CSS classes.
```html
```
--------------------------------
### Handle Promise Resolution/Rejection in Toasts
Source: https://github.com/tutkli/ngx-sonner/blob/master/README.md
Display a toast that automatically updates its state based on a promise's resolution or rejection.
```typescript
toast.promise(() => new Promise((resolve) => setTimeout(resolve, 2000)), {
loading: 'Loading',
success: 'Success',
error: 'Error'
});
```
--------------------------------
### Toast - Custom Duration and Persistent Toast
Source: https://github.com/tutkli/ngx-sonner/blob/master/libs/ngx-sonner/README.md
Specify a custom duration for a toast or create a persistent toast by setting its duration to `Number.POSITIVE_INFINITY`.
```typescript
toast('Event has been created', {
duration: 10000
});
// Persisent toast
toa('Event has been created', {
duration: Number.POSITIVE_INFINITY
});
```
--------------------------------
### Style Toasts by Type with Tailwind CSS
Source: https://github.com/tutkli/ngx-sonner/blob/master/README.md
Apply specific Tailwind CSS classes to different toast types (error, success, warning, info) globally using 'toastOptions.classes'.
```html
```
--------------------------------
### Apply Specific Toast Styling
Source: https://github.com/tutkli/ngx-sonner/blob/master/README.md
Style individual toasts by passing style and class props directly to the toast() function. This overrides global settings.
```typescript
toast('Event has been created', {
style: 'background: red;',
class: 'my-toast',
descriptionClass: 'my-toast-description'
});
```
--------------------------------
### Render a Custom Component Toast
Source: https://github.com/tutkli/ngx-sonner/blob/master/README.md
Use a custom Angular component as the content for a toast, while retaining default styling and functionality.
```typescript
toast(CustomComponent);
```
--------------------------------
### Configure Specific Toast Duration
Source: https://github.com/tutkli/ngx-sonner/blob/master/README.md
Set the duration for an individual toast notification in milliseconds. Use Number.POSITIVE_INFINITY for persistent toasts.
```typescript
toast('Event has been created', {
duration: 10000
});
// Persisent toast
ttoast('Event has been created', {
duration: Number.POSITIVE_INFINITY
});
```
--------------------------------
### Add Close Button to Toasts
Source: https://github.com/tutkli/ngx-sonner/blob/master/README.md
Display a close button on all toasts, which appears when the user hovers over the toast, by adding the 'closeButton' prop.
```html
```
--------------------------------
### Style Toasts with Tailwind CSS (Individual)
Source: https://github.com/tutkli/ngx-sonner/blob/master/README.md
Apply Tailwind CSS classes to individual toasts by setting 'unstyled: true' and providing custom classes in the 'classes' object when calling toast().
```typescript
toast('Hello World', {
unstyled: true,
classes: {
toast: 'bg-blue-400',
title: 'text-red-400 text-2xl',
description: 'text-red-400',
actionButton: 'bg-zinc-400',
cancelButton: 'bg-orange-400',
closeButton: 'bg-lime-400',
},
})
```
--------------------------------
### Toast Close Callbacks
Source: https://github.com/tutkli/ngx-sonner/blob/master/README.md
Utilize onDismiss and onAutoClose callbacks to execute functions when a toast is manually dismissed or automatically closed after its duration.
```typescript
toast('Event has been created', {
onDismiss: (t) => console.log(`Toast with id ${t.id} has been dismissed`),
onAutoClose: (t) => console.log(`Toast with id ${t.id} has been closed automatically`),
});
```
--------------------------------
### Customize Promise Toast Messages with Result/Error
Source: https://github.com/tutkli/ngx-sonner/blob/master/README.md
Use functions for success and error messages in promise toasts to incorporate the promise's result or error data.
```typescript
toast.promise(promise, {
loading: 'Loading...',
success: (data) => {
return `${data.name} has been added!`;
},
error: 'Error'
});
```
--------------------------------
### Configure Toaster Position
Source: https://github.com/tutkli/ngx-sonner/blob/master/README.md
Set the default position for all toasts rendered by the Toaster component. The default position is 'bottom-right'.
```html
```
--------------------------------
### Update an Existing Toast
Source: https://github.com/tutkli/ngx-sonner/blob/master/README.md
Update a toast notification by providing its ID to the toast function. The rest of the parameters remain the same for the update.
```typescript
const toastId = toast('Sonner');
ttoast.success('Toast has been updated', {
id: toastId
});
```
--------------------------------
### Change Toast Position Dynamically
Source: https://github.com/tutkli/ngx-sonner/blob/master/README.md
Dynamically change the position of a toast notification. This change only affects the specific toast and not others.
```typescript
// Available positions:
// top-left, top-center, top-right, bottom-left, bottom-center, bottom-right
ttoast('Hello World', {
position: 'top-center',
});
```
--------------------------------
### Dismiss All Toasts Programmatically
Source: https://github.com/tutkli/ngx-sonner/blob/master/README.md
Remove all currently displayed toast notifications at once by calling toast.dismiss() without any arguments.
```typescript
toast.dismiss();
```
--------------------------------
### Dismiss Toast Programmatically
Source: https://github.com/tutkli/ngx-sonner/blob/master/libs/ngx-sonner/README.md
Dismiss a specific toast using its ID with `toast.dismiss(id)`. The `toast()` function returns the ID of the created toast. All toasts can be dismissed at once by calling `toast.dismiss()` without any arguments.
```typescript
const toastId = toast('Event has been created');
toa.dismiss(toastId);
```
```typescript
toast.dismiss();
```
--------------------------------
### Dismiss a Specific Toast Programmatically
Source: https://github.com/tutkli/ngx-sonner/blob/master/README.md
Dismiss a single toast notification using its ID. The toast() function returns the ID of the created toast.
```typescript
const toastId = toast('Event has been created');
ttoast.dismiss(toastId);
```
=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.