Dynamically Loaded Bootstrap 4 Modal Component — Powered by Angular

My current project requires a modal to display some application information. There are a lot of UI controls out there. However, our current applications are using Bootstrap for themes and application styles. So, these UI controls from @ng-bootstrap that are Bootstrap 4 and built from the ground up just for Angular make a lot of sense. And the modal component is dynamically loaded from the consumer component — pretty cool!

Last month I was able to attend the StackBlitz and Angular.io Release party. Eric Simons demonstrated StackBlitz and the new SDK that allows for embedding StackBlitz. Click the link below to view this application using StackBlitz.

View and edit in Stackblitz.

Or, You Can Go Old-School and Create a New App!

Create the application using the Angular CLI command.

ng new modal-proof

Update the index.html file to reference the Bootstrap CSS — using the CDN.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

Packages

The web application will require the @ng-bootstrap-bootstrap package and any dependencies.

npm install --save @ng-bootstrap/ng-bootstrap@1.0.2
npm install --save ajv@^6.0.0

Modal Component

Create a new component ModalComponent as a generic modal component that we can reuse to wrap other components. We will only need to provide the component a title and reference a specific component as content for the body of the modal dialog.

ng generate component modal

1. Update the import to include @Input; add the @Input() title with a default title value.
2. Inject the public activeModal: NgbActiveModal in the constructor. This allows the modal to hide.

Next, update the component to include the following: