CngxBanner

InjectablePrimaryv0.1.0WCAG AA

projects/ui/feedback/banner/banner.service.ts

Import#

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

Description#

Global banner service - manages system-level banners as a signal array.

Not providedIn: 'root'. Provide via provideFeedback(withBanners()).

Banners are always persistent - no auto-dismiss. Use dismiss(id) to remove programmatically (e.g., on reconnect, on session extend).

id is required and serves as the dedup key. Calling show() with an existing id calls update() instead (e.g., session timeout countdown).

private readonly banner = inject(CngxBanner);

this.banner.show({
  message: 'Your session expires in 5 minutes',
  severity: 'warning',
  id: 'auth:session-timeout',
  action: { label: 'Extend', handler: () => this.extendSession() },
});

https://cngxjs.github.io/cngx/examples/#/ui/feedback/banner/async-action https://cngxjs.github.io/cngx/examples/#/ui/feedback/banner/dedup-update https://cngxjs.github.io/cngx/examples/#/ui/feedback/banner/system-banners

Index#

Properties

banners

Methods

dismiss dismissAll show update

Instance Properties#

banners#readonly BannerState[]

signal()Readonly

Reactive banner stack - read by CngxBannerOutlet.

signal<readonly BannerState[]>([])

Methods#

dismiss#void

dismiss(id: string)

Dismiss a banner by id.

@paramidstring

dismissAll#void

Dismiss all banners.

show#BannerRef

show(config: BannerConfig)

Show a banner. If id already exists, updates it instead.

@paramconfigBannerConfig

update#void

update(id: string, patch: Partial<BannerConfig>)

Update an existing banner in-place by id.