Import
import { ModalModule } from "@backbase/ui-ang/modal";
Usage
Use the bb-modal-ui component to render a modal and access its API. The modal is composed of the three sub-components: Modal Header, Modal Body and Modal Footer.
<bb-modal-ui [isOpen]="showModal" (confirm)="onConfirm()" (cancel)="onCancel()">
<bb-modal-header-ui title="One line question?"></bb-modal-header-ui>
<bb-modal-body-ui>
<p>Are you sure you want to do this? This will happen if you do that.</p>
</bb-modal-body-ui>
<bb-modal-footer-ui confirmText="Cancel" cancelText="Close"></bb-modal-footer-ui>
</bb-modal-ui>
Adding a trigger
The example below demonstrates how you can trigger and control the modal’s visibility using a custom element.
<!-- Custom trigger buttons -->
<button bbButton (click)="smOpen = true">Open small modal</button>
<button bbButton (click)="lgOpen = true">Open large modal</button>
<button bbButton (click)="xlOpen = true">Open extra large modal</button>
<!-- Small modal -->
<bb-modal-ui [isOpen]="smOpen" (cancel)="smOpen = false" (confirm)="smOpen = false" [modalOptions]="{ size: 'sm' }">
<bb-modal-header-ui title="Small modal"></bb-modal-header-ui>
<bb-modal-body-ui>Small modal content</bb-modal-body-ui>
<bb-modal-footer-ui confirmText="Close"></bb-modal-footer-ui>
</bb-modal-ui>
<!-- Large modal -->
<bb-modal-ui [isOpen]="lgOpen" (cancel)="lgOpen = false" (confirm)="lgOpen = false" [modalOptions]="{ size: 'lg' }">
<bb-modal-header-ui title="Large modal"></bb-modal-header-ui>
<bb-modal-body-ui>Large modal content</bb-modal-body-ui>
<bb-modal-footer-ui confirmText="Close"></bb-modal-footer-ui>
</bb-modal-ui>
<!-- Extra large modal -->
<bb-modal-ui [isOpen]="xlOpen" (cancel)="xlOpen = false" (confirm)="xlOpen = false" [modalOptions]="{ size: 'xl' }">
<bb-modal-header-ui title="Extra large modal"></bb-modal-header-ui>
<bb-modal-body-ui>Extra large modal content</bb-modal-body-ui>
<bb-modal-footer-ui confirmText="Close"></bb-modal-footer-ui>
</bb-modal-ui>
With custom templates
You can use custom templates for the header, body, and footer to create highly customized modals. These are available as directives (i.e., bbCustomModalHeader, bbCustomModalBody, and bbCustomModalFooter) that you can use with <ng-template>. This is especially useful if you want to add extra content to the individual subcomponents, such as additional icons in the modal header or new buttons in the footer.
<bb-modal-ui [isOpen]="showModal" [modalOptions]="{ modalDialogClass: 'modal-overflow' }">
<bb-modal-header-ui>
<ng-template bbCustomModalHeader>
<!-- Your custom implementation of modal header -->
</ng-template>
</bb-modal-header-ui>
<bb-modal-body-ui>
<ng-template bbCustomModalBody>
<!-- Your custom implementation of modal header -->
</ng-template>
</bb-modal-body-ui>
<bb-modal-footer-ui>
<ng-template bbCustomModalFooter>
<!-- Your custom implementation of modal header -->
</ng-template>
</bb-modal-footer-ui>
</bb-modal-ui>
Modal
The bb-modal-ui component provides the parent modal container and shared state.
Inputs
|
Prop |
Type |
Default |
|---|---|---|
|
isOpen |
boolean |
false |
|
modalOptions |
NgbModalOptions |
{} |
|
moneyProtectionBannerClasses |
string |
““ |
|
showMoneyProtectionBanner |
boolean |
false |
isOpen
The isOpen input controls the visibility of the modal window.
<!-- Modal that is opened by default -->
<bb-modal-ui [isOpen]="true">
<bb-modal-header-ui title="Settings"></bb-modal-header-ui>
<bb-modal-body-ui>
<p>Configure your preferences here.</p>
</bb-modal-body-ui>
</bb-modal-ui>
modalOptions
The modalOptions input accepts NgBootstrap modal options for advanced customization. This configuration options can give you control over the modal’s size, backdrop, scrollability, and customizing the modal container. See the CSS Classes documentation below to see other common use cases for using modal options.
<!-- Modal with custom options -->
<bb-modal-ui [isOpen]="showModal" [modalOptions]="{ size: 'lg', backdrop: 'static' }">
<bb-modal-header-ui title="Large Modal"></bb-modal-header-ui>
<bb-modal-body-ui>
<p>This is a large modal that cannot be dismissed by clicking the backdrop.</p>
</bb-modal-body-ui>
</bb-modal-ui>
moneyProtectionBannerClasses
The moneyProtectionBannerClasses input applies custom CSS classes to the money protection banner. For example, this can be useful when using the money protection banner in a full screen modal scenario — you can see this in the using
<!-- Modal with styled money protection banner -->
<bb-modal-ui [isOpen]="showModal" [showMoneyProtectionBanner]="true" moneyProtectionBannerClasses="custom-banner-style">
<bb-modal-header-ui title="Secure Transaction"></bb-modal-header-ui>
<bb-modal-body-ui>
<p>Your transaction is protected.</p>
</bb-modal-body-ui>
</bb-modal-ui>
Using money protection banner in full screen modals
In case you want to use the money protection banner together with full screen modals, you can use the modal-money-protection--full-screen class for proper styling:
<!-- Full screen modal with money protection banner -->
<bb-modal-ui
[isOpen]="showModal"
[showMoneyProtectionBanner]="true"
[moneyProtectionBannerClasses]="modal-money-protection--full-screen"
[modalOptions]="{ modalDialogClass: 'modal-fullscreen' }"
>
<bb-modal-header-ui title="Full screen modal"></bb-modal-header-ui>
<bb-modal-body-ui>
<!-- Full screen content -->
</bb-modal-body-ui>
<bb-modal-footer-ui></bb-modal-footer-ui>
</bb-modal-ui>
showMoneyProtectionBanner
The showMoneyProtectionBanner input displays a money protection banner (e.g. FDIC) at the top of the modal when enabled.
<!-- Modal with money protection banner -->
<bb-modal-ui [isOpen]="true" [showMoneyProtectionBanner]="true">
<bb-modal-header-ui title="One line question?"></bb-modal-header-ui>
<bb-modal-body-ui>
<p>Are you sure you want to do this? This will happen if you do that.</p>
</bb-modal-body-ui>
<bb-modal-footer-ui confirmText="Cancel" cancelText="Close"></bb-modal-footer-ui>
</bb-modal-ui>
Outputs
|
Event |
Type |
Description |
|---|---|---|
|
cancel |
EventEmitter<any> |
Emits when the cancel button or close button is clicked |
|
confirm |
EventEmitter<any> |
Emits when the confirm button is clicked |
|
isOpenChange |
EventEmitter<boolean> |
Emits for two-way binding with the isOpen input |
CSS Classes
The following utility CSS classes are used for additional styling of the modal component.
Overflow
Add the modal-overflow class to handle components with overflow or z-index issues within nested modals.
<!-- Modal with `modal-overflow` class -->
<bb-modal-ui [isOpen]="showModal" [modalOptions]="{ modalDialogClass: 'modal-overflow' }">
<bb-modal-header-ui title="Nested Components"></bb-modal-header-ui>
<bb-modal-body-ui>
<!-- Content with dropdowns or nested components -->
</bb-modal-body-ui>
</bb-modal-ui>
Full Screen
Use the modal-fullscreen class to create a modal that takes up the entire viewport.
<!-- Full screen modal with `modal-fullscreen` class -->
<bb-modal-ui [isOpen]="showModal" [modalOptions]="{ modalDialogClass: 'modal-fullscreen' }">
<bb-modal-header-ui title="Full screen modal"></bb-modal-header-ui>
<bb-modal-body-ui>
<!-- Full screen content -->
</bb-modal-body-ui>
<bb-modal-footer-ui></bb-modal-footer-ui>
</bb-modal-ui>
Accessibility
This component is built with accessibility in mind. See the information below for supported behaviors and configuration options to ensure a fully accessible experience for all users.
ARIA
These inputs support WAI-ARIA compliance and are intended to improve accessibility for users relying on assistive technologies. Use them to provide meaningful semantic information for the component when additional context is needed to convey its purpose, state, or behavior.
|
Prop |
Description |
Default |
|---|---|---|
|
aria-describedby |
Sets a custom ID for the dropdown menu element, used for ARIA relationships |
Modal body ID (auto-generated) |
|
aria-labelledby |
Sets the ARIA role for the dropdown component container |
Modal header ID (auto-generated) |
|
role |
Sets the ARIA role for the dropdown menu container |
"dialog" |
<!-- Complete accessibility configuration example -->
<bb-modal-ui role="alertdialog" aria-labelledby="modal-title" aria-describedby="modal-description" [isOpen]="true" (confirm)="deleteAccount()" (cancel)="cancelDelete()">
<bb-modal-header-ui title="Delete Account" closeButtonAriaLabel="Cancel account deletion"></bb-modal-header-ui>
<bb-modal-body-ui>
<h3 id="modal-title">Do you want to permanently delete your account?</h3>
<p id="modal-description">Please confirm that you want to proceed.</p>
</bb-modal-body-ui>
<bb-modal-footer-ui confirmText="Delete account" cancelText="Keep account"> </bb-modal-footer-ui>
</bb-modal-ui>
Keyboard Navigation
The following keyboard events are bound to actions on the component:
|
Key |
Actions |
|---|---|
|
Escape |
Closes the modal when keyboard focus is within it |
|
Tab ⇥ |
Moves focus to the next focusable element |
|
Tab ⇥ + Shift ⇧ |
Moves focus to the previous focusable element |
Modal Header
The bb-modal-header-ui component provides the modal title and optional close button.
|
Prop |
Type |
Default |
|---|---|---|
|
closeButtonAriaLabel |
string |
"Close modal window" |
|
showClose |
boolean |
true |
|
title |
string |
"” |
<!-- Modal header with all inputs -->
<bb-modal-header-ui
title="Your title"
showClose="true"
closeButtonAriaLabel="Close dialog"
></bb-modal-header-ui>
Modal Body
The bb-modal-body-ui component contains the main modal content.
<!-- Modal body with custom content -->
<bb-modal-body-ui>
<form>
<div class="form-group">
<label for="username">Username</label>
<input type="text" id="username" class="form-control" />
</div>
</form>
</bb-modal-body-ui>
Modal Footer
The bb-modal-footer-ui component provides action buttons for the modal.
|
Prop |
Type |
Default |
|---|---|---|
|
cancelText |
string |
— |
|
confirmText |
string |
— |
|
confirmButtonColor |
ButtonColor |
primary |
|
cancelButtonColor |
ButtonColor |
secondary |
<!-- Modal footer with custom button text -->
<bb-modal-footer-ui
confirmText="Save Changes"
cancelText="Discard"
></bb-modal-footer-ui>