Toast

Name: ng-oat
Author: SashiKumar Yadav

Non-blocking notifications with sonner-style stacking, positioning, and action buttons.

Method	Signature	Description
`show()`	`(msg, title?, opts?)`	Show a toast with full options
`success()`	`(msg, title?, opts?)`	Success variant
`info()`	`(msg, title?, opts?)`	Info variant
`warning()`	`(msg, title?, opts?)`	Warning variant
`error()`	`(msg, title?, opts?)`	Danger variant
`dismiss()`	`(placement?)`	Dismiss all (or by placement)

Import & Usage

typescript

import { Component, inject } from '@angular/core';
import { NgOatToast } from '@letsprogram/ng-oat/toast';

@Component({
  selector: 'app-example',
  template: `<button (click)="showToast()">Show Toast</button>`,
})
export class ExampleComponent {
  private toast = inject(NgOatToast);

  showToast() {
    this.toast.success('Saved!', 'Success');

    this.toast.show('Item deleted', 'Deleted', {
      variant: 'danger',
      action: { label: 'Undo', onClick: () => this.undo() },
    });
  }
}

Variants

html

toast.success('Operation succeeded!', 'Success');
toast.info('Here is some info.', 'Info');
toast.warning('This is a warning!', 'Warning');
toast.error('Something went wrong.', 'Error');

Stacking

Multiple toasts stack with a collapsed view. Hover over the stack to expand all toasts.

html

// Fire multiple toasts rapidly — they stack and collapse
// Hover over the stack to expand all toasts
const msgs = ['First', 'Second', 'Third', 'Fourth', 'Fifth'];
msgs.forEach((m, i) => {
  setTimeout(() => toast.show(m, `Event ${i + 1}`, { duration: 8000 }), i * 200);
});

Placement / Position

Pick a position on the screen to show toasts.

html

toast.show('Toast here', 'Placement', {
  placement: 'bottom-center', // top-left | top-center | top-right | bottom-left | bottom-center | bottom-right
});

Action Button

Toasts can include an action button for quick interactions.

html

// Delete with undo
toast.show('Item deleted', 'Deleted', {
  variant: 'danger',
  action: { label: 'Undo', onClick: () => restoreItem() },
});

// Network error with retry
toast.show('Failed to fetch', 'Network error', {
  variant: 'warning',
  dismissible: true,
  duration: 0,
  action: { label: 'Retry', onClick: () => retryRequest() },
});

Custom Duration

html

toast.show('Quick toast', undefined, { duration: 1000 });
toast.show('Long toast', undefined, { duration: 10000 });
toast.show('Persistent', undefined, { duration: 0, dismissible: true });

Dismissible Toasts

Pass dismissible: true to add a close button.

html

toast.show('You can close me!', 'Dismissible', {
  variant: 'info',
  dismissible: true,
  duration: 0,
});

Dismiss All

html

toast.dismiss();             // dismiss all
toast.dismiss('bottom-right'); // dismiss only bottom-right toasts