How to use a sidebar on 2 pages

Issue

I have a folder named Sidebar.

Then inside this folder, I have a folder named Views, with inside 2 folders which are Home and Devise.

In sidebarComponent.html, I have this:

<div class="d-flex">
   <div
      class="d-flex flex-column vh-100 flex-shrink-0 p-3 text-white"
      style="background-color: #1F6AB3;"
      >
      <a
         href="/"
         class="
         d-flex
         align-items-center
         mb-3 mb-md-0
         me-md-auto
         text-white text-decoration-none
         "
         >
         <svg class="bi me-2" width="80" height="32"></svg>
         <span class="fs-4">Logo </span>
      </a>
      <hr />
      <ul class="nav nav-pills flex-column mb-auto">
         <li>
            <a href="home" class="nav-link text-white">
            <i class="fa fa-key"></i><span class="ms-2">Home</span>
            </a>
         </li>
         <li>
            <a href="devise" class="nav-link text-white">
            <i class="fa fa-credit-card"></i><span class="ms-2">Devise</span>
            </a>
         </li>
      </ul>
      <hr />
      <div></div>
   </div>
   <div class="w-100">
      <nav class="navbar navbar-light" style="background-color: #1F6AB3; "></nav>
   </div>
</div>

Then, In the file Home.component.html

<app-sidebar></app-sidebar>
<div class="container pt-5 text-center">
   <h1 class="pb-5">Home Page</h1>
   <form>
      <div class="mb-3">
         <div class="d-inline-flex col-md-4 col-form-label text-right">
            <label
               for="exampleInputEmail1"
               class="form-label d-flex justify-content-end align-items-end pe-3"
               style="min-width: 158px !important"
               >Wallet
            </label>
            <input
               type="text"
               class="form-control"
               name="exampleInputEmail1"
               style="min-width: 380px"
               aria-describedby="emailHelp"
               required
               />
         </div>
      </div>
      <div class="mb-3">
         <div class="d-inline-flex col-md-4 col-form-label text-right">
            <label
               for="exampleInputEmail1"
               class="form-label d-flex justify-content-end align-items-end pe-3"
               style="min-width: 158px !important"
               >Company</label
               >
            <input
               type="text"
               class="form-control"
               name="exampleInputEmail1"
               style="min-width: 380px"
               aria-describedby="emailHelp"
               required
               />
         </div>
      </div>
      <div class="row">
         <div class="text-center">
            <button type="submit" class="btn btn-primary">Rechercher</button>
         </div>
      </div>
   </form>
</div>

When, I click on Home, the page stays empty.

I don't understand why?

I can give you my code here -> https://stackblitz.com/edit/angular-ivy-1l46hw?file=src/app/views/sidebar/views/home/home.component.html

I thank you in advance for your help.

Solution

You have two issues.

1. app.component.html should have <router-outlet></router-outlet> element, it's placeholder element where angular injects components when route changed.
2. To navigate in angular you should use [routerLink] directive, otherwise your app will constantly be reloaded on every route change

Fork of your example - https://stackblitz.com/edit/angular-ivy-3gw65c?file=src%2Fapp%2Fapp.component.html

Answered By - Cowcancry