ViewChild, undefined

Ionic Framework ionic-v3
9

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:

  1. don’t create a TabsPage that 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
  2. 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
  3. replace that <ion-nav> with your <ion-tabs> template from what used to be tabs.html if you had a separate folder for that page, cut and paste the template HTML into app.html
  4. copy code from old TabsPage - take what you need (javascript, scss)
  5. delete the TabsPage folder altogether
    The way you can make @ViewChild work 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/