Getting Started

Get started with Better Toast by following the steps below.

Installation

Install Better Toast using your favorite package manager.

Terminal

npm install better-toast

Add better-toaster to your app

Place the toaster in the root of your app. For all options, view the Better Toaster page.

app.ts

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 />
    <router-outlet />
  `,
})
export class App {}

Render a toast

For all options, view the Toast page.

app.ts

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!');
  }
}

Considerations

On this page