Skip to main content
cngx-src documentation

CngxToast

ComponentPrimaryv0.1.0WCAG AA

projects/ui/feedback/toast/toast.component.ts

Import#

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

Description#

Declarative toast - renders nothing at its position, pushes into the global CngxToastOutlet.

Shows a toast when [when] becomes true. Dismisses when [when] becomes false (unless already auto-dismissed). Supports projected content for custom toast bodies.

Requires provideToasts() or provideFeedback(withToasts()).

Simple message

<cngx-toast severity="success" message="Saved" [when]="saved()" />

With custom content

<cngx-toast severity="error" [when]="hasError()">
  Something went wrong. <button (click)="retry()">Retry</button>
</cngx-toast>

With async state

<cngx-toast severity="success" message="Item saved" [when]="saveState.status() === 'success'" />
<cngx-toast severity="error" message="Save failed" [when]="saveState.status() === 'error'" />

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

Metadata#

Host#

Index#

Inputs#

actionLabel#string | undefined
input()

Action button config.

dismissible#boolean
input()

Show dismiss button.

default true
duration#number | 'persistent' | undefined
input()

Auto-dismiss duration in ms, or 'persistent'.

message#string
input()

Toast message text. Ignored when content is projected.

default ''
input()

Visual severity.

default 'info'
input()Required

When true, the toast is shown. When false, it is dismissed.

Instance Properties#

actionHandler#unknown
Readonly
input<(() => void) | undefined>(undefined)