Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.

Contents

Usage

Service

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

Examples

Template

Component

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

Nested modals are supported

Events

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()

Options

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

Directive

Also you can use directive instead of service. See the demos below

Examples

Static modal

Optional sizes

Child modal

Control modal from parent component

Nested modals

Open a modal from another modal

Modal events

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()

Auto shown modal

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.

API Reference