CngxToast
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
Projected content replaces message as the toast body. Keep it
non-interactive - the toast renders inside a live region, where focusable
elements are unreachable for screen reader users. For a button, use
actionLabel/actionHandler instead.
<cngx-toast severity="error" [when]="hasError()"
actionLabel="Retry" [actionHandler]="retry">
Something went <strong>wrong</strong>.
</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'" />