CngxBannerOn

DirectivePrimaryv0.1.0WCAG AA

projects/ui/feedback/banner/banner-on.directive.ts

Import#

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

Description#

Declarative state-to-banner bridge.

Place on any element - shows a global banner when the bound CngxAsyncState transitions to error. Dismisses automatically on success or idle. Only fires on actual transitions, not on initial idle state.

<div [cngxBannerOn]="connectionState"
  bannerId="net:offline"
  bannerError="You are offline. Changes will sync when reconnected.">
</div>

https://cngxjs.github.io/cngx/examples/#/ui/tabs/tab-commit-action/optimistic-pessimistic-commits-with-bridge-directives

Metadata#

Selector: [cngxBannerOn]

Index#

Inputs

bannerError bannerErrorDetail bannerId bannerSeverity state

Inputs#

bannerError#string | undefined

input()

Banner message on error.

bannerErrorDetail#boolean

input()

Include error detail in the message.

default false

bannerId#string

input()Required

Required banner id - dedup key.

bannerSeverity#"error" | "warning"

input()

Banner severity on error. Default 'error'.

default 'error'

state# CngxAsyncState | undefined, CngxAsyncState | '' | undefined

The async state to watch. Optional - when omitted, falls back to CNGX_STATEFUL from an ancestor/self component. A bare cngxBannerOn attribute is treated as "no input bound".

default

undefined, {    alias: 'cngxBannerOn',    transform: (v) => (typeof v === 'string' ? undefined : v),  }

CngxBannerOn

Import#

Description#

Related#

Metadata#

Index#

Inputs

Inputs#