CngxAlertStack
projects/ui/feedback/alert/alert-stack.ts
Import#
import { CngxAlertStack } from '@cngx/ui/feedback'
Description#
Scoped alert stack - renders alerts from its own CngxAlerter instance
merged with the nearest ancestor/environment instance.
Provides CngxAlerter via viewProviders - the stack's own instance is
private to its view. Alerts shown through an ancestor-provided alerter or
the environment alerter from provideFeedback(withAlerts()) (the instance
CngxAlertOn and sibling components resolve) render here too, filtered by
[scope]. Nesting is supported - each stack stays independent.
Scope your stacks when more than one is mounted: two unscoped stacks under the same environment alerter both render (and announce) every shared alert.
In a dialog
The dialog component and the stack resolve the same environment alerter, so programmatic alerts land in the stack below:
<dialog cngxDialog [submitAction]="save">
<header cngxDialogTitle>Edit user</header>
<cngx-alert-stack scope="user-form" position="top" />
<form>...</form>
</dialog>Programmatic usage
Requires provideFeedback(withAlerts()) (or an ancestor component that
provides CngxAlerter):
private readonly alerter = inject(CngxAlerter);
handleErrors(errors: string[]) {
this.alerter.dismissAll('user-form');
errors.forEach(e =>
this.alerter.show({ message: e, severity: 'error', scope: 'user-form' }),
);
}Metadata#
Host#
View Providers#
CngxAlerter- useClass
Dependencies#
Relationships
Index#
Properties
Inputs#
number | undefinedMaximum visible alerts before collapse overflow. Defaults to withAlerts({ maxVisible }), then 5.
Instance Properties#
HostBindings#
| Binding | Expression |
|---|---|
[attr.aria-label] | regionLabel |
[class.cngx-alert-stack--reserve-space] | reserveSpace() |
Default visuals for CngxAlertStack. The host carries
.cngx-alert-stack and renders __item rows for each alert,
__icon + __body + __title + __message + __dismiss
children per item, plus an __overflow "show more" button.
Shares the --cngx-alert-* token namespace with CngxAlert so a
:root-level override of (e.g.) --cngx-alert-success-bg
propagates to both - only stack-specific tokens (gap, reserve-
height, message typography, overflow button surface) get their
own @property declarations here.
State modifiers
--reserve-space- pinsmin-heightto--cngx-alert-stack- reserve-heightso layout does not shift when alerts mount / dismount
Variants
Severity classes set the three tinted-surface tokens for each item:
__item--info- info bg / border / icon__item--success- success bg / border / icon__item--warning- warning bg / border / icon__item--error- error bg / border / icon
Inheritance
Stack-local tokens stand alone; severity tokens mirror the
alert.css 4-block (:root, prefers-color-scheme: dark,
[data-color-scheme='dark'] / .dark, [data-color-scheme='light']
/ .light) so a page that only uses CngxAlertStack still sees
resolved values without CngxAlert mounting:
--cngx-alert-stack-overflow-border->--cngx-color-border--cngx-alert-{info,success,warning,error}-{bg,border,icon}- alert family palette
Dark mode
Three hooks swap the overflow button colors and every severity triplet:
prefers-color-scheme: dark[data-color-scheme="dark"].darkclass
Pair with
@cngx/themes/material/feedback-theme- Material 3 surface palette shared withCngxAlertandCngxBannerOutlet
Index#
Layout
<length>56pxMinimum block-size reserved for the stack so layout doesn't shift when alerts mount / dismount.
Typography
State / Overflow
<color>transparentBackground of the "show more" overflow button.
<color>oklch(0.85 0.005 250)Border color of the "show more" overflow button.
*8px 16pxPadding shorthand of the "show more" overflow button.
*0.8125remFont-size of the "show more" overflow button.
<color>oklch(0.5 0.01 250)Text color of the "show more" overflow button.
<color>oklch(0.96 0.005 250)Background tint on hover of the "show more" overflow button.