Menu
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.
414
Angular Material tabs organize content into separate views where only one view can be visible at a time. Each tab's label is shown in the tab header and the active tab's label is designated with the animated ink bar. When the list of tab labels exceeds the width of the header, pagination controls appear to let the user scroll left ...
To use bootstrap components in an Angular project, install the ng-bootstrap package by running below NPM command in terminal: After installation, open app.module.ts file to import NgbModule then add in the imports array as shown below:
All the native angular directives of Bootstrap version 3 and 4 will be provided by the Ng Bootstrap, such as datepicker, tooltip, buttons, model, tabs, pagination, etc. We can easily use Bootstrap UI by using the Ng Bootstrap. In our below example, four types of tabs will be simply created, and after creation we can use it in our application.
If 'tab' is an Angular component, then verify that it is part of this module. This problem is documented in this Github discussion. The solution is easy enough: just import a TabsModule.forRoot () to the list of imports in app.module.ts, like this:
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;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
