OK. So, after from following the directions in the preceding sections, you should now have a playground component that you can use as a sandbox for experimenting with almost anything you want. In our immediate case, we'll be using it for experimenting with NGB widgets (that is, components), but we'll also be using this sandbox during Chapter 9, Working with Angular Material.

Before we move on to inserting the first NGB widget, we'll be taking a look at. It's a good idea to create a temporary menu link for our playground view so that we can get to it easily from within our application. Let's do this now.

In your IDE, open your app.component.html file. This is the main, or starting, a template that is loaded for your Angular application during the bootstrapping process. It is also where we created our menu in Chapter 4, Routing. In this file, insert the following code after the listings menu item:

<li routerLinkActive="active" class="nav-item"> 
  <a routerLink="playground" class="nav-link">Playground</a> 
</li>

All this small HTML code snippet does is to add a playground navigation link in our menu, and instruct Angular's routing system to load the playground component (and thus the playground template, and then recursively load any child components) when it is clicked.

OK, good—we're now all set up and ready to take a look at our first NGB widget.