title: Force collapse of Bootstrap 4 navbar on Angular 2 route change
body: <p>I want to implement something like the following the "right" way in Angular 2:</p>
  
  <pre><code>$('.collapse').hide();
  </code></pre>
  
  <p>What would be the "Angular 2 way" of doing this? Do I just use native JavaScript? Are there built-in Angular methods I should use?</p>
  
  <p><strong>Edit</strong>: Let me add some context for my particular case.</p>
  
  <p>I have a Bootstrap 4 navbar with a <a href="https://v4-alpha.getbootstrap.com/components/collapse/" rel="noreferrer">collapsible</a> nav. If you pull down the nav, then click a link, <strong>the nav doesn't disappear like you would expect it to</strong>.</p>
  
  <p>I want it so that when you click any link anywhere, the navbar goes back to its collapsed state.</p>
  
  <p>Here's what my navbar markup looks like:</p>
  
  <pre><code>&lt;nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse fixed-top"&gt;
  
    &lt;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"&gt;
  
      &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
    &lt;/button&gt;
  
    &lt;a class="navbar-brand" routerLink="/"&gt;Foodie&lt;/a&gt;
  
    &lt;div class="collapse navbar-collapse" id="foodie-navbar"&gt;
      &lt;ul class="navbar-nav mr-auto"&gt;
        &lt;li class="nav-item" *ngIf="auth.authenticated()"&gt;
          &lt;a class="nav-link" [routerLink]="['/places']"&gt;Places&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="nav-item"&gt;
          &lt;a class="nav-link" routerLink="" (click)="auth.login()" *ngIf="!auth.authenticated()"&gt;Log In&lt;/a&gt;
          &lt;a class="nav-link" routerLink="" (click)="auth.logout()" *ngIf="auth.authenticated()"&gt;Log Out&lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/nav&gt;
  
  &lt;div class="container"&gt;
    &lt;router-outlet&gt;&lt;/router-outlet&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here's what my <code>AppComponent</code> looks like:</p>
  
  <pre><code>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 =&gt; {
        if (val instanceof NavigationEnd) {
          // This is when the hiding should happen.
        }
      })
    }
  }
  </code></pre>
  
  <p>By the way, now that I look a little closer, I see that if I do <code>$('.collapse').hide();</code> on the console, then click the hamburger menu again, it doesn't work. So maybe I need a different solution altogether.</p>
  
  <p><strong>Edit</strong>: Someone marked this question a duplicate of <a href="https://stackoverflow.com/questions/37438683/is-there-a-way-to-build-the-mobile-nav-bar-in-ng2-bootsrap">an ng2-bootstrap question</a>. My question/answer don't have anything to do with ng2-bootstrap so I don't believe it's a duplicate.</p>