Toast

The NgOatToast service wraps window.ot.toast() for imperative, non-blocking notifications.

MethodSignatureDescription
show()(msg, variant?, opts?)Show a toast
success()(msg, opts?)Success toast
info()(msg, opts?)Info toast
warning()(msg, opts?)Warning toast
error()(msg, opts?)Error toast
dismiss()()Dismiss all toasts

Import & Usage

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

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

  showToast() {
    this.toast.success('Operation completed!');
    this.toast.error('Something went wrong.');
    this.toast.show('Custom toast', 'Title', {
      variant: 'info',
      duration: 5000,
      dismissible: true,
    });
  }
}

Variants

html
toast.success('Operation succeeded!');
toast.info('Here is some info.');
toast.warning('This is a warning!');
toast.error('Something went wrong.');

Custom Duration

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

Custom Message

html
toast.show(message);

Dismiss All

html
toast.dismiss();

Dismissible Toasts

Pass dismissible: true to add a close button to the toast.

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

// Auto-dismiss + close button
toast.show('Auto-dismiss in 8s or click ✕', 'Closeable', {
  variant: 'success',
  dismissible: true,
  duration: 8000
});

// Error with close button
toast.show('Error! Click ✕ to dismiss.', 'Error', {
  variant: 'danger',
  dismissible: true,
  duration: 0
});