Controlling menu and tab in conference app

Ionic Framework ionic-v3
1

Hi,
I just downloaded conference app from ionic github. Just wondering how to control footer tab for different menus.
Like for sign up menu, there is no footer tab.
But in Schedule / About / Calendar / Contact menu or pages, that footer tab is there.

Footer tab also includes: calendar, map, contacts.

I don’t see anything special in tabs.ts or app.component.ts for that visibility control.

2

The root component is the TabsPage. All the pages Schedule, About, Calendar & Contact have a selector.
The tabs page only let you change the root page to show in it and import this four pages to show them.
So the 4 pages are in TabsPage which is the root Component.

3

I actually don’t see any specific selector for calendar or map. I am missing that whole selector point actually that can differ calendar view (with footer nav) from signup view (without footer nav).

4

It works with navParams.
There is a lot in app.component.ts :

appPages: PageInterface[] = [
    { title: 'Schedule', component: TabsPage, icon: 'calendar' },
    { title: 'Speakers', component: TabsPage, index: 1, icon: 'contacts' },
    { title: 'Map', component: TabsPage, index: 2, icon: 'map' },
    { title: 'About', component: TabsPage, index: 3, icon: 'information-circle' },
  ];

/*
 * Some stuffs
 */

  openPage(page: PageInterface) {
    // the nav component was found using @ViewChild(Nav)
    // reset the nav to remove previous pages and only have this page
    // we wouldn't want the back button to show in this scenario
    if (page.index) {
      this.nav.setRoot(page.component, {tabIndex: page.index});

    } else {
      this.nav.setRoot(page.component);
    }

And then, to highlight the righ component you have to load index in tabsPage :

  constructor(navParams: NavParams) {
    this.mySelectedIndex = navParams.data.tabIndex || 0;
  }

In tabs.html, the [root] property set the root page.

5

Actually I checked difference with tutorial template. Finally understood my issue. In appPages I was assigning each component name instead TabsPage. Anyway good find.

Thanks
Robin