ngb-tab Select tab after enabling it dynamically

Question

I have 2 tabs. The last one is disabled on init. After clicking a custom button situated in the first tab, the last tab should enable and select it.

But right now it enable the tab but it doesn't select.

I tried just changing the style as it appears to be disabled but using [ngStyle] or [class] on ngb-tab doesn't seems to work. I also tried to navigate (using select) via ngDoCheck.

Template:

<ngb-tabset #tabSet="ngbTabset" [justify]="'justified'" (tabChange)="tabChange($event)">
    <ngb-tab id="tab-1" title="Step 1">
      <ng-template ngbTabContent>
        First
      </ng-template>
    </ngb-tab>
    <ngb-tab id="tab-2" title="Step 2" [disabled]="disableEnd">
        <ng-template ngbTabContent>
            Conclusion
        </ng-template>
    </ngb-tab>
</ngb-tabset>

<button (click)="goToEnd()" *ngIf="actualPage === 1">Send</button>

.ts:

@ViewChild('tabSet', {static: false}) tabSet;
pages: string[] = ["tab-1", "tab-2"];
disableEnd:boolean = true;

  goToEnd () : void {
    this.disableEnd = false;
    this.tabSet.select(this.pages[1]);
  }

I want the tab to activate and be selected, ready for viewing.

Answer 1

Pass template reference in goToEnd(tabSet)

Try like this:

Template:

<button (click)="goToEnd(tabSet)" *ngIf="actualPage === 1">Send</button>

Typescript:

 goToEnd(tabSet): void {
    this.disableEnd = false;
    var that = this
    setTimeout(function () {
      tabSet.select(that.pages[1]);
    }, 1);
  }

Working Demo

Answer 2

I would try to use the natural index of the array: this.tabSet.select(1);

If you want to use it by name then use a for to retrieve the index of the string.