@kit-ng-ui/app

Top-level chrome that wires the imperative overlay services together and applies the active theme to the app surface.

pnpm add @kit-ng-ui/app

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

Usage

import { KitAppComponent, KitAppService } from '@kit-ng-ui/app';

<kit-app
  [messageConfig]="{ duration: 4000, maxCount: 3 }"
  [notificationConfig]="{ placement: 'bottomRight', top: 64 }"
>
  <router-outlet />
</kit-app>

Inside any child component:

private readonly app = inject(KitAppService);

publish() {
  this.app.message.success({ content: 'Saved' });
  this.app.modal.confirm({ title: 'Continue?', onOk: () => this.next() });
  this.app.notification.info({ message: 'Tip', description: 'You can drag rows.' });
}

What <kit-app> actually does

• Applies the layout background, text color, and font from the active @kit-ng-ui/core theme to its host. This is the analogue of ant-design's <App> wrapping the page.
• Forwards [messageConfig] and [notificationConfig] into KitMessageService and KitNotificationService, so the imperative APIs pick up your global defaults.
• Provides KitAppService for one-shot access to message, modal, notification.

It does not establish a new injector scope. The three services are already providedIn: 'root'; <kit-app> only configures them.

API

| Input | Description | Type | Default | | -------------------- | ------------------------------------------------------ | ----------------------------- | ------- | | messageConfig | Global defaults for KitMessageService. | KitMessageGlobalConfig | null | | notificationConfig | Global defaults for KitNotificationService. | KitNotificationGlobalConfig | null |

KitAppService

| Property | Type | | -------------- | -------------------------- | | message | KitMessageService | | modal | KitModalService | | notification | KitNotificationService |