How to load the tabs programmatically in angular 6 of bootstrap ngb-tabset

Question

I want to load the tabs programmatically as I want using angular 6 typescript. Currently it load when I click to tabs. I, want to load through code. Here is the sample code I tried but still it load on click of tab.

<ngb-tabset #t="ngbTabset" [activeId]="activeIdString" (tabChange)="tabChangeEvent($event)">
  <ngb-tab title="Workforce Plan-Headcount" id="wf1">
    <ng-template ngbTabContent>
      <app-workforce-plan-headcount></app-workforce-plan-headcount>
    </ng-template>
  </ngb-tab>
  <ngb-tab title="Workforce Plan-Cost" id="wf2">
    <ng-template ngbTabContent>
      <app-workforce-plan-cost></app-workforce-plan-cost>
    </ng-template>
  </ngb-tab>
  <ngb-tab title="Current Vacancies" id="wf3">
    <ng-template ngbTabContent>
      <app-current-vacancies></app-current-vacancies>
    </ng-template>
  </ngb-tab>
  <ngb-tab title="Data Entry" id="wf4">
    <ng-template ngbTabContent>
      <app-data-entry></app-data-entry>
    </ng-template>
  </ngb-tab>
</ngb-tabset>

TS file

activeIdString: string;
    tabChangeEvent(evt: any) {
            this.activeIdString = "wf3";
            console.log(this.activeIdString); 
          }

I tried this code it load the third third tab on first load. Then it doesn't load the third tab. Is there any best way to load the tabs programmatically.

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

https://github.com/ng-bootstrap/ng-bootstrap/issues/1682

http://plnkr.co/edit/IjDOUfoenwYdvW136SPY?p=preview

score 2 · Answer 1 · answered Nov 05 '18 at 05:45

This is the working solution for me might be useful to someone else

<ngb-tabset #t="ngbTabset" (tabChange)="beforeChange($event)">
  <ngb-tab title="Workforce Plan-Headcount" id="wf1">
    <ng-template ngbTabContent>
      <app-workforce-plan-headcount></app-workforce-plan-headcount>
    </ng-template>
  </ngb-tab>
  <ngb-tab title="Workforce Plan-Cost" id="wf2">
    <ng-template ngbTabContent>
      <app-workforce-plan-cost></app-workforce-plan-cost>
    </ng-template>
  </ngb-tab>
  <ngb-tab title="Current Vacancies" id="wf3">
    <ng-template ngbTabContent>
      <app-current-vacancies></app-current-vacancies>
    </ng-template>
  </ngb-tab>
  <ngb-tab title="Data Entry" id="wf4">
    <ng-template ngbTabContent>
      <app-data-entry></app-data-entry>
    </ng-template>
  </ngb-tab>
</ngb-tabset>

component.ts file

public beforeChange($event: NgbTabChangeEvent) {
        if (condition) {
        // prevent from loading
            $event.preventDefault();   
        }
    else{
        this.t.select($event.nextId);
    }
    }

How to load the tabs programmatically in angular 6 of bootstrap ngb-tabset

1 Answers1