I have a static tabset with 4 tabs, tabs 2 to 4 being disabled at start. The content of the tab is within a separated component. When the content of the first tab is properly filled in, a next button gets activated. The next button emits en event to trigger programmatically the tab change. The parent component receive the request and enable the tab to be activated end then issue the setActiveTab fir the given tab.

While the tab state properly changes from disabled to enabled, the tab is not activated.

No errors on console ! Bug ?

Below the parent component code :

// angular

import { Component, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';

// libs

import { ModalDirective, TabsetComponent } from 'ng-uikit-pro-standard';
import { Subject } from 'rxjs';

// app

import { DataService, LogService } from '../../../../core/services';
import { AppEntityServices } from '../../../../store/entity/app-entity.service';

const TABS = [ 'CART', 'BILLTO', 'PAYMENT', 'CONFIRM' ];


@Component({
  selector: 'app-home-order',
  templateUrl: './home-order.component.html',
  styleUrls: ['./home-order.component.scss']
})
export class HomeOrderComponent implements OnInit, OnDestroy {

  @ViewChild('staticTabs') tabset: TabsetComponent;

  @Input() modal: ModalDirective;

  public products: any[];

  private destroy$  = new Subject<boolean>();

  constructor( private log: LogService,
               private data: DataService,
               private aps: AppEntityServices ) {
    this.log.debug('HomeOrderComponent - constructor');
  }

  ngOnInit() {
    this.log.debug('HomeOrderComponent - onInit');

    this.data.assets( 'products')
      .subscribe( data => {
        this.products = data;
      });

  }

  ngOnDestroy(): void {
    this.log.debug('HomeOrderComponent - OnDestroy');
    this.destroy$.next(true);
    this.destroy$.complete();
  }

  public close() {
    this.log.debug('HomeOrderComponent - close');
    this.modal.hide();
  }

  public step( event: string ) {
    this.log.debug('HomeOrderComponent - step', event);
    const tab = TABS.indexOf( event );
    this.tabset.tabs[tab].disabled = false;
    this.tabset.setActiveTab( tab );
  }

}

below the parent component template :

<div class="modal-dialog modal-fluid" role="document">
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close pull-right" aria-label="Close" (click)="close()">
        <i class="fa fa-times"></i>
      </button>
      <h4 class="modal-title w-100" id="myEmployeeModalLabel">
        <i class="far fa-basket text-pink pr-3"></i>
        <strong>{{ 'USER.HOME.FORMS.ORDER.TITLE' | translate }}</strong>
      </h4>
    </div>
    <div class="modal-body app-order">
      <mdb-tabset #staticTabs [buttonClass]="'md-tabs pills-pink white tabs-4 px-0 mx-0'">
        <!--Panel 1-->
        <mdb-tab heading="{{ 'USER.HOME.FORMS.ORDER.LICENSES.TITLE' | translate}}">
          <!-- Shopping Cart table -->
          <app-home-order-cart
            (step)="step($event)"
            [products]="products">
          </app-home-order-cart>
          <!-- Shopping Cart table -->
        </mdb-tab>
        <mdb-tab [disabled]="true" heading="{{ 'USER.HOME.FORMS.ORDER.BILLING.TITLE' | translate}}">
        </mdb-tab>
        <mdb-tab [disabled]="true" heading="{{ 'USER.HOME.FORMS.ORDER.PAYMENT.TITLE' | translate}}">
        </mdb-tab>
        <mdb-tab [disabled]="true" heading="{{ 'USER.HOME.FORMS.ORDER.CONFIRM.TITLE' | translate}}">
        </mdb-tab>
      </mdb-tabset>
    </div>
  </div>
</div>