Topic: NavBar does not close on click after navigating programmatically (responsive view)
My NavBar works fine up to a point. Initially, it closes as expected upon the click of a nav-item routerLink. But when a user logs out of my application, I use the navigateByUrl method to push them to the login page along with the hide() method on the navbar as it doesn't close automatically upon programmatic navigation. After the navigateByUrl method is called, the NavBar changes its behaviour and remains open after a routerLink has been clicked.
I've read through the docs and some of the other support requests and changed all of my routerLinks to the property binding syntax
[routerLink]="['/login']"
But still, the navbar menu remains open until the app is reloaded
As a workaround, I have subscribed to the router events and closed the NavBar upon the Navigation Start event. I'm wondering if there is a better way or of there is something that I'm missing
// Subscribe to the router
this.router.events.subscribe((val) => {
// Filter the event type
if (val instanceof NavigationStart) {
// Hide the navbar
this.navbar.hide();
// Debug log
console.log('NavBar closed');
}
});
We are currently working on the problems with links added dynamically and they should be resolved in next version.
For now please try to use ViewChild decorator to get access to navbar component methods in your ts file, then create a method that will hide the navbar and add it to (click) event of the logout button.
Here is an example:
<mdb navbar #navbar></mdb-navbar>
@ViewChild('navbar') navbar: NavbarComponent;
hideNavbar() {
if (this.navbar.shown) {
this.navbar.hide();
}
}
Sorry for the delay Arkadiusz. The links are within the component, yes. I'm showing and hiding different links asynchronously based on state.auth in the OnInit Lifecycle hook.
app.component.html
<links>
<ul class="navbar-nav mr-auto">
<li class="nav-item active" *ngIf="isLoggedIn$ | async">
<a [routerLink]="['/home']"
class="nav-link waves-light"
mdbWavesEffect>Home<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item" *ngIf="isLoggedOut$ | async">
<a [routerLink]="['/auth/login']"
class="nav-link waves-light"
mdbWavesEffect>Login</a>
</li>
<li class="nav-item" *ngIf="isLoggedOut$ | async">
<a [routerLink]="['/auth/register']"
class="nav-link waves-light"
mdbWavesEffect>Register</a>
</li>
<li class="nav-item" *ngIf="isLoggedIn$ | async">
<a (click)="logout()"
class="nav-link waves-light"
mdbWavesEffect>Logout</a>
</li>
</ul>
<form class="form-inline waves-light" mdbWavesEffect>
<div class="md-form my-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search">
</div>
</form>
There is a closing link tag. This editor strips it out
app.component.ts
ngOnInit(): void {
this.isLoggedIn$ = this.store.pipe(
select(isLoggedIn)
);
this.isLoggedOut$ = this.store.pipe(
select(isLoggedOut)
);
// Stop the spinner
this.spinner.stop();
}
We will take a closer look at it to check if there are any problems with the component code.
Does the user log out by clicking on the link that is inside navbar 'links' component? If so, is this logout link generated dynamically after the navbar component has already rendered?
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Free
- Premium support: No
- Technology: MDB Angular
- MDB Version: 7.0.0
- Device: Desktop
- Browser: Chrome
- OS: Windows 10
- Provided sample code: No
- Provided link: No