In my Angular-13 project, when a user successfully logs in he's redirected to the dashboard. Then on the dashboard Nav header the user can signout:

header.component.ts:

signOut() {
 this.router.navigate(['/auth'])
}

header.component.html:

<li class="nav-item dropdown user-menu">
  <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">
    <img src="assets/img/user2-160x160.jpg" class="user-image img-circle elevation-2" alt="User Image">
    <span class="d-none d-md-inline">Alexander Pierce</span>
  </a>
  <ul class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
    <!-- User image -->
    <li class="user-header bg-primary">
      <img src="assets/img/user2-160x160.jpg" class="img-circle elevation-2" alt="User Image">
    </li>
    <!-- Menu Footer-->
    <li class="user-footer">
      <a href="#" class="btn btn-default btn-flat">Profile</a>
      <a class="btn btn-danger btn-flat float-right" (click)="signOut()">Sign out</a>
    </li>
  </ul>
</li>

I expect that when I click on nav-item dropdown user-menu, it should dropdown and display signout. Then the user should be able to signout.

Instead of the it redirects to the home page.

When I changed # to javascript: void(0); the dropdown did not respond.

How do I resolve this?

Thanks