Change active bootstrap tab inside angular component

Question

Hi I have been stuck on what seems like this simple problem for a while going back and forth through SO solutions does not seem to fit my use case exactly... I have an angular component which has a template containing bootstrap nav pills, these are just being used as tabs within this particular screen. So I have a Search tab and a results tab and after performing a search I want to activate the results tab but I can't work out how to hook into the bootstrap tabs from the component.

The template ...

<div id="tabs" #tabs>

  <ul class="nav nav-pills">
    <li class="nav-item">
      <a class="nav-link active" href="#search" data-toggle="tab">Search</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#results" data-toggle="tab">Results</a>
    </li>
  </ul>

  <div class="tab-content">
    <div class="tab-pane active" id="search">
      search screen 
      <button type="button" (click)="search()">Search</button>
    </div>
    <div class="tab-pane active" id="results">results screen</div>
  </div>

</div>

Then the component is like..

@Component({
  selector: 'app-demo',
  templateUrl: './demo.component.html'
})
export class DemoComponent implements OnInit {

  @ViewChild('tabs') tabs; 

  search() {
    //perform search. then select the results tab in template.
    //this.tabs.selectedIndex = ...
  }

}

Is this possible? or do I need to be using a different flavour of tabs which are configured in the component. Many thanks in advance.

Sandeep Gupta · Accepted Answer · 2018-06-29 17:20:18Z

29

Keep a track of which tab is active using activeTab and use ngClass to apply .active class

component.html

<div id="tabs" #tabs>

  <ul class="nav nav-pills">
    <li class="nav-item">
      <a class="nav-link active" href="#search" [ngClass]="{ 'active':activeTab==='search'}" (click)="search('search')"
         data-toggle="tab">Search</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#results" [ngClass]="{ 'active':activeTab==='result'}" data-toggle="tab"
         (click)="result('result')">Results</a>
    </li>
  </ul>

  <div class="tab-content">
    <div class="tab-pane" id="search" [ngClass]="{ 'active':activeTab==='search'}">
      search screen
      <button type="button" (click)="search('result')">Search</button>
    </div>
    <div class="tab-pane" id="results" [ngClass]="{ 'active':activeTab==='result'}">results screen</div>
  </div>

</div>

component.ts

  activeTab = 'search';

  search(activeTab){
    this.activeTab = activeTab;
  }

  result(activeTab){
    this.activeTab = activeTab;
  }

answered Jun 29, 2018 at 17:20

Sandeep Gupta

7,32211 gold badges60 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Alberto San José Over a year ago

I've seen several other answers about this topic and I've found this one the most effective and "algular-native". It's simple and works perfectly in my app.

Andre Over a year ago

To me this didn't work... It didn't remove the active class from the previous tab...

tm1701 Over a year ago

Very nice solution, no jquery needed!

mafortis Over a year ago

You would also need extra on-click function in your tabs <li> where you can set new tab name to activeTab like this (click)="changeActiveTab('search')" // (click)="changeActiveTab('result')" then in your component like this changeActiveTab(name: string){this.activeTab = name;}

Abhishek Gautam · Accepted Answer · 2021-08-02 17:03:38Z

In addition to dasfdsa answer, to work in angular with routing, need to include :

<div id="tabs" #tabs>

        <ul class="nav nav-pills">
          <li class="nav-item">
            <a class="nav-link active" href="#search" [ngClass]="{ 'active':activeTab==='search'}" (click)="search('search', $event)"
               data-toggle="tab">Search</a>
          </li>
          <li class="nav-item">
            <a class="nav-link"  href="#results" [ngClass]="{ 'active':activeTab==='result'}" data-toggle="tab"
               (click)="result('result', $event)">Results</a>
          </li>
        </ul>

        <div class="tab-content">
          <div class="tab-pane" id="search" [ngClass]="{ 'active':activeTab==='search'}">
            search screen
            <button type="button" (click)="search('result', $event)">Search</button>
          </div>
          <div class="tab-pane" id="results" [ngClass]="{ 'active':activeTab==='result'}">results screen</div>
        </div>

      </div>

search(activeTab: string, $event: MouseEvent): void{
    $event.preventDefault();
    this.activeTab = activeTab;
  }

  result(activeTab: string, $event: MouseEvent): void{
    $event.preventDefault();
    this.activeTab = activeTab;
  }

Collectives™ on Stack Overflow

Change active bootstrap tab inside angular component

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related