createToast(
props?):ToastWidget
Create an ToastWidget with given config props
• props?: PropsConfig<ToastProps>
an ToastWidget
getToastDefaultConfig():
ToastProps
Retrieve a shallow copy of the default Toast config
the default Toast config
Represents the API for the toast component.
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
Directive to represent the body of a toast notification. This directive uses a template reference to render the ToastContext.
The ToastComponent is a UI component that displays a toast notification.
It extends the BaseWidgetDirective and provides various configurable properties
and events to control the behavior and appearance of the toast.
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
''
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.
() => {}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.
() => {}
getapi():W["api"]
Retrieves the widget api
W["api"]
the widget api
getdirectives():W["directives"]
Retrieves the widget directives
W["directives"]
the widget directives
getstate():AngularState<W>
Retrieves the widget state as an Angular Signal
AngularState<W>
the widget state
Represents the context for a Toast widget.
This interface is an alias for WidgetSlotContext<ToastWidget>.
api:
ToastApi
all the api functions to interact with the widget
directives:
ToastDirectives
directives to be used on html elements in the template of the widget or in the slots
state:
AngularState<ToastWidget>
the state of the widget
consttoastDefaultSlotStructure:SlotContent<ToastContext>
Represents the default slot structure for the toast component.
Interface representing the directives for a toast component.
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
Directive representing the header of a toast component. This directive uses a template reference to render the ToastContext.
Interface representing the properties for the Toast component.
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
Represents the state of a Toast component.
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
Directive to define the structure of a toast component. This directive uses a template reference to render the ToastContext.
ToastWidget:
Widget<ToastProps,ToastState,ToastApi,ToastDirectives>
Represents a Toast widget component.