Topic: selecting tab programatically no longer works

rernens pro asked 5 years ago


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>

Damian Gemza staff answered 5 years ago


Thanks for your report! We'll change this in our docs.

Best Regards,

Damian


rernens pro answered 5 years ago


I found out that setActiveTab expects a tab number starting at 1 and not at 0 !

An update to the documentation would be welcome for others.


rernens pro answered 5 years ago


hi

I just added a get a getActiveTab event handler on the tab set to log what is happening and here below is what shows in the log :

(2) ["HomeOrderComponent - step", "BILLTO"]
(2) ["HomeOrderComponent - step - set tab to ", 1]
(2) ["HomeOrderComponent - tabChanged", {…}]
0: "HomeOrderComponent - tabChanged"
1:  activeTabIndex: 0, ...

While setting tab to 1 is what was requested, the activeTabIndex remains to 0 !



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 7.0.0
  • Device: any
  • Browser: any
  • OS: any
  • Provided sample code: No
  • Provided link: No