title: Change Active tab in navbar when router.navigate is used
body: <p>I'm using Angular 2 with Bootstrap 4. I can get the active tab to change using the following code:</p>
  
  <p><strong>navbar.component.html</strong></p>
  
  <pre><code>&lt;nav class="navbar navbar-fixed-top navbar-light bg-faded"&gt;
    &lt;button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#navbar"&gt;
      &amp;#9776;
    &lt;/button&gt;
    &lt;div class="collapse navbar-toggleable-xs" id="navbar"&gt;
    &lt;div class="container"&gt;
      &lt;a class="navbar-brand" [routerLink]="['']"&gt;My App&lt;/a&gt;
      &lt;ul class="nav navbar-nav navbar-right"&gt;
        &lt;li class="nav-item" routerLinkActive="active" [routerLinkActiveOptions]="{exact:
  true}"&gt;
          &lt;a class="nav-link" [routerLink]="['']"&gt;Home&lt;span class="sr-only"&gt;(current)&lt;/span&gt;&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="nav-item" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}"&gt;
          &lt;a class="nav-link" [routerLink]="['/about']"&gt;About&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="nav-item" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}"&gt;
          &lt;a class="nav-link" [routerLink]="['/example']"&gt;Example&lt;/a&gt;
        &lt;/li&gt;      
      &lt;/ul&gt;
    &lt;/div&gt;
    &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>The line:</p>
  
  <pre><code>[routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}"
  </code></pre>
  
  <p>works well at changing to the currently active tab, but when I navigate to a component using something like:</p>
  
  <pre><code>this.router.navigate(['']);
  </code></pre>
  
  <p>The active tab doesn't change. Is there a way to change the active tab when navigating like above?</p>