Bootstrap

API toast

createToast

constant

const createToast: WidgetFactory<ToastWidget>

Create an ToastWidget with given config props

Param

an optional alert config

Returns

an ToastWidget


defaultToasterProps

constant

const defaultToasterProps: ToasterProps


getToastDefaultConfig

constant

const getToastDefaultConfig: () => ToastProps

Retrieve a shallow copy of the default Toast config

Returns

ToastProps

the default Toast config


ToastApi

interface

Represents the API for the toast component.

Methods
close

close(): void

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

Returns

void


open

open(): void

Triggers the alert to be displayed for the user.

Returns

void


ToastBodyDirective

class

Directive to represent the body of a toast notification. This directive uses a template reference to render the ToastContext.


ToastComponent

class

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.

Properties
animated

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

Default Value

true


animatedOnInit

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

Default Value

false


ariaCloseButtonLabel

readonly ariaCloseButtonLabel: InputSignal<undefined | string>

Accessibility close button label

Default Value

'Close'


autoHide

readonly autoHide: InputSignalWithTransform<undefined | boolean, unknown>

If true automatically hides the toast after the delay.

Default Value

true


children

readonly children: InputSignal<SlotContent<ToastContext>>

Template for the toast content


className

readonly className: InputSignal<undefined | string>

CSS classes to be applied on the widget main container

Default Value

''


delay

readonly delay: InputSignalWithTransform<undefined | number, unknown>

Delay in milliseconds before hiding the toast.

Default Value

5000


dismissible

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.

Default Value

true


header

readonly header: InputSignal<SlotContent<ToastContext>>

Header template for the toast component


hidden

readonly hidden: OutputEmitterRef<void>

Callback called when the alert is hidden.

Default Value
() => {}

shown

readonly shown: OutputEmitterRef<void>

Callback called when the alert is shown.

Default Value
() => {}

structure

readonly structure: InputSignal<SlotContent<ToastContext>>

Global template for the toast component


transition

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.

Default Value

fadeTransition


visible

readonly visible: InputSignalWithTransform<undefined | boolean, unknown>

If true the alert is visible to the user

Default Value

true


visibleChange

readonly visibleChange: OutputEmitterRef<boolean>

Callback called when the alert visibility changed.

Default Value
() => {}
Accessors
api
Get Signature

get api(): W["api"]

Retrieves the widget api

Returns

W["api"]

the widget api


directives
Get Signature

get directives(): W["directives"]

Retrieves the widget directives

Returns

W["directives"]

the widget directives


state
Get Signature

get state(): AngularState<W>

Retrieves the widget state. Each property of the state is exposed through an Angular Signal

Returns

AngularState<W>

the widget state


ToastContext

interface

Represents the context for a Toast widget. This interface is an alias for WidgetSlotContext<ToastWidget>.

Properties
api

api: ToastApi

all the api functions to interact with the widget


directives

directives: ToastDirectives

directives to be used on html elements in the template of the widget or in the slots


state

state: AngularState<ToastWidget>

The state of the widget. Each property of the state is exposed through an Angular Signal


toastDefaultSlotStructure

constant

const toastDefaultSlotStructure: SlotContent<ToastContext>

Represents the default slot structure for the toast component.


ToastDirectives

interface

Interface representing the directives for a toast component.

Properties
autoHideDirective

autoHideDirective: Directive

Directive that handles the autohide of the toast component


bodyDirective

bodyDirective: Directive

Directive that adds all the necessary attributes to the body


closeButtonDirective

closeButtonDirective: Directive

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


transitionDirective

transitionDirective: Directive

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


Toaster

class

Create a toaster provider with helpers and state.

Param

Options for the toaster.

Type Parameters
Props

Props extends Partial<ToastProps> = ToastProps

Type of the toast properties.

Properties
eventsDirective

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.


toasts

readonly toasts: ReadableSignal<ToasterToast<Props>[]>

Get the toasts value from the store

Returns

The array of toasts.

Accessors
timers
Get Signature

get timers(): ReadonlyMap<number, ToasterTimer>

Get the timers value from the store

Returns

ReadonlyMap<number, ToasterTimer>

The map of timers.

Methods
addTimer

readonly addTimer(id, duration): void

Add timer for a toast

Parameters
id

number

Id of the toast

duration

number = ...

Duration of the timer, by default taken from options

Returns

void


addToast

readonly addToast(props): number

Helper to add a toast to the viewport.

