Change Active tab in navbar when router.navigate is used - html

Question

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

Answer 1

So basically you want to make your high-lighting in a service and call that service to apply your style when your URL equals a specific state. this is done by using
this.router.url === '/myroute'
here is my plunker. NOTE that the active tab will change whether you use the links or the buttons. The buttons are what use the this.router.navigate(['']); like you asked in the question