Page alerts

Use PageAlertService for a message that should stay near the page content, such as a failed catalogue load or a notice requiring attention. Use a toast for brief feedback after a completed operation.

Show, replace and remove

<template>
  <AbpPageAlerts />
  <div class="d-flex flex-wrap gap-2">
    <AbpButton @click="show">Show or replace alert</AbpButton>
    <AbpButton variant="secondary" @click="alerts.remove('catalog-offline')"
      >Remove alert</AbpButton
    >
  </div>
</template>

<script setup lang="ts">
import { onBeforeUnmount } from 'vue';
import { AbpPageAlerts } from '@lsw-abpvue/theme-basic';
import { AbpButton, usePageAlert } from '@lsw-abpvue/theme-shared';
const alerts = usePageAlert();
function show(): void {
  alerts.show({
    id: 'catalog-offline',
    severity: 'warning',
    title: { key: 'Demo::Offline', defaultValue: 'Catalogue unavailable' },
    message: { key: 'Demo::Retry', defaultValue: 'Retry loading before editing records.' },
    dismissible: true,
  });
}
onBeforeUnmount(() => alerts.remove('catalog-offline'));
</script>

The same id replaces an existing alert instead of adding duplicates. show returns the id when you let the service generate it. Remove that id after recovery or when its owning page unmounts. Avoid clear() in an unrelated component: it removes other owners' alerts too.

Rendering and scope

usePageAlert() comes from theme-shared. The Basic Theme renderer AbpPageAlerts comes from theme-basic; use your theme's renderer in a custom theme. The default Basic application layout already renders alerts, so do not add a second renderer to an ordinary page. The isolated example includes one because it has no application layout.

Alert state belongs to its injector. Page unmount does not automatically destroy the root service; explicit cleanup prevents a page-specific message appearing on the next route. For independently scoped views, provide the service in the view injector and use a matching renderer.

Messages and recovery

severity accepts neutral, info, success, warning or error. title and message are localization parameters, with separate interpolation arrays. dismissible defaults to true; dismissing a message is not the same as retrying the failed request.

Keep Retry close to the affected operation and remove the alert only after a successful recovery. A form's member errors still belong in the fields. See HTTP failures, notifications and form validation.