TeqBench
Getting started

Show your first notification

3 min readupdated April 2026

The notification package is the lightest message surface in the @teqbench family — a thin, severity-aware wrapper around Angular Material's MatSnackBar. A single service call fires a toast with the right icon, color, and default duration for its severity tier.

This guide assumes you already followed Install & authenticate and Configure the severity theme. The notification package peer-depends on the severity theme, so the tokens it picks up are the ones that guide set up.

Install the package

npm install @teqbench/tbx-mat-notifications

Provide the notification config at bootstrap

The notification component needs a severity-icon resolver to render the leading icon for each tier. The package ships two that you can use directly: TbxMatNotificationSeverityFontIconService (Material Symbols ligatures) and TbxMatNotificationSeveritySvgIconService (inline SVGs). Wire one via the TBX_MAT_NOTIFICATION_PROVIDER_CONFIG injection token in app.config.ts:

import { bootstrapApplication } from '@angular/platform-browser';
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
import { provideTbxMatSeverityTheme } from '@teqbench/tbx-mat-severity-theme';
import {
  TBX_MAT_NOTIFICATION_PROVIDER_CONFIG,
  TbxMatNotificationSeverityFontIconService,
} from '@teqbench/tbx-mat-notifications';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, {
  providers: [
    provideAnimationsAsync(),
    provideTbxMatSeverityTheme({ invert: false }),
    {
      provide: TBX_MAT_NOTIFICATION_PROVIDER_CONFIG,
      useFactory: () => ({
        severityIconResolverService: new TbxMatNotificationSeverityFontIconService(
          'material-symbols-rounded',
        ),
      }),
    },
  ],
});

The 'material-symbols-rounded' argument picks a fontSet. If your app already provides MAT_ICON_DEFAULT_OPTIONS with a fontSet, you can drop the constructor argument and the service picks it up from there — see the icon-ligatures guide for the full cascade.

Fire your first notification

Inject the service anywhere and call one of the severity methods:

import { Component, inject } from '@angular/core';
import { TbxMatNotificationService } from '@teqbench/tbx-mat-notifications';

@Component({
  selector: 'app-save-button',
  template: `<button (click)="save()">Save</button>`,
})
export class SaveButtonComponent {
  private readonly notify = inject(TbxMatNotificationService);

  save(): void {
    void this.notify.success('Item saved.');
  }
}

The method returns a TbxMatNotificationRef synchronously — the leading void discards it when you don't need the handle. Other tiers work the same way:

this.notify.error('Upload failed.');
this.notify.warning('Connection unstable.');
this.notify.information('Version 2.3.1 is available.');
this.notify.help('Tip: drag files onto this panel to upload.');

Each tier resolves its icon, panel color, and CSS class from the severity theme you wired up in the previous guide. The default duration is 10 seconds; a leading severity icon and a trailing close button are rendered by default.

Customize a single call

Every convenience method accepts an optional config object. These are the fields you'll reach for most:

this.notify.success('Item saved.', {
  duration: 2000,
  showCountdown: true,
});

this.notify.error('Upload failed.', {
  duration: 0,             // indefinite — stays until dismissed
  showCloseButton: true,
});

this.notify.information('Release notes ready.', {
  showSeverityIcon: false,
});

duration <= 0 is indefinite — the notification stays visible until the user clicks the close button, the action button, or your code calls dismiss(). Setting duration <= 0 with showCloseButton: false and no action creates an undismissable notification — don't unless you're sure.

showCountdown: true renders a CSS-animated progress bar across the bottom edge that shrinks over the duration. Only has a visible effect when duration > 0.

Add an action button

Actions let the user respond inline (undo, retry, view). A longer duration gives them time to act:

this.notify.success('Item deleted.', {
  duration: 30_000,
  action: { label: 'Undo' },
});

That's the simplest form — a text-only action button. For icon-backed actions, register an icon resolver on the provider config's actionConfig.actionIconResolverService (see the package docs for the full shape).

React to dismissal

Every call returns a TbxMatNotificationRef. Its result promise resolves when the notification goes away — with a dismissReason you can switch on:

import {
  TbxMatNotificationDismissReason,
  TbxMatNotificationService,
} from '@teqbench/tbx-mat-notifications';

async onDelete(id: string): Promise<void> {
  const ref = this.notify.success('Item deleted.', {
    duration: 30_000,
    action: { label: 'Undo' },
  });

  const result = await ref.result;
  if (result.dismissReason === TbxMatNotificationDismissReason.Action) {
    await this.restore(id);
  }
}

The reasons cover every way a notification can leave the screen: Action, Close, Timeout, ProgrammaticDismissAll, ProgrammaticDismissCurrent. Use them to branch on whether the user acted, let the toast expire, or your code tore everything down.

Dismiss programmatically

dismiss() closes the active notification (leaving any queued behind). dismissAll() clears the queue too:

this.notify.dismiss();
this.notify.dismissAll();

Queued notifications dismissed via dismissAll() resolve their ref.result promise with ProgrammaticDismissAll without ever having rendered.

What to try next

  • Banners — for a heavier, in-flow message surface (dismissible, fixed width, can carry more text and multiple actions), see Show your first banner.
  • Custom icons — swap the shipped ligature or SVG services for your own (brand glyphs, different fontSet) via Use Material Symbols ligatures or Register inline SVG icons.
  • Inversion — provide the severity theme with invert: true to render notifications with the inverted palette across all tiers at once; see the end-to-end section on the severity-theme guide.
All guides