API reference

Here's the full contract for modal: everything you can bind, listen to, project and theme, gathered in one place. Wire up what you need and style what you want — it's standalone and signal-friendly.

Inputs

Dial modal in with 14 inputs. Bind them like any Angular @Input.

Name	Type	Default	Description
`animation`	`boolean`	—	If true, modal opening and closing will be animated. Default: true
`backdrop`	`boolean \| "static"`	—	If true, the backdrop element will be created. Alternatively, specify "static" for a backdrop which doesn't close the modal on click. Default: true
`centered`	`boolean`	—	If true, the modal will be centered vertically. Default: false
`placement`	`HubModalPlacement`	—	Controls where the modal is placed within the viewport. Default: HubModalPlacement.Center
`keyboard`	`boolean`	—	If true, the modal will be closed when Escape key is pressed. Default: true
`closeOnNavigation`	`boolean`	—	If true, the modal will be closed when the user navigates back in browser history (history.back(), browser back button). Default: true
`size`	`"sm" \| "lg" \| "xl" \| string`	—	Size of the modal window
`windowClass`	`string`	—	A custom class to append to the modal window
`backdropClass`	`string`	—	A custom class to append to the modal backdrop
`dismissSelector`	`string`	—	Custom selector for elements that can trigger the dismissal of the modal window. Default: "[data-dismiss=\"modal\"]"
`closeSelector`	`string`	—	Custom selector for elements that can trigger the closing of the modal window. Default: "[data-close=\"modal\"]"
`headerSelector`	`string`	—	Custom selector for the header element of the modal window
`footerSelector`	`string`	—	Custom selector for the footer element of the modal window
`data`	`any`	—	Additional data that needs to be passed to the modal window when it is opened

Outputs

React to what modal does — 1 events to hook your logic onto.

Name	Type	Description
`dismiss`	`any`	Emitted by the modal window when the user dismisses the modal, e.g. by pressing Escape, clicking the backdrop, or activating the built-in close button. The payload is the dismiss reason (ModalDismissReasons.ESC, ModalDismissReasons.BACKDROP_CLICK, or a custom value).

Methods

Drive modal from code — 17 methods on its programmatic surface.

Name	Signature	Returns	Description
`HubModal.open`	`open<C, R, D>(content: Type<C> \| TemplateRef<any> \| string, options?: HubModalOptions<D>): HubModalRef<C, R>`	`HubModalRef<C, R>`	Opens a new modal window with the given content (component type, TemplateRef, or string) and options, and returns a HubModalRef to control it. Content components can inject HubActiveModal and the HUB_MODAL_DATA token to interact with the modal and read the data payload.
`HubModal.dismissAll`	`dismissAll(reason?: any): void`	—	Dismisses all currently displayed modal windows with the supplied reason.
`HubModal.hasOpenModals`	`hasOpenModals(): boolean`	`boolean`	Indicates if there are currently any open modal windows in the application.
`HubModal.activeInstances`	`activeInstances: EventEmitter<HubModalRef[]>`	`EventEmitter<HubModalRef[]>`	Event emitter that emits the list of currently open HubModalRef instances every time a modal is opened or removed.
`HubModalRef.close`	`close(result?: R): void`	—	Closes the modal with an optional result value. The HubModalRef.result promise is resolved with the provided value.
`HubModalRef.dismiss`	`dismiss(reason?: any): void`	—	Dismisses the modal with an optional reason value. The HubModalRef.result promise is rejected with the provided value. Honours the beforeDismiss guard when one was configured.
`HubModalRef.update`	`update(options: HubModalUpdatableOptions): void`	—	Updates options of an opened modal (aria attributes, centered, placement, fullscreen, backdropClass, size, variant, windowClass, modalDialogClass).
`HubModalRef.componentInstance`	`componentInstance: C \| void`	`C \| void`	The instance of the component used as modal content. Returns undefined when a TemplateRef was used as content or when the modal is closed.
`HubModalRef.result`	`result: Promise<R>`	`Promise<R>`	Promise resolved with the close result when the modal is closed and rejected with the dismiss reason when it is dismissed.
`HubModalRef.closed`	`closed: Observable<R>`	`Observable<R>`	Observable that emits the result passed to close() when the modal is closed.
`HubModalRef.dismissed`	`dismissed: Observable<any>`	`Observable<any>`	Observable that emits the dismiss reason when the modal is dismissed — the value passed to dismiss(), or an internal reason such as backdrop click or Escape.
`HubModalRef.shown`	`shown: Observable<void>`	`Observable<void>`	Observable that emits and completes once the modal is fully visible and its opening animation has finished.
`HubModalRef.hidden`	`hidden: Observable<void>`	`Observable<void>`	Observable that emits and completes once both the modal window and the backdrop are hidden, animations finished, and their elements removed from the DOM.
`HubActiveModal.close`	`close(result?: R): void`	—	Closes the modal hosting the content component, resolving the HubModalRef.result promise with the optional result value.
`HubActiveModal.dismiss`	`dismiss(reason?: any): void`	—	Dismisses the modal hosting the content component, rejecting the HubModalRef.result promise with the optional reason value.
`HubActiveModal.update`	`update(options: HubModalUpdatableOptions): void`	—	Updates options of the opened modal from inside the content component.
`HubActiveModal.data`	`data: D`	`D`	The typed payload passed through HubModalOptions.data. Equivalent to injecting the HUB_MODAL_DATA token; resolves to null when no data option was provided.

Templates

Make it yours — 1 template slots let you project custom markup.

Name	Description	Example
`Modal Template`	Template reference that can be passed to the modal service	`<ng-template #modalTemplate let-close="close" let-dismiss="dismiss"> <div class="modal-header"> <h4 class="modal-title">Modal Title</h4> </div> <div class="modal-body"> Modal content goes here </div> <div class="modal-footer"> <button class="btn btn-secondary" (click)="dismiss()">Cancel</button> <button class="btn btn-primary" (click)="close('result')">OK</button> </div> </ng-template>`