Topic: TabsetComponent object is undefined in ngAfterViewInit()

natenoctel free asked 4 years ago


ts file

import { Component, OnInit, ViewChild } from '@angular/core';
import { TabsetComponent } from 'ng-uikit-pro-standard';

@Component({
  selector: 'app-extension-page',
  templateUrl: './extension-page.component.html',
  styleUrls: ['./extension-page.component.scss']
})

export class ExtensionPageComponent implements OnInit {
    @ViewChild('extensionTabs', { static: true }) extensionTabs: TabsetComponent

    initialTabs: any[] = [
    { label: 'Inbox' },
    { label: 'Extension Preferences' },
    { label: 'Device Preferences' },
    { label: 'Inbound Behavior' },
    { label: 'Paging' },
    { label: 'Admin' },
    { label: 'CSR' }
    ];

    currentTabs: any[];
    ngOnInit() {
        this.currentTabs = JSON.parse(JSON.stringify(this.initialTabs));
    }
    ngAfterViewInit(){
        this.extensionTabs.setActiveTab(1);
        console.log('extensionTabs: ', this.extensionTabs);
    }
};

Html

<mdb-tabset #extensionTabs [buttonClass]="'classic-tabs'" [contentClass]="'card'" class="classic-tabs">
    <mdb-tab *ngFor="let tab of currentTabs" [heading]="tab.label"></mdb-tab>
</mdb-tabset>

I followed instructions detailed on https://mdbootstrap.com/docs/angular/components/tabs/#docsTabsAPI to access the methods described for tabs yet when I console log the TabsetComponent object: this.extensionTabs it is undefined. When I try to call a method setActiveTab() it predictably errors and says it cannot call a method on an undefined object.


Arkadiusz Idzikowski staff commented 4 years ago

That's strange because I just copied your HTML/Ts code and it looks like everything is working correctly. Maybe it's a problem with cache, please try to reinstall your app dependencies and reload app with ng serve again.

Do you use MDB Angular Pro version? According to our system you have access only to MDB Angular Free and Tabset is a pro component.


natenoctel free commented 4 years ago

I do have pro version I just didn't have access to the account for support. I have access now though so I will be switching accounts for support.

I will try reinstalling app dependencies, but I noticed it is not undefined if I pass the Tabset object through an output such as (getActiveTab)="extensionTabs" but that is the only way I've been able to initialize that object.



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Opened

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 9.3.1
  • Device: Desktop
  • Browser: Chrome
  • OS: OSX
  • Provided sample code: Yes
  • Provided link: Yes