Better Toast

Installation

npm install better-toast

Usage

Render the toaster in the root of your app.

import { BetterToaster, ToasterService } from 'better-toast';
import { inject, ChangeDetectionStrategy, Component} from '@angular/core';

@Component({
  selector: 'app-root',
  imports: [BetterToaster],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <better-toaster />
    <button (click)="showToast()">Show Toast</button>
    <router-outlet />
  `,
})
export class App {
  protected readonly toaster = inject(ToasterService);

  protected showToast(): void {
    this.toaster.show('Hello, world!');
  }
}

Types

You can customize the type of toast you want to render, and pass an options object as the second argument.

this.toaster.show('Default toast. A very super long message that should wrap.');

Position

You can customize the position of the toaster. Swipe direction and enter/exit animations change depending on the position.

<better-toaster position="bottom-right" />

Rich colors

When set to true, success, error, info, and warning variants adopt semantic background and border colors.

<better-toaster [richColors]="true" />

Other

Discover more features and options in the documentation.