Bootstrap 4 navbar force collapse on Angular 2 route change

Question

I want to implement something like the following “correct” method in Angular 2:

$('.collapse').hide(); 

What would be the "Angular 2 path"? Am I just using my own JavaScript? Are there any built-in Angular methods that I should use?

Change Let me add some context for my specific case.

I have a Bootstrap 4 navigation bar with a folding nav. If you pull out the navigator, and then click the link, the navigator will not disappear as you would expect it .

I want that when you click any link anywhere, navbar returns to a minimized state.

Here is what my caption on the navigator looks like:

 <nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse fixed-top"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#foodie-navbar" aria-controls="foodie-navbar" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" routerLink="/">Foodie</a> <div class="collapse navbar-collapse" id="foodie-navbar"> <ul class="navbar-nav mr-auto"> <li class="nav-item" *ngIf="auth.authenticated()"> <a class="nav-link" [routerLink]="['/places']">Places</a> </li> <li class="nav-item"> <a class="nav-link" routerLink="" (click)="auth.login()" *ngIf="!auth.authenticated()">Log In</a> <a class="nav-link" routerLink="" (click)="auth.logout()" *ngIf="auth.authenticated()">Log Out</a> </li> </ul> </div> </nav> <div class="container"> <router-outlet></router-outlet> </div> 

Here is what my AppComponent looks like:

 import { Component } from '@angular/core'; import { Router, NavigationEnd } from '@angular/router'; import { Auth } from './auth.service'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], providers: [Auth] }) export class AppComponent { constructor(private auth: Auth, private router: Router) { router.events.subscribe(val => { if (val instanceof NavigationEnd) { // This is when the hiding should happen. } }) } } 

By the way, now when I look a little closer, I see that if I do $('.collapse').hide(); on the console, and then press the hamburger menu again, this will not work. So maybe I need a completely different solution.

Change Someone noted this question as a duplicate of the ng2-bootstrap question . My question / answer has nothing to do with ng2-bootstrap, so I don't believe this is a duplicate.

Answer 1

I was able to achieve what I wanted by pressing the switch button on the navigation bar.

In both parts of the code below, probably the main thing to pay attention to is the collapseNav() function.

Here is my component code:

 import { Component, ViewChild, ElementRef } from '@angular/core'; import { Auth } from './auth.service'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], providers: [Auth] }) export class AppComponent { @ViewChild('navbarToggler') navbarToggler:ElementRef; constructor(private auth: Auth) {} navBarTogglerIsVisible() { return this.navbarToggler.nativeElement.offsetParent !== null; } collapseNav() { if (this.navBarTogglerIsVisible()) { this.navbarToggler.nativeElement.click(); } } } 

And here is my markup.

 <nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse fixed-top"> <button #navbarToggler class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#foodie-navbar" aria-controls="foodie-navbar" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" routerLink="/">Foodie</a> <div class="collapse navbar-collapse" id="foodie-navbar"> <ul class="navbar-nav mr-auto"> <li class="nav-item" *ngIf="auth.authenticated()"> <a (click)="collapseNav()" class="nav-link" [routerLink]="['/places']">Places</a> </li> <li class="nav-item"> <a (click)="collapseNav(); auth.login()" class="nav-link" routerLink="" *ngIf="!auth.authenticated()">Log In</a> <a (click)="collapseNav(); auth.logout()" class="nav-link" routerLink="" *ngIf="auth.authenticated()">Log Out</a> </li> </ul> </div> </nav> <div class="container"> <router-outlet></router-outlet> </div>