html - How do you get the selected tab from a bootstrap tabset in Angular4? -

i have set of tabs create dynamically, dependent on input data. , want able figure out tab selected. in example code below, have tab control , beneath this, have button when clicked delete selected tab. i've tried keep relatively simple , might seem contrived, hope illustrate mean.

here's code:

<div class="col-md-12">   <ngb-tabset *ngif="selectedinfo" type="groups" >     <ngb-tab *ngfor="let tab of selectedinfo.groups" title={{tab.name}} >         // stuff in tabs     </ngb-tab>   </ngb-tabset> </div>  <div>   <button class="btn btn-primary float-left" (click)="deletetab()" > delete tab </button> </div>   export class mytabs implements oninit {    selectedifno: myinfoclass;    ngoninit(): void {      // init data    }    deletetab() {       // let's want delete selected tab      // how know tab selected?    }  } 

you can active tab id (activeid) ngbtabset using angular @viewchild() retrieve instance of the ngbtabset html. you'd have access activeid in class methods. considering *ngif may need create setter @viewchild() described in question. i've updated example use setter.

html:

<div class="col-md-12">   <ngb-tabset #t="ngbtabset" *ngif="selectedinfo" type="groups">     <ngb-tab *ngfor="let tab of selectedinfo.groups" title={{tab.name}} >         // stuff in tabs     </ngb-tab>   </ngb-tabset> </div> 

ts:

import { component, viewchild, viewcontainerref } '@angular/core'; import { ngbtabset } '@ng-bootstrap/ng-bootstrap';  export class mytabs implements oninit {   private tabset: viewcontainerref;    @viewchild(ngbtabset) set content(content: viewcontainerref) {     this.tabset = content;   };    ngafterviewinit() {     console.log(this.tabset.activeid);   }    deletetab() {     // selected tab id     console.log(this.tabset.activeid);   } } 

here plunker demonstrating functionality.

hopefully helps!