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