Parameters
props

Props

Options for the toast.

Returns

number

The ID of the added toast.


closeAll

readonly closeAll(): void

Helper to close all toasts at once

Returns

void


pauseTimer

readonly pauseTimer(id): void

Pause a timer for a toast

Parameters
id

number

Id of the toast

Returns

void


removeToast

readonly removeToast(id): void

Helper to remove a toast to the viewport.

Parameters
id

number

Id of the toast to remove.

Returns

void


resumeTimer

readonly resumeTimer(id): void

Resume a timer for a toast

Parameters
id

number

Id of the toast

Returns

void


updateToasts

readonly updateToasts(): void

Helper to update toasts when options change

Returns

void


ToasterComponent

class

ToasterProps

interface

Props of the toaster

Properties
closeAll?

optional closeAll: boolean

Add a button to close all the toasts at once


closeAllLabel?

optional closeAllLabel: string

Close all label


dismissible

dismissible: boolean

Display a dismiss button on each toast. When duration = 0, this is enforced to true


duration

duration: number

How much time (ms) a toast is displayed; 0 means it won't be removed until a manual action


limit?

optional limit: number

Maximum number of toasts displayed


pauseOnHover?

optional pauseOnHover: boolean

Pause toast when hover


position

position: ToastPositions

Where to position the toasts


ToasterService

class

ToasterTimer

interface

Represents a timer used by the toaster service.

Properties
duration

duration: number

The duration for which the timer is set (optional). Used internally to compute the remaining time.


paused?

optional paused: number

The timestamp when the timer was paused (optional).


started

started: number

The timestamp when the timer was started.


timeout

timeout: null | Timeout

The timeout identifier returned by setTimeout.


ToasterToast

interface

Toast object

Type Parameters
Props

Props

Type of the toast properties.

Properties
id

id: number

Identifier of the toasts in the toaster


props

props: Props

Properties of the toast


ToastHeaderDirective

class

Directive representing the header of a toast component. This directive uses a template reference to render the ToastContext.


toastPositions

constant

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

type alias

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.

ToastProps

interface

Interface representing the properties for the Toast component.

Properties
animated

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

Default Value

true


animatedOnInit

animatedOnInit: boolean

If true, alert opening will be animated.

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

Default Value

false


ariaCloseButtonLabel

ariaCloseButtonLabel: string

Accessibility close button label

Default Value

'Close'


autoHide

autoHide: boolean

If true automatically hides the toast after the delay.

Default Value

true


children

children: SlotContent<ToastContext>

Template for the toast content


className

className: string

CSS classes to be applied on the widget main container

Default Value

''


delay

delay: number

Delay in milliseconds before hiding the toast.

Default Value

5000


dismissible

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.

Default Value

true


header

header: SlotContent<ToastContext>

Header template for the toast component


onHidden

onHidden: () => void

Callback called when the alert is hidden.

Returns

void

Default Value
() => {}

onShown

onShown: () => void

Callback called when the alert is shown.

Returns

void

Default Value
() => {}

onVisibleChange

onVisibleChange: (visible) => void

Callback called when the alert visibility changed.

Parameters
visible

boolean

Returns

void

Default Value
() => {}

structure

structure: SlotContent<ToastContext>

Global template for the toast component


transition

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.

Default Value

fadeTransition


visible

visible: boolean

If true the alert is visible to the user

Default Value

true


ToastPropsToken

constant

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.


ToastState

interface

Represents the state of a Toast component.

Properties
ariaCloseButtonLabel

ariaCloseButtonLabel: string

Accessibility close button label

Default Value

'Close'


autoHide

autoHide: boolean

If true automatically hides the toast after the delay.

Default Value

true


children

children: SlotContent<ToastContext>

Template for the toast content


className

className: string

CSS classes to be applied on the widget main container

Default Value

''


delay

delay: number

Delay in milliseconds before hiding the toast.

Default Value

5000


dismissible

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.

Default Value

true


header

header: SlotContent<ToastContext>

Header template for the toast component


hidden

hidden: boolean

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


structure

structure: SlotContent<ToastContext>

Global template for the toast component


visible

visible: boolean

If true the alert is visible to the user

Default Value

true


ToastStructureDirective

class

Directive to define the structure of a toast component. This directive uses a template reference to render the ToastContext.


ToastWidget

type alias

ToastWidget = Widget<ToastProps, ToastState, ToastApi, ToastDirectives>

Represents a Toast widget component.