Activate a Nebular Theme tab

Question

I am using the Nebular Theme component and will want to manually activate a particular tab with a button click. I can't find any information in their doc https://akveo.github.io/nebular/docs/components/tabs/overview#nbtabsetcomponent

<nb-tabset>
  <nb-tab tabTitle="Search">xxxx</ng-tab>
  <nb-tab tabTitle="Add">yyyyy</ng-tab>
</nb-tabset>

<button (click)="ActivateTabAdd()">Add</button>

Any help appreciated. Thanks

score 6 · Answer 1 · edited Aug 13 '20 at 12:48

6

Yes why not

there is an active attribute for tab nb-tab which Specifies active tab

so you can handle this like

<nb-tabset>
  <nb-tab tabTitle="Search" active="{{setActiveSearch}}">xxxx</ng-tab>
  <nb-tab tabTitle="Add" active="{{setActiveAdd}}" >yyyyy</ng-tab>
</nb-tabset>
<button (click)="ActivateTabAdd()">Add</button>

and in TS file

setActiveSearch : boolean = false;
setActiveAdd: boolean = false;

ActivateTabAdd(){
this.setActiveAdd = true;
}

edited Aug 13 '20 at 12:48

Community

1
1

answered Oct 24 '18 at 05:30

Hrishikesh Kale

6,140
4
18
27

1

Thanks.. i got it to work with xxxx – Raymond Tey Oct 24 '18 at 06:56
@El7or, please help me with more details to move forward with this case. – Hrishikesh Kale Feb 04 '20 at 06:08

score 6 · Answer 2 · answered Aug 09 '19 at 06:21

<nb-tabset id="tabset" name="tabset" #tabset>
  <nb-tab tabTitle="Search" id="searchTab" name="searchTab" #searchTab >xxxx</ng-tab>
  <nb-tab tabTitle="Add" id="addTab" name="addTab" #addTab >yyyyy</ng-tab>
</nb-tabset>
<button (click)="ActivateTabAdd()">Add</button>

import { NbTabsetComponent, NbTabComponent } from '@nebular/theme/components/tabset/tabset.component';

@ViewChild("tabset") tabsetEl: NbTabsetComponent;
@ViewChild("addTab") addTabEl: NbTabComponent;

ActivateTabAdd(){
  this.tabsetEl.selectTab(this.addTabEl);
}

Activate a Nebular Theme tab

2 Answers2