So I am developing an Angular 4 app using a bootstrap menu. The Nav is a component that is shown in all views of the app. When you use the submenu link you get a page swap but the nav resets to the default state. I need it to remember the last state it was in or prevent the collapse from happening. I looked at examples on Stack that use jQuery, however, I am using Angular 4, so that would not be a solution for me here. Check out the other examples I have looked at for solutions:
How do I keep the child menu open when loaded?
bootstrap dropdown open on pageload
Keep Bootstrap Dropdown open in Navbar no matter what
How to keep a submenu open when the page changes
Bootstrap toggle menu expand on page load
The one using localStorage was an interesting idea but I couldn't figure that out. Anyways here is the code I have:
nav.component.html
<div class="nav flex-column col-sm-3 col-md-2">
<div class="nav-title" (mouseenter)="mouseEnter($event)" (mouseleave)="mouseLeave($event)">
<div [ngClass]="search">
<img src="../../assets/img/INEO-LOGO.svg" alt="ineo-logo" class="logo">
<i class="fa fa-search fa-1x search-icon" aria-hidden="true"></i>
<input type="text" class="form-control nav-subtext" placeholder="Search Transferee">
<i class="glyphicon glyphicon-remove-circle clear" (click)="clear()"></i>
</div>
</div>
<li class="nav-menu nav-text">
<a routerLink="#" class="nav-link">Transferee Dashboard</a>
</li>
<li class="nav-menu nav-text">
<a routerLink="#" class="nav-link">Setup</a>
</li>
<li class="nav-menu nav-text">
<a routerLink="#" class="nav-link">Accounting</a>
</li>
<li class="nav-menu nav-text" data-toggle="collapse" data-target="#collapse" (click)="toggleCollapse($event)" id="toggle">
<a class="{{nav}}" id="tools">Tools</a>
<div class="collapse" id="collapse">
<ul class="submenu">
<li class="nav-subtext">
<a routerLink="/approvals">Approvals</a>
</li>
<li class="nav-subtext">
<a routerLink="/change-auth">Change Authorization ID</a>
</li>
<li class="nav-subtext">
<a routerLink="/copyfile">Copy Files</a>
</li>
<li class="nav-subtext">
<a routerLink="/email">Email</a>
</li>
<li class="nav-subtext">
<a routerLink="/templates">Email Templates</a>
</li>
<li class="nav-subtext">
<a routerLink="/encrypt">Encryption</a>
</li>
<li class="nav-subtext">
<a routerLink="/excel-import">Excel Import</a>
</li>
<li class="nav-subtext">
<a routerLink="/formulas">Formulas</a>
</li>
<li class="nav-subtext">
<a routerLink="/global-updates">Global Updates</a>
</li>
<li class="nav-subtext">
<a routerLink="/import-export">Import Export</a>
</li>
<li class="nav-subtext">
<a routerLink="/maintain-log">Maintain Log</a>
</li>
<li class="nav-subtext">
<a routerLink="/preferences">Preferences</a>
</li>
<li class="nav-subtext">
<a routerLink="/restore-delete-history">Restore/Delete/History</a>
</li>
<li class="nav-subtext">
<a routerLink="/task-policies">Task Policies</a>
</li>
<li class="nav-subtext">
<a routerLink="/ticklers">Ticklers</a>
</li>
<li class="nav-subtext">
<a routerLink="/unlock">Unlock Records</a>
</li>
<li class="nav-subtext">
<a routerLink="/user-tasks">User Tasks</a>
</li>
</ul>
</div>
</li>
<li class="nav-menu nav-text">
<a routerLink="#" class="nav-link">Reports</a>
</li>
<li class="nav-menu nav-text">
<a routerLink="#" class="nav-link">Custom</a>
</li>
<li class="nav-menu nav-text">
<a routerLink="#" class="nav-link">Tax</a>
</li>
<li class="nav-menu nav-text">
<a routerLink="#" class="nav-link">Lump Sum</a>
</li>
<li class="nav-menu nav-text">
<a routerLink="#" class="nav-link">Global Compensation</a>
</li>
<li class="nav-menu nav-text">
<a routerLink="#" class="nav-link">System Information</a>
</li>
</div>
nav.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-nav',
templateUrl: './nav.component.html',
styleUrls: ['./nav.component.scss']
})
export class NavComponent implements OnInit {
nav: string = '';
show: boolean = false;
search: string = 'search';
toggleCollapse() {
// change show
this.show = !this.show;
// Change style of active link
if (this.show !== true) {
this.nav = 'nav-link';
} else {
this.nav = 'nav-link-active nav-menu-active-text';
}
}
mouseEnter($event) {
this.search = $event.type == 'mouseenter' ? 'search-box' : 'search';
}
mouseLeave($event) {
this.search = $event.type == 'mouseleave' ? 'search' : 'search-box';
}
clear() {
let text = document.getElementsByTagName('input');
for (let i = 0; i < text.length; i ++) {
if(text[i].type === 'text' && text[i].value !== '') {
text[i].value = '';
}
}
}
constructor() { }
ngOnInit() {
}
}
Any help would be great!
Also if you provide an answer please explain it.
Thanks
