@kit-ng-ui/message

Imperative top-of-page toast — success / info / warning / error / loading.

pnpm add @kit-ng-ui/message

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

Usage

import { inject } from '@angular/core';
import { KitMessageService } from '@kit-ng-ui/message';

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

  save() {
    const close = this.message.loading({ content: 'Saving…', duration: 0 });
    this.api.save().then(
      () => { close(); this.message.success({ content: 'Saved' }); },
      () => { close(); this.message.error({ content: 'Failed to save' }); },
    );
  }
}

Every method returns a destroy function. You can also dismiss by stable key:

this.message.loading({ content: 'Saving…', duration: 0, key: 'save' });
// later:
this.message.success({ content: 'Saved', key: 'save' });   // replaces in-place
this.message.destroy('save');                              // destroy just that one
this.message.destroy();                                    // destroy all

Global config

this.message.config_({ duration: 5000, maxCount: 3, top: 64 });

| Option | Description | Type | Default | | ---------- | ----------------------------------------------------------------- | --------- | ------------ | | duration | Default auto-close duration in ms. 0 keeps the toast open. | number | 3000 | | maxCount | Maximum number of toasts on screen. Older ones drop off the top. | number | Infinity | | top | Distance from the top of the viewport in px. | number | 24 |

API — KitMessageOptions

| Option | Description | Type | Default | | ------------ | ------------------------------------------------------------------------------------ | ----------------------------------------------------- | ------------- | | className | Extra class on the notice element. | string | — | | content | Message text (required). | string | — | | duration | Auto-close duration. 0 keeps it open until you destroy it. | number | 3000 | | key | Stable key — reuse to update an existing message in place or to destroy by key. | string | — | | onClose | Callback fired after the close animation finishes. | () => void | — | | type | Visual style. loading defaults to duration: 0. | 'success' \| 'info' \| 'warning' \| 'error' \| 'loading' | 'info' |