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 16 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
`offcanvas`	`boolean`	`false`	Opens the dialog as a drawer: flush against the edge named by `placement`, square on that side, stretched to the full height (or width, from the top or bottom), and scrolling in the body so the header and footer stay put. Its width comes from `--hub-modal-offcanvas-width`, not from the size scale — `size: 'lg'` is 800px, which on a narrow window covers the document the drawer is meant to be read against. With no `placement` it opens from the end edge, so a drawer is one decision. Separate from `placement` on purpose: an edge placement alone still gives the floating dialog it always gave.
`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
`variant`	`"primary" \| "success" \| "danger" \| "warning" \| "info" \| string`	—	Semantic accent of the dialog, for one that means something — a destructive confirmation, a success notice. It re-bases the single `--hub-modal-accent` slot, and the emphasis / subtle / on / border roles derive from it on the dialog itself, so one value recolours the tinted background, the outer edge with its header and footer rules, and the title. The stylesheet ships nine: `primary`, `secondary`, `success`, `danger`, `warning`, `info`, `neutral`, `light` and `dark`. Any other string is accepted as well and applies `hub-modal--<name>` to the window, so a custom accent costs one rule in a global stylesheet and no recompilation. A top accent bar belongs to the set too, but ships at zero width: set `--hub-modal-accent-bar-width` on the dialog to turn it on. Without a variant the dialog stays neutral.
`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 hubButton color="secondary" (click)="dismiss()">Cancel</button> <button hubButton color="primary" (click)="close('result')">OK</button> </div> </ng-template>`