Ok, I finally figured it out. This problem is solved for me now.
Getting tabs and side-menu working together (also using @ViewChild) – or… “Why is my @ViewChild(Tabs) property undefined?”
Short answer: If Tabs is only in the code and not in the template, you get undefined in the code. If it’s in the template as well, it works.
Long answer: If you already have a TabsPage component class in its own folder with scss and html and js/ts files, follow this to get it to work with your sidemenu:
- don’t create a
TabsPagethat is set to the root of your app’s main nav as is typically done, you’ll include its code in the app class itself - get rid of the app’s menu nav element from the HTML template - the one that used to be an
<ion-nav>- get rid of that<ion-nav>altogether - replace that
<ion-nav>with your<ion-tabs>template from what used to betabs.htmlif you had a separate folder for that page, cut and paste the template HTML into app.html - copy code from old TabsPage - take what you need (javascript, scss)
- delete the TabsPage folder altogether
The way you can make@ViewChildwork with a sub-component (not leave your property undefined but instead bind the property to the sub-component’s instance) is to include that sub-component in your parent component’s HTML template as well as in the code (javascript/typescript).
Anyhow, you can see an example of @ViewChild working with Tabs by looking at app.html and app.ts here:
https://github.com/tracktunes/ionic-recorder/blob/master/app/