Dynamically Loaded Bootstrap 4 Modal Component — Powered by Angular

Matt Vaughn
Better Programming
Published in
4 min readMar 22, 2018

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

Create an account to read the full story.

The author made this story available to Medium members only.
If you’re new to Medium, create a new account to read this story on us.

Or, continue in mobile web

Already have an account? Sign in

Written by Matt Vaughn

I love tacos, code, jazz, my husky and maybe 3 people in this world...and of course: Angular. Angularlicious podcast — more info at www.AngularArchitecture.com

Responses (7)

What are your thoughts?

This is good stuff! Thank you. It would have been much more helpful if this also had a sequel where author could tell us how to re use this in child components of the application

--

Hey, so on using this way of adding the modals dynamically to the DOM I noticed that all the markup from the .modal-content and up is already included.
So if I want to change the size of the modal by using .modal-lg on the .modal-dialog div, how would I go about doing that? Thanks very much

--

matt vaughn thank you very much for this wonderful article! I was looking through different sources to do this, but none of them was detailed and simple like yours! The explanation is great, just what I needed and the puzzle finally was solved in my head!

--