How do I Reference a component in navbar on click

Question

This is the HTML code using Bootstrap classes. I want to display a specific component when I click one of the three elements on the navbar.

<nav class="navbar navbar-light bg-light navbar-expand-md">
   <a href="#" class="navbar-brand">Navbar</a>
   <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
         <li class="nav-item">
            <a href="#" class="nav-link">FirstEl</a>
         </li>
         <li class="nav-item">
            <a href="#" class="nav-link">SecondEl</a>
         </li>
      </ul>
      <ul class="nav navbar-nav ml-auto">
         <li class="dropdown nav-item ">
            <a href="#" class="dropdown-toggle nav-link " role="button">Third
               <span class="caret"></span>
            </a>
      <ul class="dropdown-menu">
         <li class="dropdown-item">
            <a href="#">Save Data</a>
         </li>
         <li class="dropdown-item">
            <a href="#">Fetch Data</a>
         </li>
      </ul>
         </li>
      </ul>
   </div>
</nav>

Answer 1

I've created a simple project for your understanding stackblitz

You can create a separate file for your routes if you have more routes in your application.

The Angular Router enables navigation from one view to the next as users perform application tasks.

It's better to refer documentation