Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.
Open a modal from service
To be able to open modals from service, inject BsModalService to your constructor.
Then, call .show()
method of modal service. Pass a TemplateRef or a component as a first argument and config as a second (optionally).
.show()
method returns an instance of BsModalRef class with .hide()
method and content
property where you'll find a component which you've passed to service
Creating a modal with component just as easy as it is with template. Just pass your component in .show()
method as in example, and don't forget to include your component to entryComponents
of your NgModule
If you passed a component to .show()
you can get access to opened modal by injecting BsModalRef. See example for more info
Nested modals are supported
Modal service events. Modal service exposes 4 events: onShow, onShown, onHide, onHidden. See usage example below.
onHide and onHidden emit dismiss reason. Possible values are backdrop-click
, esc
or null
if modal was closed by direct call of hide()
There are some options that you can configure, like animation, backdrop, closing by Esc button, additional css classes. See the demo below to learn how to configure your modal
Also you can use directive instead of service. See the demos below
Control modal from parent component
Open a modal from another modal
ModalDirective exposes 4 events: OnShow, OnShown, OnHide, OnHidden. See usage example below.
$event
is an instance of ModalDirective. There you may find some useful properties like isShown
, dismissReason
, etc.
For example, you may want to know which one of user's actions caused closing of a modal. Just get the value of dismissReason
,
possible values are backdrop-click
, esc
or null
if modal was closed by direct call of hide()
Show modal right after it has been initialized.
This allows you to keep DOM clean by only appending visible modals to the DOM using *ngIf
directive.
It can also be useful if you want your modal component to perform some initialization operations, but want to defer that until user actually sees modal content. I.e. for a "Select e-mail recipient" modal you might want to defer recipient list loading until the modal is shown.