acy-toastr

Lightweight toast notification package for Angular 21 apps.

Install

npm install acy-toastr

1) Register provider

In your app.config.ts:

import { ApplicationConfig } from '@angular/core';
import { provideToastr } from 'acy-toastr';

export const appConfig: ApplicationConfig = {
  providers: [
    provideToastr({
      defaultDurationMs: 3500,
      maxVisible: 4,
      newestOnTop: true
    })
  ]
};

2) Add outlet once

In your root component template:

<router-outlet />
<toastr-outlet />

In your root component TS:

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { ToastrOutletComponent } from 'acy-toastr';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, ToastrOutletComponent],
  templateUrl: './app.component.html'
})
export class AppComponent {}

3) Use service anywhere

import { Component, inject } from '@angular/core';
import { ToastrService } from 'acy-toastr';

@Component({
  selector: 'app-demo-button',
  standalone: true,
  template: `<button type="button" (click)="notify()">Notify</button>`
})
export class DemoButtonComponent {
  private readonly toast = inject(ToastrService);

  notify(): void {
    this.toast.success('Saved successfully', 'Done');
    this.toast.info('Background sync is running');
    this.toast.warning('Disk usage is getting high', 'Warning', { durationMs: 5000 });
    this.toast.error('Request failed', 'Error', { dismissible: true, durationMs: 0 });
  }
}

API

• provideToastr(config)
• ToastrService.success(message, title?, options?)
• ToastrService.error(message, title?, options?)
• ToastrService.warning(message, title?, options?)
• ToastrService.info(message, title?, options?)
• ToastrService.dismiss(id)
• ToastrService.clearAll()

Options:

interface ToastrOptions {
  durationMs?: number; // 0 means no auto dismiss
  dismissible?: boolean;
}