After logging in,the sidebar nav collapse works only when page is refreshed .Again doesn't work when another navbar button is clicked - mean-stack

Question

I am new to mean stack. I have used a template for nav bar from https://frontendfunn.com/bootstrap-4/admin-dashboard-template-development-tutorial/. Whenever I log in it takes me to the page with nav bar but the problem is when I click collapse bar nothing happens. When I refresh the page it works but clicking on another option in the sidebar, collapse bar option doesn't work. Please help me out.
Screenshot of navigation bar
login.component.ts:
ngOnInit() {
if (this.loginService.isLoggedIn()) {
this.router.navigateByUrl('/addcandidates');
}
}
onSubmit(form: NgForm) {
this.loginService.login(form.value).subscribe(
res => {
// tslint:disable-next-line:no-string-literal
this.loginService.setToken(res['token']);
// this.successful = 'Successfully logged in';
this.router.navigate(['addcandidates']);
},
err => {
this.serverErrorMessages = err.error.message;
}
);
}
main.component.ts:
ngOnInit() {
this.isLoggedIn = this.loginService.isLoggedIn;
}
onLogout() {
this.loginService.deleteToken();
this.router.navigate(['/login']);
}
main.component.html:
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<button class="navbar-toggler sideMenuToggler" type="button">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<a class="nav-link px-2" (click)="onLogout()">
<span class="text">Logout</span>
</a>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">DropDown</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</nav>
<div class="wrapper d-flex">
<div class="sideMenu bg-mattBlackLight">
<div class="sidebar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link px-2" [routerLink]="['/']">
<i class="material-icons icon">dashboard</i>
<span class="text">Dashboard</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link px-2" [routerLink]="['/addcandidates']">
<i class="material-icons icon">person</i>
<span class="text">Create New Test</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link px-2" [routerLink]="['/qb_dept']">
<i class="material-icons icon">insert_chart</i>
<span class="text">Add Question Bank</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link px-2" [routerLink]="['/currentexam']">
<i class="material-icons icon">insert_chart</i>
<span class="text">Current Tests</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link px-2" [routerLink]="['/previousexam']">
<i class="material-icons icon">settings</i>
<span class="text">Previous Tests</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link px-2 sideMenuToggler">
<i class="material-icons icon expandView ">view_list</i>
<span class="text">Collapse Side Bar</span>
</a>
</li>
</ul>
</div>
</div>
</div>