Tried using the select() method in tabs.ts from the Ionic Tabs documentation. But it seems that when I tried running it, it says that "select is undefined" and I found out that my viewChild is actually empty/undefined when I tried console.log(tabs). Tried searching for the reason why viewChild is undefined but could not really understand why.
Link to ionic tabs documentation: https://ionicframework.com/docs/api/components/tabs/Tabs/
tabs.html
<ion-tabs #tabs>
<ion-tab [root]="tab1Root" tabTitle="Request" tabIcon="alert"></ion-tab>
<ion-tab [root]="tab2Root" [rootParams]="detailParam" tabTitle="Pending"
tabIcon="repeat"></ion-tab>
<ion-tab [root]="tab3Root" tabTitle="Completed" tabIcon="done-all"></ion-
tab>
<ion-tab [root]="tab4Root" tabTitle="Profile" tabIcon="person"></ion-tab>
</ion-tabs>
tabs.ts
import { Component, ViewChild } from '@angular/core';
import { NavController, NavParams, AlertController, Tabs } from 'ionic-
angular';
import { PendingJobPage } from '../pending-job/pending-job';
import { CompletedJobPage } from '../completed-job/completed-job';
import { RequestPage } from '../request/request';
import { ProfilePage } from '../profile/profile';
@Component({
templateUrl: 'tabs.html'
})
export class TabsPage {
@ViewChild('tabs') tabRef: Tabs;
pending: any;
apply: boolean;
detailsParam: any;
tab1Root = RequestPage;
tab2Root = PendingJobPage;
tab3Root = CompletedJobPage;
tab4Root = ProfilePage;
constructor(public navParams: NavParams, public navCtrl: NavController) {
this.pending = this.navParams.get('param1');
this.apply = this.navParams.get('apply');
this.detailsParam = this.navParams.data;
console.log("a = ", this.tabRef);
if(this.apply === true){
this.navCtrl.parent.select(1);
}
else{
this.navCtrl.parent.select(0);
}
}
}
The @ViewChild decorator allows us to inject into a component class references to elements used inside its template, that's what we should use it for. Using @ViewChild we can easily inject components, directives or plain DOM elements.
So, when the component is initialized the component is not yet displayed until "showMe" is true. Thus, my @ViewChild references were all undefined. This is where I used @ViewChildren and the QueryList that it returns.
ViewChildlinkProperty decorator that configures a view query. The change detector looks for the first element or the directive matching the selector in the view DOM. If the view DOM changes, and a new child matches the selector, the property is updated.
While Angular inputs/outputs should be used when sharing data to and from child components, ViewChild should be used when trying to utilize properties and methods of the child component directly in the parent component.
Just like you can see in Angular Docs,
ViewChild is set after the view has been initialized
and
ViewChild is updated after the view has been checked
export class AfterViewComponent implements AfterViewChecked, AfterViewInit {
ngAfterViewInit() {
// viewChild is set after the view has been initialized <- Here!
}
ngAfterViewChecked() {
// viewChild is updated after the view has been checked <- Here!
}
// ...
}
So the issue on your code is that the view has not been initialized when the constructor is executed. You'd need to put all the code that interacts with the tabs in the ngAfterViewInit
lifecycle hook:
ngAfterViewInit() {
// Now you can use the tabs reference
console.log("a = ", this.tabRef);
}
If you just want to use Ionic custom lifecycle events, you'd need to use the ionViewDidEnter
hook:
export class TabsPage {
@ViewChild('myTabs') tabRef: Tabs;
ionViewDidEnter() {
// Now you can use the tabs reference
console.log("a = ", this.tabRef);
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With