Skip to main content
cngx-src documentation

CngxAlertOn

DirectivePrimaryv0.1.0WCAG AA

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

Import#

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

Description#

Declarative state-to-alert bridge for scoped alert stacks.

Fires an alert when the bound CngxAsyncState transitions to error (or optionally success). Only fires on actual transitions, not on initial idle state.

Alerts route through the injected CngxAlerter - the environment instance from provideFeedback(withAlerts()) or one provided by an ancestor component. Every CngxAlertStack that resolves the same instance renders them, filtered by scope:

<cngx-alert-stack scope="form" />

<button [cngxAsyncClick]="save"
  [cngxAlertOn]="saveState"
  alertError="Save failed"
  alertScope="form"
  [alertErrorDetail]="true">
  Save
</button>

Metadata#

Index#

Inputs#

alertError#string | undefined
input()

Alert message on error. If not set, no error alert fires.

alertErrorDetail#boolean
input()

Include the error detail message in the alert body.

default false
alertScope#string | undefined
input()

Scope for the alert - matches against CngxAlertStack's [scope] input.

alertSuccess#string | undefined
input()

Alert message on success. If not set, no success alert fires.

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

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