Declarative banner trigger - renders nothing, shows/dismisses a global banner when [when] changes
CngxBannerTrigger
ComponentPrimaryv0.1.0WCAG AA
projects/ui/feedback/banner/banner-trigger.ts
Import#
import { CngxBannerTrigger } from '@cngx/ui/feedback'
Description#
Declarative banner trigger - renders nothing, shows/dismisses a global banner
when [when] changes.
When [when] becomes true, the banner appears. When false, it is dismissed.
The banner's lifecycle is tied to the signal - perfect for reactive system state
like isOffline() or sessionExpiring().
Requires provideFeedback(withBanners()).
<cngx-banner-trigger
[when]="isOffline()"
message="You are offline. Changes will sync when reconnected."
id="net:offline"
severity="error" />
<cngx-banner-trigger
[when]="sessionExpiring()"
message="Session expires soon."
id="auth:session"
severity="warning"
actionLabel="Extend"
[actionHandler]="extendSession" />Metadata#
Host#
Index#
Properties
Inputs#
input()Required
Required unique id - dedup key, shared by design. Any code (or another
trigger) using the same id updates and dismisses the same banner; there
is no per-instance guard. Namespace ids (net:offline, auth:session)
to avoid unintended collisions.
Instance Properties#
actionHandler#
unknownReadonly
Action button handler.
input<(() => void | Promise<void>) | undefined>(undefined)