@kit-ng-ui/notification

Corner-placed toast stack with title, description, and a per-toast click target. Six placements, six independent stacks.

pnpm add @kit-ng-ui/notification

@use '@kit-ng-ui/notification/styles' as notification;

Usage

import { inject } from '@angular/core';
import { KitNotificationService } from '@kit-ng-ui/notification';

@Component({ /* … */ })
export class MyFeature {
  private readonly notify = inject(KitNotificationService);

  publish(item: Item) {
    this.notify.success({
      message: 'Published',
      description: `${item.name} is now live.`,
      duration: 5000,
    });
  }
}

Per-call placement:

this.notify.warning({
  message: 'Session ending',
  description: 'You will be logged out in 1 minute.',
  placement: 'bottomLeft',
});

Stable key updates the existing notification in place:

this.notify.info({ message: 'Uploading…', key: 'upload' });
// later:
this.notify.success({ message: 'Upload complete', key: 'upload' });

Global config

this.notify.config_({
  duration: 6000,
  maxCount: 5,
  placement: 'topRight',
  top: 64,
  bottom: 24,
});

| Option | Description | Type | Default | | ----------- | -------------------------------------------------------------------- | ------------------------------------- | ------------ | | bottom | Distance from the bottom of the viewport in px (bottom* placements). | number | 24 | | duration | Default auto-close duration. 0 keeps open. | number | 4500 | | maxCount | Maximum notifications per placement. | number | Infinity | | placement | Default corner. | KitNotificationPlacement | 'topRight' | | top | Distance from the top of the viewport in px (top* placements). | number | 24 |

API — KitNotificationOptions

| Option | Description | Type | Default | | ------------- | -------------------------------------------------------------------------- | ------------------------------------------------- | ------------- | | className | Extra class on the notice element. | string | — | | description | Optional secondary line below the title. | string | — | | duration | Auto-close duration. 0 keeps open. | number | 4500 | | key | Stable key — reuse to update or destroy by key. | string | — | | message | Title (required). | string | — | | onClick | Called when the notice body is clicked. | () => void | — | | onClose | Called after the close animation finishes. | () => void | — | | placement | Override the global placement. | KitNotificationPlacement | 'topRight' | | type | Visual style. | 'success' \| 'info' \| 'warning' \| 'error' | 'info' |