Modal dialog windows have been around since the early days of the Windows OS on desktops (pre-internet), and have become popular for websites as well—this is especially true since jQuery came onto the scene. Modal windows are used for interacting with the user—typically, to get information from them. Moreover, they help the designers focus the users' attention to where it should be by dimming the background for contrast, as well as disabling any interaction anywhere outside the modal area. One of our use cases for the use of a modal window will be for displaying the login form.

Let's take a look at a quick example in the code that we can try out in our playground, to display a modal window. Since the integration of NGB widgets all follow the same pattern, I won't cover it in as much detail as the collapse NGB widget, but I'll point the important areas.

Our components all start off the same way. We need to create a folder for our component (let's name it ngb-modal) and we need to create our two files—one for our component class, and the other for our component template. Let's name them ngb-modal.component.ts and ngb-modal.component.html, respectively. 

In the sections that follow are the two code listings for our NGB modal component, followed by the necessary imports and declarations—just like we did for our collapse component.