const
createToast:WidgetFactory
<ToastWidget
>
Create an ToastWidget with given config props
an optional alert config
an ToastWidget
const
defaultToasterProps:ToasterProps
const
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.
readonly
animated:InputSignalWithTransform
<undefined
|boolean
,unknown
>
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
readonly
animatedOnInit:InputSignalWithTransform
<undefined
|boolean
,unknown
>
If true
, alert opening will be animated.
Animation is triggered when the .open()
function is called
or the visible prop is changed
false
readonly
ariaCloseButtonLabel:InputSignal
<undefined
|string
>
Accessibility close button label
'Close'
readonly
autoHide:InputSignalWithTransform
<undefined
|boolean
,unknown
>
If true
automatically hides the toast after the delay.
true
readonly
children:InputSignal
<SlotContent
<ToastContext
>>
Template for the toast content
readonly
className:InputSignal
<undefined
|string
>
CSS classes to be applied on the widget main container
''
readonly
delay:InputSignalWithTransform
<undefined
|number
,unknown
>
Delay in milliseconds before hiding the toast.
5000
readonly
dismissible:InputSignalWithTransform
<undefined
|boolean
,unknown
>
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
readonly
header:InputSignal
<SlotContent
<ToastContext
>>
Header template for the toast component
readonly
hidden:OutputEmitterRef
<void
>
Callback called when the alert is hidden.
() => {}
readonly
shown:OutputEmitterRef
<void
>
Callback called when the alert is shown.
() => {}
readonly
structure:InputSignal
<SlotContent
<ToastContext
>>
Global template for the toast component
readonly
transition:InputSignal
<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
readonly
visible:InputSignalWithTransform
<undefined
|boolean
,unknown
>
If true
the alert is visible to the user
true
readonly
visibleChange:OutputEmitterRef
<boolean
>
Callback called when the alert visibility changed.
() => {}
get api():
W
["api"
]
Retrieves the widget api
W
["api"
]
the widget api
get directives():
W
["directives"
]
Retrieves the widget directives
W
["directives"
]
the widget directives
get state():
AngularState
<W
>
Retrieves the widget state. Each property of the state is exposed through 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. Each property of the state is exposed through an Angular Signal
const
toastDefaultSlotStructure: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
Create a toaster provider with helpers and state.
Options for the toaster.
Props
extends Partial
<ToastProps
> = ToastProps
Type of the toast properties.
readonly
eventsDirective:Directive
<number
>
Events directive is used to set events on the Toast component, to keep track for example of pointer enter/leave, used to pause / resume the timer in case of duration and pauseOnHover are specified.
readonly
toasts:ReadableSignal
<ToasterToast
<Props
>[]>
Get the toasts value from the store
The array of toasts.
get timers():
ReadonlyMap
<number
,ToasterTimer
>
Get the timers value from the store
ReadonlyMap
<number
, ToasterTimer
>
The map of timers.
readonly
addTimer(id
,duration
):void
Add timer for a toast
number
Id of the toast
number
= ...
Duration of the timer, by default taken from options
void
readonly
addToast(props
):number
Helper to add a toast to the viewport.
Props
Options for the toast.
number
The ID of the added toast.
readonly
closeAll():void
Helper to close all toasts at once
void
readonly
pauseTimer(id
):void
Pause a timer for a toast
number
Id of the toast
void
readonly
removeToast(id
):void
Helper to remove a toast to the viewport.
number
Id of the toast to remove.
void
readonly
resumeTimer(id
):void
Resume a timer for a toast
number
Id of the toast
void
readonly
updateToasts():void
Helper to update toasts when options change
void
Props of the toaster
optional
closeAll:boolean
Add a button to close all the toasts at once
optional
closeAllLabel:string
Close all label
dismissible:
boolean
Display a dismiss button on each toast. When duration = 0, this is enforced to true
duration:
number
How much time (ms) a toast is displayed; 0 means it won't be removed until a manual action
optional
limit:number
Maximum number of toasts displayed
optional
pauseOnHover:boolean
Pause toast when hover
position:
ToastPositions
Where to position the toasts
Represents a timer used by the toaster service.
duration:
number
The duration for which the timer is set (optional). Used internally to compute the remaining time.
optional
paused:number
The timestamp when the timer was paused (optional).
started:
number
The timestamp when the timer was started.
timeout:
null
|Timeout
The timeout identifier returned by setTimeout
.
Toast object
Props
Type of the toast properties.
id:
number
Identifier of the toasts in the toaster
props:
Props
Properties of the toast
Directive representing the header of a toast component. This directive uses a template reference to render the ToastContext.
const
toastPositions:Record
<ToastPositions
,string
>
A mapping of toast position keys to their corresponding CSS class strings of bootstrap. These classes define the positioning of toast notifications on the screen.
The keys represent various positions on the screen, such as top-left, top-center, middle-right, etc., and the values are the CSS classes of bootstrap that apply the respective positioning styles.
Example usage:
const positionClass = toastPositions.topLeft; // "top-0 start-0"
ToastPositions =
"topLeft"
|"topCenter"
|"topRight"
|"middleLeft"
|"middleCenter"
|"middleRight"
|"bottomLeft"
|"bottomCenter"
|"bottomRight"
Represents the possible positions for displaying a toast notification.
The positions are defined based on a grid layout with three horizontal alignments (left, center, right) and three vertical alignments (top, middle, bottom).
Available positions:
topLeft
: Top-left corner of the screen.topCenter
: Top-center of the screen.topRight
: Top-right corner of the screen.middleLeft
: Middle-left side of the screen.middleCenter
: Center of the screen.middleRight
: Middle-right side of the screen.bottomLeft
: Bottom-left corner of the screen.bottomCenter
: Bottom-center of the screen.bottomRight
: Bottom-right corner of the screen.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.
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
const
ToastPropsToken:InjectionToken
<ToasterProps
>
Injection token used to provide configuration properties for the toaster service.
This token is associated with the ToasterProps
interface, which defines the
structure of the configuration object. It allows dependency injection to supply
custom properties for the toaster service, such as default settings or behavior.
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.