Toast for Angular

import { AuiToaster } from '@absoluteui/angular/toast';

Styles are included with the component. Behavior, keyboard and screen-reader support, design tokens, and limitations are described on the Toast page; this page covers the Angular API.

Example

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { provideAbsoluteUI } from '@absoluteui/angular';
import { provideAuiToaster } from '@absoluteui/angular/toast';
import { AppComponent } from './app.component';

bootstrapApplication(AppComponent, { providers: [provideAbsoluteUI(), provideAuiToaster({ position: 'top-end', max: 3 })] });

save-button.component.ts

import { Component, inject } from '@angular/core';
import { AuiToaster } from '@absoluteui/angular/toast';
import { AuiButton } from '@absoluteui/angular/button';

@Component({
  selector: 'app-save-button',
  imports: [AuiButton],
  template: `<button type="button" auiButton variant="primary" (click)="save()">Save</button>`,
})
export class SaveButtonComponent {
  private readonly toaster = inject(AuiToaster);

  save(): void {
    this.toaster.show({ tone: 'success', message: 'Changes saved' });
  }
}

AuiToaster

Injectable service.

Angular service for Toast notifications: inject(AuiToaster).show({ tone: 'success', message: 'Saved' }). The toaster region is created lazily in the browser; on the server show() returns null and renders nothing.

Methods

Method	Description
show(options: ToastOptions): ToastHandle | null	Show a toast; returns its handle (dismiss, update), or null on the server.
clear(): void	Dismiss every toast.

provideAuiToaster

provideAuiToaster(options: ToasterOptions): Provider

Configure the application toaster (position, max, duration, hotkey).