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.
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">