There are only two dependencies for NGB (Angular and Bootstrap CSS), and luckily our, example application already has these two things in place—one by default (since our example application is an Angular application), and the other from our having installed Bootstrap during Chapter 3, Bootstrap – Grid Layout and Components. However, we are going to add something to our example application so that we can experiment with using NGB components—a playground view.

A long-standing traditional thing I do when building web applications of any technology stack, and not just for Angular applications, is to add a page as a place where I can experiment with stuff within the context of the application that I'm building at the time. I refer to that as a playground. In our case, our playground will be a component whose template will act as our experimental canvas as we explore a few NGB components. We're also going to hook it up to our menu so that we can access it easily.

We'll hang on to our playground view throughout the rest of the book, only deleting it in Chapter 15, Deploying Angular Applications, where we'll learn how to deploy our application and won't want our playground to go along for the ride.

So, let's do that now. It has been a while since we've added components to our example application that we created in Chapter 4, Routing, and so I wanted to take this opportunity to enumerate the steps to do this (within their own sections that follow) using the addition of the playground as the example. Note that this is the manual way of adding a component to our project—unlike using the CLI to add it for us, as we did a few chapters ago.