Angular 2 - hide navbar loading on navigation click

Question

On a mobile device, clicking on the "Configure Navigator" button does not hide the menu.

My menu button that appears for mobile phones:

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 

A search for this problem returned results without reference to angular 2, and I don't know how to implement them.

How can I hide my navigator when a user clicks a link?

 <li><a routerLink="/page">Click this should hide nav</a></li> 

Answer 1

You can add a custom directive that will do this for you.

 import { Directive, ElementRef, Input, HostListener } from "@angular/core"; @Directive({ selector: "[menuClose]" }) export class CloseMenuDirective { @Input() public menu: any; constructor(private element: ElementRef) { } @HostListener("click") private onClick() { this.menu.classList.remove("show"); } } 

Remember to add this to your app.module in the ad array

 import { CloseMenuDirective } from './directives/close-menu.directive'; @NgModule({ declarations: [ ...declarations, CloseMenuDirective ] }) export class AppModule { } 

And then in your HTML, you create a link to your menu and pass that to your link element.

 <div class="page-layout"> <!-- Mark the menu with #menu, thus creating a reference to it --> <aside class="collapse navbar-toggleable page-menu" id="navbar-header" #menu> <ul class="nav"> <li class="nav-item"> <a class="nav-link" [routerLink]="['./somewhere']" routerLinkActive="active" menuClose <!-- Our custom directive above --> [menu]="menu"> <!-- Bind to menu --> <span>My Link</span> </a> </li> </ul> </aside> </div> 

Answer 2

This is a limitation of navbar ( https://github.com/valor-software/ngx-bootstrap/issues/540 ). Therefore, you need to manipulate the DOM element.

 <div class="navbar-header page-scroll"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" routerLink="/"> <img src="assets/images/logo.png"> </a> </div> <div class="collapse navbar-collapse navbar-ex1-collapse"> <ul class="nav navbar-nav navbar-right" > <li class="hidden"> <a></a> </li> <li><a routerLink="/" (click)="onMenuClick()">Home</a></li> <li><a routerLink="/about" (click)="onMenuClick()">About</a></li> </ul> </div> 

And on the .ts file the minimum shoul code:

 import { Component, ElementRef, Renderer } from '@angular/core'; export class HeaderComponent { constructor(private el: ElementRef, private renderer: Renderer) { } onMenuClick() { //this.el.nativeElement.querySelector('.navbar-ex1-collapse') get the DOM //this.renderer.setElementClass('DOM-Element', 'css-class-you-want-to-add', false) if 3rd value is true //it will add the css class. 'in' class is responsible for showing the menu. this.renderer.setElementClass(this.el.nativeElement.querySelector('.navbar-ex1-collapse'), 'in', false); } }