Toast

• props?: PropsConfig<ToastProps>

ToastWidget

an ToastWidget

ToastProps

the default Toast config

close(): void

Triggers alert closing programmatically (same as clicking on the close button (×)).

void

open(): void

Triggers the alert to be displayed for the user.

void

new ToastBodyDirective(): ToastBodyDirective

ToastBodyDirective

templateRef: TemplateRef<any>

static ngTemplateContextGuard(dir, context): context is ToastContext

• dir: ToastBodyDirective

• context: unknown

context is ToastContext

• AfterContentChecked

new ToastComponent(): ToastComponent

ToastComponent

readonly _widget: AngularWidget<ToastWidget>

animated: undefined | boolean

If true, alert closing will be animated.

Animation is triggered when clicked on the close button (×), via the .close() function or the visible prop is changed

true

animatedOnInit: undefined | boolean

If true, alert opening will be animated.

Animation is triggered when the .open() function is called or the visible prop is changed

false

ariaCloseButtonLabel: undefined | string

Accessibility close button label

'Close'

autoHide: undefined | boolean

If true automatically hides the toast after the delay.

true

children: SlotContent<ToastContext>

Template for the toast content

className: undefined | string

CSS classes to be applied on the widget main container

''

readonly defaultSlots: WritableSignal<Partial<ToastProps>, Partial<ToastProps>>

delay: undefined | number

Delay in milliseconds before hiding the toast.

5000

dismissible: undefined | boolean

If true, alert can be dismissed by the user. The close button (×) will be displayed and you can be notified of the event with the (close) output.

true

header: SlotContent<ToastContext>

Header template for the toast component

hidden: EventEmitter<void>

Callback called when the alert is hidden.

() => {}

shown: EventEmitter<void>

Callback called when the alert is shown.

() => {}

slotDefaultFromContent: undefined | ToastBodyDirective

slotHeaderFromContent: undefined | ToastHeaderDirective

slotStructureFromContent: undefined | ToastStructureDirective

structure: SlotContent<ToastContext>

Global template for the toast component

transition: undefined | TransitionFn

The transition function will be executed when the alert is displayed or hidden.

Depending on the value of animatedOnInit, the animation can be optionally skipped during the showing process.

fadeTransition

visible: undefined | boolean

If true the alert is visible to the user

true

visibleChange: EventEmitter<boolean>

Callback called when the alert visibility changed.

() => {}

get api(): W["api"]

W["api"]

get state(): Signal<WidgetState<W>>

Signal<WidgetState<W>>

get widget(): ContextWidget<W>

ContextWidget<W>

ngAfterContentChecked(): void

A callback method that is invoked immediately after the default change detector has completed checking all of the directive's content.

void

AfterContentChecked.ngAfterContentChecked

ngOnChanges(changes): void

• changes: SimpleChanges

void

ngOnInit(): void

void

new ToastDefaultSlotsComponent(): ToastDefaultSlotsComponent

ToastDefaultSlotsComponent

structure: TemplateRef<ToastContext>

autoHideDirective: Directive

Directive that handles the autohide of the toast component

bodyDirective: Directive

Directive that adds all the necessary attributes to the body

closeButtonDirective: Directive

Directive that adds all the necessary attributes to the close button depending on the presence of the header

transitionDirective: Directive

the transition directive, piloting what is the visual effect of going from hidden to visible

new ToastHeaderDirective(): ToastHeaderDirective

ToastHeaderDirective

templateRef: TemplateRef<any>

static ngTemplateContextGuard(dir, context): context is ToastContext

• dir: ToastHeaderDirective

• context: unknown

context is ToastContext

animated: boolean

If true, alert closing will be animated.

Animation is triggered when clicked on the close button (×), via the .close() function or the visible prop is changed

true

animatedOnInit: boolean

If true, alert opening will be animated.

Animation is triggered when the .open() function is called or the visible prop is changed

false

ariaCloseButtonLabel: string

Accessibility close button label

'Close'

autoHide: boolean

If true automatically hides the toast after the delay.

true

children: SlotContent<ToastContext>

Template for the toast content

className: string

CSS classes to be applied on the widget main container

''

delay: number

Delay in milliseconds before hiding the toast.

5000

dismissible: boolean

If true, alert can be dismissed by the user. The close button (×) will be displayed and you can be notified of the event with the (close) output.

true

header: SlotContent<ToastContext>

Header template for the toast component

onHidden: () => void

Callback called when the alert is hidden.

void

() => {}

onShown: () => void

Callback called when the alert is shown.

void

() => {}

onVisibleChange: (visible) => void

Callback called when the alert visibility changed.

• visible: boolean

void

() => {}

structure: SlotContent<ToastContext>

Global template for the toast component

transition: TransitionFn

The transition function will be executed when the alert is displayed or hidden.

Depending on the value of animatedOnInit, the animation can be optionally skipped during the showing process.

fadeTransition

visible: boolean

If true the alert is visible to the user

true

ariaCloseButtonLabel: string

Accessibility close button label

'Close'

autoHide: boolean

If true automatically hides the toast after the delay.

true

children: SlotContent<ToastContext>

Template for the toast content

className: string

CSS classes to be applied on the widget main container

''

delay: number

Delay in milliseconds before hiding the toast.

5000

dismissible: boolean

If true, alert can be dismissed by the user. The close button (×) will be displayed and you can be notified of the event with the (close) output.

true

header: SlotContent<ToastContext>

Header template for the toast component

hidden: boolean

Is true when the alert is hidden. Compared to visible, this is updated after the transition is executed.

structure: SlotContent<ToastContext>

Global template for the toast component

visible: boolean

If true the alert is visible to the user

true

new ToastStructureDirective(): ToastStructureDirective

ToastStructureDirective

templateRef: TemplateRef<any>

static ngTemplateContextGuard(dir, context): context is ToastContext

• dir: ToastStructureDirective

• context: unknown

context is ToastContext