In the preceding section, NGBwidgets, we covered few components that are available in NGB. Of course, you know by now why I would never cover any more than a small number of the available components—right? If you said, yes Aki, I know why. If you covered all the components, you'd basically just be duplicating documentation that is readily available elsewhere, you'd be correct! Covering 3 out of 16 is plenty—it's almost 19% (which is practically the same as duplicating one out of every five pages of documentation!).

But there's also another reason. We're only going to implement two of the three NGB components that we covered—namely, the modal component and the carousel component—and so there is no need to cover too much more than those. OK, let's continue by putting our new found knowledge to practical use.

We learned about implementing the modal, carousel, and collapse components in earlier sections. We created selectors for each of the components. For the modal component, we created a selector named ngb-test-modal; for the carousel component, we created a selector named ngb-test-carousel; and last, but not least, for the collapse component, we created a selector named  ngb-collapse. We now need to use these selectors in the playground.component.html file so that the widgets will be visible in the page.

The following is the updated code of the playground component template file:

<p>
 {{pageTitle}}
</p>

<app-ngb-collapse></app-ngb-collapse>

<app-ngb-modal></app-ngb-modal>

<app-ngb-carousel></app-ngb-carousel>

We added the directives using the selectors for each of the components. Run the app using the ng serve command in the command line and we should see the output, as shown in the following screenshot:

Our application has the widgets integrated, but surely we can do a much better job with the design. In the next few sections, we will learn about some of the design principles and best practices that we will be implementing in the chapters to come.