Skip to main content
cngx-src documentation

CngxToastOn

DirectivePrimaryv0.1.0WCAG AA

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

GitHub

Import#

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

Description#

Declarative state-to-toast bridge.

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

On a button

<button [cngxAsyncClick]="save"
  [cngxToastOn]="saveState"
  toastSuccess="Saved"
  toastError="Save failed">
  Save
</button>

On a form

<form [cngxToastOn]="submitState"
  toastSuccess="Form submitted"
  toastError="Submission failed"
  [toastErrorDetail]="true">
  ...
</form>

https://cngxjs.github.io/cngx/examples/#/ui/feedback/toast/custom-component-body https://cngxjs.github.io/cngx/examples/#/ui/feedback/toast/declarative-cngx-toast https://cngxjs.github.io/cngx/examples/#/ui/feedback/toast/programmatic-cngxtoaster https://cngxjs.github.io/cngx/examples/#/ui/feedback/toast/state-bridge-cngxtoaston https://cngxjs.github.io/cngx/examples/#/ui/feedback/toast/title-description https://cngxjs.github.io/cngx/examples/#/ui/tabs/tab-commit-action/optimistic-pessimistic-commits-with-bridge-directives

Related#

Metadata#

Selector
[cngxToastOn]

Index#

Inputs

statetoastErrortoastErrorDetailtoastErrorDurationtoastSuccesstoastSuccessDuration

Inputs#

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

The async state to watch. Optional - when omitted, the bridge falls back to CNGX_STATEFUL injected from the host component (for example CngxSelect.commitState). A bare cngxToastOn attribute (empty string) is treated as "no input bound" so the fallback kicks in.

default 
undefined, {    alias: 'cngxToastOn',    transform: (v) => (typeof v === 'string' ? undefined : v),  }
toastError#string | undefined
input()

Toast message on error. If not set, no error toast fires.

toastErrorDetail#boolean
input()

Include the error detail message in the toast body.

default false
toastErrorDuration#number | 'persistent'
input()

Duration for error toasts - 'persistent' means manual dismiss only.

default 'persistent'
toastSuccess#string | undefined
input()

Toast message on success. If not set, no success toast fires.

toastSuccessDuration#number
input()

Duration for success toasts in ms.

default 3000
Enter to selectArrow Down Arrow Up to navigateEsc to close