Having issues getting Angular Routing to work properly - html

Question

I'm pretty sure I have the routing setup correctly within my application because when I type the correct path it takes me to and displays the correct information. Where I am having issues is the router link. I believe it has something to do with the HTML? When I click on each link nothing happens. Anyways I will post the HTML to see if someone can point out something I may be doing wrong. I've also got the github repository link here: https://github.com/jadenadams329/JIT1
<div class="app-bar-navbar vertical-appbar">
<nav class="navbar navbar-expand-lg navbar-dark bg-primary app-bar-section pr-0 d-flex justify-content-start">
<button class="navbar-toggler1 m-0 focusable" (click)="displaySideNav =!displaySideNav;" (blur)="displaySideNav = false">
<i class="icon-menu-bold"></i>
</button>
<span class="vertical-line-seperator left"> </span>
<div class="navbar-brand d-flex align-items-center">
<img src="assets/images/logo/secondary-logo-site.svg" class="logo-img">
<!-- <i class="icon-bd-logo-bold"></i> -->
<span class="brand-name">JIT Management Console</span>
</div>
<div class="navbar-right-content justify-content-end d-flex">
<div class="navbar-right-toggle d-flex">
<ul class="navbar-nav">
<li class="nav-item dropdown-appbar d-flex">
<span class="vertical-line-seperator left"> </span>
<a class="nav-link navbar-toggler" id="navbarDropdownMenuLink" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
<i class="icon-more-bold text-white rotate-90"></i>
</a>
<ul class="dropdown-menu pull-right" aria-labelledby="dLabe2">
<li role="separator" class="dropdown-divider"></li>
<li class="nav-item">
Sign Out
</li>
</ul>
</li>
</ul>
</div>
<div class="custom-dropdown d-flex">
<ul class="navbar-nav">
<li class="nav-item dropdown-appbar d-flex">
<span class="vertical-line-seperator left"> </span>
<a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Admin
</a>
<ul class="dropdown-menu pull-right" aria-labelledby="dLabe2">
<li>
Sign Out
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<section class="vertical-sidebar collapse navbar-collapse justify-content-end" id="navbarSidebarContent-main"
[ngClass]="{'show':displaySideNav}">
<nav class="nav">
<ul class="sidebar-links">
<li>
<a routerLink="/home">Home</a>
</li>
<li>
<a routerLink="/manage-sessions">Manage Sessions</a>
</li>
<li>
<a routerLink="/export-scancodes">Export ScanCodes</a>
</li>
<li>
<a routerLink="/imu-data">IMU Data</a>
</li>
<li>
<a routerLink="/global-order-days">Global Order Days</a>
</li>
<li>
<a routerLink="/order-exception-report">Order Exception Report</a>
</li>
</ul>
</nav>
</section>
</div>
<div>
<router-outlet></router-outlet>
</div>
What I expect to happen is when I click on the links that it shows the correct view so I do not have to type in the path each time.

Answer 1

You have blur event in button element. Currently It's removing the section element whenever you are focused out of button. remove that blur event from button and place click event on ui element and set the displaySidenav to false.
<button class="navbar-toggler1 m-0 focusable" (click)="displaySideNav =!displaySideNav;" >
<i class="icon-menu-bold"></i>
</button>
<ul class="sidebar-links" (click)="displaySideNav = false">
<li>
<a routerLink="/home">Home</a>
</li>
<li>
<a routerLink="/manage-sessions">Manage Sessions</a>
</li>
<li>
<a routerLink="/export-scancodes">Export ScanCodes</a>
</li>
<li>
<a routerLink="/imu-data">IMU Data</a>
</li>
<li>
<a routerLink="/global-order-days">Global Order Days</a>
</li>
<li>
<a routerLink="/order-exception-report">Order Exception Report</a>
</li>
</ul>