[Ionic v4] Bug: Viewchild not binding properly.

[dtaalbers]

Bug Report

Ionic Info
Run ionic info from a terminal/cmd prompt and paste the output below.

Ionic:

   ionic (Ionic CLI)          : 4.0.6
   Ionic Framework            : @ionic/angular 4.0.0-beta.2
   @angular-devkit/core       : 0.7.3
   @angular-devkit/schematics : 0.7.3
   @angular/cli               : 6.1.3
   @ionic/ng-toolkit          : 1.0.6
   @ionic/schematics-angular  : 1.0.4

Cordova:

   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : android 7.0.0, ios 4.5.5

System:

   Android SDK Tools : 25.2.5
   ios-deploy        : 1.9.2
   ios-sim           : 6.1.2
   NodeJS            : v8.9.4 (/Users/dtaalbers/.nvm/versions/node/v8.9.4/bin/node)
   npm               : 5.6.0
   OS                : macOS High Sierra
   Xcode             : Xcode 9.4.1 Build version 9F2000

Environment:

   ANDROID_HOME : /usr/local/Cellar/android-sdk/24.4.1_1

Describe the Bug
I can't get a reference to the tabbar from my viewmodel with the ViewChild. It's not undefined but I get a object without the events/properties described in the docs.

Related Code
My view

<ion-tabs #tabs [tabbarHidden]="!isAuthenticated" color="primary">
    <ion-tab label="Home" icon="home" href="/tabs/(home:home)">
        <ion-router-outlet name="home"></ion-router-outlet>
    </ion-tab>
    <ion-tab label="workspace" icon="home" href="/tabs/(workspace:workspace)">
        <ion-router-outlet name="workspace"></ion-router-outlet>
    </ion-tab>
    <ion-tab label="login" icon="home" href="/tabs/(login:login)">
        <ion-router-outlet name="login"></ion-router-outlet>
    </ion-tab>
</ion-tabs>

My tabs viewmodel.

export class TabsPage implements OnInit, OnDestroy, AfterViewInit {

    @ViewChild('tabs') private tabs: Tabs;

    private isAuthenticated: boolean;
    private subscription: Subscription;

    constructor(
        private navController: NavController,
        private authService: AuthenticationService
    ) { }

    public async ngOnInit(): Promise<void> {
        this.isAuthenticated = await this.authService.isAuthenticated();
        console.log(this.tabs);
        this.subscription = this.tabs.ionChange.subscribe(async (x) => {
            this.isAuthenticated = await this.authService.isAuthenticated();
        });
    }

    public async ngAfterViewInit(): Promise<void> {
         console.log(this.tabs);
    }

    public async ngOnDestroy(): Promise<void> {
        this.subscription.unsubscribe();
    }
}

The only thing I am getting from the console.log(this.tabs) is this:

and of course the error

Error: Uncaught (in promise): TypeError: Cannot read property 'subscribe' of undefined
TypeError: Cannot read property 'subscribe' of undefined

Expected Behavior
I expect the ViewChild binding the correct object with the correct methods and parameters. That way I can subscribe to the tab change events to show the tabbar when the user is authenticated.

[brandyscarney]

Thanks for the issue! I believe this is related to #15046

Please see my comment here: #15046 (comment)

Could you try changing the following:

- @ViewChild('tabs') private tabs: Tabs;
+ @ViewChild('tabs', { read: Tabs }) private tabs: Tabs;

And let me know if that works for you?

[dtaalbers]

Hi @brandyscarney

Thanks for the reply! I tried your solution, it now provides a Tabs object. Thanks! One thing though, the following still doesn't work.

   this.subscription = this.tabs.ionChange.subscribe(async (x) => {
            console.log('subscription');
            this.isAuthenticated = await this.authService.isAuthenticated();
        });

The subscription doesn't trigger when navigating tabs. Is this something related or should I create a new issue for this?

[brandyscarney]

@dtaalbers Awesome, I'm glad that workaround works! We are looking into how we can remove the need for {read: Tabs} though.

That issue seems to be unrelated. I tested out ionChange using the following:

<ion-tabs #tabs (ionChange)="tabsChanged($event)">

and it is working. So it seems to only be the subscribe that isn't working. It would be great if you could create a new issue. Please feel free to tag me in it. 🙂

[dtaalbers]

Thanks for the reply! I created a new issue :) #15189

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.