Angular Bootstrap Navigation unable to switch between nav-tabs

Question

I'm using bootstrap navigation in angular application as shown in below HTML

<div class="container">
<ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item">
      <a class="nav-link active" id="test-tab" data-toggle="tab" href="#" routerLink="/test" role="tab" aria-controls="home" aria-selected="true">Test</a>
    </li>
    <li class="nav-item">
      <a class="nav-link " id="viral-tab" data-toggle="tab" href="#" routerLink="/viral"  role="tab" aria-controls="profile" aria-selected="false">Viral</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" id="user-tab" data-toggle="tab" href="#" routerLink="/user/{{username}}" role="tab" aria-controls="contact" aria-selected="false">User</a>
    </li>
   
  </ul>
  <div class="tab-content" id="myTabContent">
    <div class="tab-pane fade show active" id="test" role="tabpanel"  aria-labelledby="test-tab">
    
    </div>
    <div class="tab-pane fade" id="viral" role="tabpanel" aria-labelledby="viral-tab"></div>
    <div class="tab-pane fade" id="user" role="tabpanel" aria-labelledby="user-tab">
       
    </div>
  </div>
  </div>

I'm not able to switch between different nav tabs, it is always the "test-tab" which is active. How can I switch between different nav-tabs.?

Answer 1

Try to use routerLinkActive for setting the active class. I have modified your code and removed href attribute since it can cause trouble when not used for navigating.

<div class="container">
<ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item">
      <a class="nav-link" id="test-tab" data-toggle="tab" routerLinkActive="active" routerLink="/test"  role="tab" aria-controls="home" aria-selected="true">Test</a>
    </li>
    <li class="nav-item">
      <a class="nav-link " id="viral-tab" data-toggle="tab" routerLinkActive="active" routerLink="/viral"  role="tab" aria-controls="profile" aria-selected="false">Viral</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" id="user-tab" data-toggle="tab" routerLinkActive="active" routerLink="/user/{{username}}" role="tab" aria-controls="contact" aria-selected="false">User</a>
    </li>
   
  </ul>
  <div class="tab-content" id="myTabContent">
    <div class="tab-pane fade show active" id="test" role="tabpanel"  aria-labelledby="test-tab">
    
    </div>
    <div class="tab-pane fade" id="viral" role="tabpanel" aria-labelledby="viral-tab"></div>
    <div class="tab-pane fade" id="user" role="tabpanel" aria-labelledby="user-tab">
       
    </div>
  </div>
  </div>