Skip to main content
cngx-src documentation

CngxAlertStack

ComponentPrimaryOnPushNo encapsulationv0.1.0WCAG AA

projects/ui/feedback/alert/alert-stack.ts

GitHub

Import#

import { CngxAlertStack } from '@cngx/ui/feedback'

Description#

Scoped alert stack - renders alerts from its own CngxAlerter instance.

Provides CngxAlerter via viewProviders - child components that inject(CngxAlerter) get this stack's instance. Supports nesting (each stack is independent).

In a dialog

<dialog cngxDialog [submitAction]="save">
  <header cngxDialogTitle>Edit user</header>
  <cngx-alert-stack scope="user-form" position="top" />
  <form>...</form>
</dialog>

Programmatic usage

private readonly alerter = inject(CngxAlerter);

handleErrors(errors: string[]) {
  this.alerter.dismissAll();
  errors.forEach(e => this.alerter.show({ message: e, severity: 'error' }));
}

https://cngxjs.github.io/cngx/examples/#/ui/feedback/alert-stack/basic-stack https://cngxjs.github.io/cngx/examples/#/ui/feedback/alert-stack/dialog-use-case https://cngxjs.github.io/cngx/examples/#/ui/feedback/alert-stack/overflow-collapse

Related#

Metadata#

Selector
cngx-alert-stack
Change detection
ChangeDetectionStrategy.OnPush
Encapsulation
ViewEncapsulation.None
Style URLs
./alert-stack.css
Imports
NgComponentOutletCngxCloseButtonCngxSeverityIcon

Host#

Class
cngx-alert-stack
Static attributes
rolelog
aria-livepolite
Bound classes
cngx-alert-stack--reserve-space ← reserveSpace

View Providers#

CngxAlerter
useClass

Dependencies#

CngxAlerterinject()alerter

The scoped alerter instance - use to add/dismiss alerts programmatically.

Relationships

Depends on3

NgComponentOutletcomponent
CngxCloseButtonStandalone component
CngxSeverityIcondependency

Index#

Inputs

autoScrollmaxVisiblepositionreserveSpacescope

HostBindings

class.cngx-alert-stack--reserve-space

Inputs#

autoScroll#boolean
input()

Auto-scroll stack into view when new alert appears.

default true
maxVisible#number
input()

Maximum visible alerts before collapse overflow.

default 5
position#"top" | "bottom"
input()

Where new alerts appear.

default 'top'
reserveSpace#boolean
input()

Reserve min-height for one alert to prevent layout shift.

default false
scope#string | undefined
input()

Scope filter - only shows alerts matching this scope.

HostBindings#

BindingExpression
[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 - pins min-height to --cngx-alert-stack- reserve-height so 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"]
  • .dark class

Pair with

  • @cngx/themes/material/feedback-theme - Material 3 surface palette shared with CngxAlert and CngxBannerOutlet

Index#

Layout

--cngx-alert-stack-gap--cngx-alert-stack-reserve-height

Typography

--cngx-alert-stack-message-size--cngx-alert-stack-message-line-height

State / Overflow

--cngx-alert-stack-overflow-bg--cngx-alert-stack-overflow-border--cngx-alert-stack-overflow-padding--cngx-alert-stack-overflow-size--cngx-alert-stack-overflow-color--cngx-alert-stack-overflow-hover-bg

Layout

--cngx-alert-stack-gap#<length>
Default value 8px

Vertical gap between stacked alert items.

--cngx-alert-stack-reserve-height#<length>
Default value 56px

Minimum block-size reserved for the stack so layout doesn't shift when alerts mount / dismount.

Typography

--cngx-alert-stack-message-size#*
Default value 0.875rem

Font-size of the per-item message text.

--cngx-alert-stack-message-line-height#*
Default value 1.5

Line-height of the per-item message text.

State / Overflow

--cngx-alert-stack-overflow-bg#<color>
Default value transparent

Background of the "show more" overflow button.

--cngx-alert-stack-overflow-border#<color>
Default value oklch(0.85 0.005 250)

Border color of the "show more" overflow button.

--cngx-alert-stack-overflow-padding#*
Default value 8px 16px

Padding shorthand of the "show more" overflow button.

--cngx-alert-stack-overflow-size#*
Default value 0.8125rem

Font-size of the "show more" overflow button.

--cngx-alert-stack-overflow-color#<color>
Default value oklch(0.5 0.01 250)

Text color of the "show more" overflow button.

--cngx-alert-stack-overflow-hover-bg#<color>
Default value oklch(0.96 0.005 250)

Background tint on hover of the "show more" overflow button.

Enter to selectArrow Down Arrow Up to navigateEsc to close