API modal

• Data

PropsConfig<ModalProps<Data>>

config of the modal, either as a store or as an object containing values or stores.

ModalWidget<Data>

a new modal widget instance

ModalProps<any>

the default modal config

• Data

The type of data associated with the modal.

patch: (parameters) => void

Method to change some modal properties.

Modify the parameter values, and recalculate the stores accordingly

Partial<ModalProps<Data>>

void

close(result?): void

Closes the modal with the given result.

any

result of the modal, as passed in the result property of the event passed to the onBeforeClose event handler (and possibly changed by it) and resolved by the promise returned by the open method.

void

open(): Promise<any>

Opens the modal and returns a promise that is resolved when the modal is closed. The resolved value is the result passed to the close method and possibly changed by the onBeforeClose event handler

Promise<any>

cancel: boolean

Whether to cancel the close of the modal. It can be changed from the onBeforeClose event handler.

result: any

Result of the modal, which is the value passed to the close method and later resolved by the promise returned by the open method. If needed, it can be changed from the onBeforeClose event handler.

• Data

• Data

readonly animated: InputSignalWithTransform<undefined | boolean, unknown>

Whether the modal and its backdrop (if present) should be animated when shown or hidden.

true

readonly ariaCloseButtonLabel: InputSignal<undefined | string>

Value of the aria-label attribute to put on the close button.

'Close'

readonly backdrop: InputSignalWithTransform<undefined | boolean, unknown>

Whether a backdrop should be created behind the modal.

true

readonly backdropClass: InputSignal<undefined | string>

Classes to add on the backdrop DOM element.

''

readonly backdropTransition: InputSignal<undefined | TransitionFn>

The transition to use for the backdrop behind the modal (if present).

fadeTransition

readonly beforeClose: OutputEmitterRef<ModalBeforeCloseEvent>

Event to be triggered when the modal is about to be closed (i.e. the ModalApi.close|close method was called).

event giving access to the argument given to the ModalApi.close|close method and allowing to cancel the close process.

() => {}

readonly children: InputSignal<SlotContent<ModalContext<Data>>>

Body of the modal.

readonly className: InputSignal<undefined | string>

CSS classes to be applied on the widget main container

''

readonly closeButton: InputSignalWithTransform<undefined | boolean, unknown>

Whether to display the close button.

true

readonly closeOnOutsideClick: InputSignalWithTransform<undefined | boolean, unknown>

Whether the modal should be closed when clicking on the viewport outside the modal.

true

readonly container: InputSignal<undefined | null | HTMLElement>

Which element should contain the modal and backdrop DOM elements. If it is not null, the modal and backdrop DOM elements are moved to the specified container. Otherwise, they stay where the widget is located.

typeof window !== 'undefined' ? document.body : null

readonly contentData: InputSignal<undefined | Data>

Data to use in content slots

readonly footer: InputSignal<SlotContent<ModalContext<Data>>>

Footer of the modal.

readonly fullscreen: InputSignalWithTransform<undefined | boolean, unknown>

Option to create a fullscreen modal, according to the bootstrap documentation.

false

readonly header: InputSignal<SlotContent<ModalContext<Data>>>

Header of the modal. The default header includes ModalProps.title|title.

readonly hidden: OutputEmitterRef<void>

Event to be triggered when the transition is completed and the modal is not visible.

() => {}

readonly modalTransition: InputSignal<undefined | TransitionFn>

The transition to use for the modal.

fadeTransition

readonly shown: OutputEmitterRef<void>

Event to be triggered when the transition is completed and the modal is visible.

() => {}

readonly structure: InputSignal<SlotContent<ModalContext<Data>>>

Structure of the modal. The default structure uses ModalProps.header|header, ModalProps.children|children and ModalProps.footer|footer.

readonly title: InputSignal<SlotContent<ModalContext<Data>>>

Title of the modal.

readonly visible: InputSignalWithTransform<undefined | boolean, unknown>

Whether the modal should be visible when the transition is completed.

false

readonly visibleChange: OutputEmitterRef<boolean>

Event to be triggered when the visible property changes.

new value of the visible propery

() => {}

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

• Data

The type of data associated with the modal.

api: ModalApi<Data>

all the api functions to interact with the widget

directives: ModalDirectives

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

state: AngularState<ModalWidget<Data>>

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

backdropDirective: Directive

Directive to put on the backdrop DOM element.

backdropPortalDirective: Directive

