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

No outputs documented yet.

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>`

CSS variables

Theme every pixel with 17 CSS variables. Override them at :root or scope them to a wrapper.

Modal Base Variables

Core styling variables for modal structure and positioning

Variable	Default	Type	Description
`--bs-modal-zindex`	`1055`	number	Z-index of the modal
`--bs-modal-width`	`500px`	length	Default modal width
`--bs-modal-padding`	`1rem`	length	Padding around modal content
`--bs-modal-margin`	`0.5rem`	length	Margin around modal dialog

Modal Appearance

Variables controlling modal colors, borders, and visual effects

Variable	Default	Type	Description
`--bs-modal-color`	`var(--bs-body-color)`	color	Text color of modal content
`--bs-modal-bg`	`var(--bs-body-bg)`	color	Background color of modal content
`--bs-modal-border-color`	`var(--bs-border-color-translucent)`	color	Border color of modal
`--bs-modal-border-width`	`var(--bs-border-width)`	border	Border width of modal
`--bs-modal-border-radius`	`var(--bs-border-radius-lg)`	border	Border radius of modal
`--bs-modal-box-shadow`	`0 0.125rem 0.25rem rgba(0, 0, 0, 0.075)`	shadow	Box shadow of modal

Modal Header

Styling variables for modal header section

Variable	Default	Type	Description
`--bs-modal-header-padding-x`	`1rem`	length	Horizontal padding of modal header
`--bs-modal-header-padding-y`	`1rem`	length	Vertical padding of modal header
`--bs-modal-header-border-color`	`var(--bs-border-color)`	color	Border color of modal header
`--bs-modal-header-border-width`	`0 0 var(--bs-border-width) 0`	border	Border width of modal header

Modal Footer

Styling variables for modal footer section

Variable	Default	Type	Description
`--bs-modal-footer-gap`	`0.5rem`	length	Gap between elements in modal footer
`--bs-modal-footer-border-color`	`var(--bs-border-color)`	color	Border color of modal footer
`--bs-modal-footer-border-width`	`var(--bs-border-width) 0 0 0`	border	Border width of modal footer

Styling and theming

No styling examples are documented yet. This section will include customization recipes and theming examples.