Just before we cover a couple of routing strategies to wrap up this chapter, let's circle back and create our Bootstrap navigation bar for our application. If you recall from the previous chapter, Chapter 3, Bootstrap – Grid Layout and Components, I had mentioned that we'll be covering the Bootstrap navigation component in this chapter. The reason for this is that we're going to be tying our navigation bar to our routing by using routing directives as the menu links, and so the best place to cover that is in this chapter, since it falls into the domain of routing.

In the previous section, I gave you homework to enter the route path URL manually in the browser bar to see the routes working, in this section, we will add all the route URLs to the Bootstrap navbar component, so that the user can just click and navigate instead of typing manually.

At the starting of the chapter, we briefly touched upon routerLink and routerLinkActive. Now it's time to see them in action.

Let's take a look at the app.component.html file, which is the template of our app component. If you are familiar with the notion of master pages in ASP.NET, or a layout page in Rails, then you can consider the app component template as the equivalent for Angular applications. This is because the app component is the top-level component in the tree of components that will form our application. The reason I brought up the notion of a master layout is that whatever HTML is inserted into it is preserved by the server by it rendering the called page within the layout page. While this is not what happens in Angular, since it's not a server-side technology, it does hold true in concept.

What I mean by this is that whatever HTML we insert into the app component's template, it is generally still visible when other components are rendered within it. This makes the app component template a perfect place to hold our navigation bar, since it'll always be visible regardless of what component template is selected to be rendered by our routing rulesets for a given URL that is requested by our users.

Here is the code listing for our app.component.html file:

<div>
 <nav class="navbar navbar-expand-lg navbar-light bg-light">
 <a class="navbar-brand" href="/">LISTCARO</a>
 <button class="navbar-toggler" type="button" data-toggle="collapse" 
   data-target="#navbarSupportedContent" 
   aria-controls="navbarSupportedContent" aria-expanded="false" 
   aria-label="Toggle navigation">
 <span class="navbar-toggler-icon"></span>
 </button>
 <div class="collapse navbar-collapse" id="navbarSupportedContent">
 <ul class="navbar-nav mr-auto">
 <li routerLinkActive="active" class="nav-item"> 
 <a routerLink="/" class="nav-link">Home</a>
 </li>
 <li routerLinkActive="active" class="nav-item"> 
 <a routerLink="photos" class="nav-link">Photos</a>
 </li> 
 <li routerLinkActive="active" class="nav-item"> 
 <a routerLink="listings" class="nav-link">Listings</a>
 </li> 
 <li routerLinkActive="active" class="nav-item"> 
 <a routerLink="features" class="nav-link">Features</a>
 </li>
 <li routerLinkActive="active" class="nav-item"> 
 <a routerLink="pricing" class="nav-link">Pricing</a>
 </li>
 <li routerLinkActive="active" class="nav-item"> 
 <a routerLink="about" class="nav-link">About</a>
 </li>
 <li routerLinkActive="active" class="nav-item"> 
 <a routerLink="support" class="nav-link">Support</a>
 </li>
 <li class="nav-item dropdown">
 <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" 
   role="button" data-toggle="dropdown" aria-haspopup="true" 
   aria-expanded="false">
 User name
 </a>
 <div class="dropdown-menu" aria-labelledby="navbarDropdown">
 <a routerLink="account" class="dropdown-item">Account</a>
 <div class="dropdown-divider"></div>
 <a routerLink="logout" class="dropdown-item">Log out</a>
 </div>
 </li>
 </ul>
 <form class="form-inline my-2 my-lg-0">
 <button class="btn btn-outline-success my-2 my-sm-0" type="submit">
   Log In</button>
 <button class="btn btn-outline-success my-2 my-sm-0" type="submit">
   Try Now</button>
 </form>
 </div>
 </nav>
 <br />
 <router-outlet></router-outlet>
</div>

Take a deep breath, and let's analyze the preceding lines of code. We are using both Angular directives and attributes, along with Bootstrap built-in classes. So let's begin:

• We are creating a menu navbar element, <nav>, provided in Bootstrap, and assigning the built-in navbar classes, navbar-expand-lg navbar-light bg-light.
• We are also creating an element and placeholder for the logo of our application using the navbar-brand class.
• Using the navbar-nav class, we are defining a collection of links.
• We are adding few links using the anchor tag, <a>, and assigning the nav-link class, which will form the links in the menu section.
• We are also creating a drop-down menu using the dropdown-menu class and adding items to the menu using dropdown-item.
• For Angular directives and attributes, we are using routerLink and routerLinkActive and, as explained in the First thing first - basic concepts, section, the routerLink attribute is used to bind the URL resource of the link.
• To highlight the active link, we are using the routerLinkActive attribute. You will notice that for all links, we have assigned the attribute value as active. Angular at runtime will detect the link clicked and will highlight it.

Awesome, good job so far. We have implemented a nav menu for our application. We are just one step away from seeing our application in action.