Portal directive to put on the backdrop DOM element.

closeButtonDirective: Directive

Directive that adds all the necessary attributes to the close button

dialogDirective: Directive

Directive to apply to the dialog element when using the native HTMLDialogElement

modalDirective: Directive

Directive to put on the modal DOM element.

modalPortalDirective: Directive

Portal directive to put on the modal DOM element.

• Data

• Data

• Data

The type of data that the modal will handle.

animated: boolean

Whether the modal and its backdrop (if present) should be animated when shown or hidden.

true

ariaCloseButtonLabel: string

Value of the aria-label attribute to put on the close button.

'Close'

backdrop: boolean

Whether a backdrop should be created behind the modal.

true

backdropClass: string

Classes to add on the backdrop DOM element.

''

backdropTransition: TransitionFn

The transition to use for the backdrop behind the modal (if present).

fadeTransition

children: SlotContent<ModalContext<Data>>

Body of the modal.

className: string

CSS classes to be applied on the widget main container

''

closeButton: boolean

Whether to display the close button.

true

closeOnOutsideClick: boolean

Whether the modal should be closed when clicking on the viewport outside the modal.

true

container: null | HTMLElement

Which element should contain the modal and backdrop DOM elements. If it is not null, the modal and backdrop DOM elements are moved to the specified container. Otherwise, they stay where the widget is located.

typeof window !== 'undefined' ? document.body : null

contentData: Data

Data to use in content slots

footer: SlotContent<ModalContext<Data>>

Footer of the modal.

fullscreen: boolean

Option to create a fullscreen modal, according to the bootstrap documentation.

false

header: SlotContent<ModalContext<Data>>

Header of the modal. The default header includes title.

modalTransition: TransitionFn

The transition to use for the modal.

fadeTransition

onBeforeClose: (event) => void

Event to be triggered when the modal is about to be closed (i.e. the close method was called).

ModalBeforeCloseEvent

event giving access to the argument given to the close method and allowing to cancel the close process.

void

() => {}

onHidden: () => void

Event to be triggered when the transition is completed and the modal is not visible.

void

() => {}

onShown: () => void

Event to be triggered when the transition is completed and the modal is visible.

void

() => {}

onVisibleChange: (visible) => void

Event to be triggered when the visible property changes.

boolean

new value of the visible propery

void

() => {}

structure: SlotContent<ModalContext<Data>>

Structure of the modal. The default structure uses header, children and footer.

title: SlotContent<ModalContext<Data>>

Title of the modal.

visible: boolean

Whether the modal should be visible when the transition is completed.

false

open<Data>(options, injector): Promise<any>

Opens a modal dialog with the specified options.

• Data

The type of data that the modal will handle.

Partial<ModalProps<Data>>

The options to configure the modal.

Injector = ...

The injector to use when creating the modal component

Promise<any>

A promise that resolves when the modal is closed.

• Data

The type of the data associated with the modal.

ariaCloseButtonLabel: string

Value of the aria-label attribute to put on the close button.

'Close'

backdropClass: string

Classes to add on the backdrop DOM element.

''

backdropHidden: boolean

Whether the backdrop is fully hidden. This can be true either because backdrop is false or because visible is false and there is no current transition.

children: SlotContent<ModalContext<Data>>

Body of the modal.

className: string

CSS classes to be applied on the widget main container

''

closeButton: boolean

Whether to display the close button.

true

container: null | HTMLElement

Which element should contain the modal and backdrop DOM elements. If it is not null, the modal and backdrop DOM elements are moved to the specified container. Otherwise, they stay where the widget is located.

typeof window !== 'undefined' ? document.body : null

contentData: Data

Data to use in content slots

footer: SlotContent<ModalContext<Data>>

Footer of the modal.

fullscreen: boolean

Option to create a fullscreen modal, according to the bootstrap documentation.

false

header: SlotContent<ModalContext<Data>>

Header of the modal. The default header includes title.

hidden: boolean

Whether the modal is fully hidden.

modalElement: null | HTMLElement

DOM element of the modal.

structure: SlotContent<ModalContext<Data>>

Structure of the modal. The default structure uses header, children and footer.

title: SlotContent<ModalContext<Data>>

Title of the modal.

transitioning: boolean

Whether there is an active transition to either display or hide the modal.

visible: boolean

Whether the modal should be visible when the transition is completed.

false

• Data

• Data

• Data

The type of data that the modal widget will handle.