Angular - 2 : Get the Active tab from bootstrap tab in .ts

Question

i'm using basic bootstrap tab , i need to get the active tab to perform a function in .ts

the code is given below

<li role="presentation" class="active">
  <a href="#daily" aria-controls="daily" role="tab" data-toggle="tab">Daily</a>
</li>
<li role="presentation">
  <a href="#weekly" aria-controls="weekly" role="tab" data-toggle="tab">Weekly</a>
</li>
<li role="presentation">
  <a href="#monthly" aria-controls="monthly" role="tab" data-toggle="tab">Monthly</a>
</li>
<li role="presentation">
  <a href="#annual" aria-controls="annual" role="tab" data-toggle="tab">Annual</a>
</li>

Well, good for you. By the way, have you tried to achieve that by your self? — Learn on hard way, Mar 14 '18 at 04:05
i don't know much about this tab, i tried in ngx-bootstrap tab, but there is a style issue in that, so changed it. — Aashiq Rathnadas, Mar 14 '18 at 04:12

score 1 · Answer 1 · answered Mar 14 '18 at 04:39

1

You can use TabDirective. Simply you define some function and call like this (select)="newfunction('params')" .

I hope this would be helpful.

.ts

import {Component} from '@angular/core';
import {TabDirective} from 'ngx-bootstrap';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  value: string;
  onSelect(data: TabDirective): void {
    this.value = data.heading;
  }
}

.html

<div class="mb-3">
  <pre class="card card-block card-header" *ngIf="value">Event select is fired. The heading of the selected tab is: {{value}}</pre>
</div>
<tabset>
  <tab heading="First tab" class="mt-2" (select)="onSelect($event)">
    <h4>First tab</h4>
    <p>First tab context</p>
  </tab>
  <tab heading="Second tab" class="mt-2" (select)="onSelect($event)">
    <h4>Second tab</h4>
    <p>Second tab context</p>
  </tab>
</tabset>

answered Mar 14 '18 at 04:39

Jihoon Kwon

745
5
14

Thank you for your reply, I need to use the same tab which is mentioned in the question, And have to find out the which tab is active , post a value to service regarding that – Aashiq Rathnadas Mar 14 '18 at 04:56
@Aashiqcr I am not sure I understood your question 100%. but, if you need to know just active tabID. You can make (select) = "setActiveTabID('tab1')" or (select) = "setActiveTabID('tab2')" and in .ts , setActiveTabID(id){ this.activeTabID = id;} and use that activeTabID value. – Jihoon Kwon Mar 14 '18 at 05:05
thank you @jihoon done it with (click) = "setActiveTabID('d')" , the comment helped a lot (Y) – Aashiq Rathnadas Mar 14 '18 at 06:26

Angular - 2 : Get the Active tab from bootstrap tab in .ts

1 Answers1