Installation
npm install ngx-sonner Usage
Render the toaster in the root of your app.
import { toast, NgxSonnerToaster } from 'ngx-sonner';
@Component({
selector: 'app-root',
imports: [NgxSonnerToaster],
template: `
<ngx-sonner-toaster />
<button (click)="toast('My first toast')">Give me a toast</button>
`,
})
export class AppComponent {
protected readonly toast = toast;
}Types
You can customize the type of toast you want to render, and pass an options object as the second argument.
toast('Event has been created')Position
Swipe direction changes depending on the position.
<ngx-sonner-toaster position="bottom-right" />Expand
You can change the amount of toasts visible through the visibleToasts input.
<ngx-sonner-toaster [expand]="false" />Other
//html
<ngx-sonner-toaster />
// ts
toast.success('Event has been created')