O'Reilly logo

Hands-on Full Stack Development with Angular 5 and Firebase by Uttam Agarwal

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Enabling routes in an app component

In this section, we enable routing and create the main navigation bar for our application. The steps to enable routes are as follows:

  • Adding the base reference URL: We will need to add a base element in index.html to tell the Angular router how to compose the navigation URL. 

We added href in the head tag of index.html:

<base href="/">
  • Creating the main navigation bar: Most web applications have a navigation bar at the top of the page for navigating to different pages in the application. We have added a main navigation bar for our friends application using the bootstrap nav bar component. 
  1. The first step is to include the nav tag in app.component.html, as follows:
<nav class="navbar navbar-expand-lg ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required