AbpToastHost

AbpToastHost renders notifications created through ToasterService. A service call alone cannot display a toast without a matching mounted host.

Display and route a toast

<template>
  <div class="d-flex gap-2">
    <AbpButton @click="notify">Show notification</AbpButton>
    <AbpButton variant="danger" outline @click="confirm">Ask for confirmation</AbpButton>
  </div>
  <AbpToastHost container-key="example" />
  <AbpConfirmHost />
  <output aria-live="polite">{{ result }}</output>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import {
  AbpButton,
  AbpConfirmHost,
  AbpToastHost,
  ConfirmationStatus,
  useConfirmation,
  useToaster,
} from '@lsw-abpvue/theme-shared';
const toaster = useToaster();
const confirmation = useConfirmation();
const result = ref('No answer yet');
function notify(): void {
  toaster.success({ key: 'Demo::Saved', defaultValue: 'Changes saved' }, undefined, {
    containerKey: 'example',
    life: 3000,
  });
}
async function confirm(): Promise<void> {
  const answer = await confirmation.warn(
    { key: 'Demo::Delete', defaultValue: 'Delete this book?' },
    { key: 'Demo::Title', defaultValue: 'Confirm deletion' },
  );
  result.value =
    answer === ConfirmationStatus.confirm
      ? 'Confirmed; the application would now call its delete API.'
      : `No deletion: ${answer}`;
}
</script>

The toast uses containerKey: 'example'; the host uses the matching container-key. A default application layout already mounts a default host. Do not add another default host inside each page, or messages can appear twice.

Lifetime and ownership

Use life for an automatic timeout, or sticky for a message that stays until dismissed. closable and tapToDismiss configure dismissal. A supplied id lets the caller refer to its toast; keep ids stable only when that is intentional.

Messages and titles are localization parameters; interpolation values go in messageLocalizationParams or titleLocalizationParams. Use a toast for brief operation feedback and a page alert for a persistent problem near the affected content.

An error toast is not a backend validation binding. Show field errors in the form and avoid reporting a handled HTTP failure twice. See notifications and HTTP errors.

Props, events and slots

Source

Types come from the public contract and defaults from the current implementation. A dash means no explicit default; optional boolean props are normally false when omitted.

Props

Name	Type	Required	Default
containerKey	string | undefined	No	—

Events

No component-specific events are declared.

Slots

No named slots.