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.