<ion-tabs> is not rendered

Question

I have a page called footer-tabs that should render the Ionic tabs, but it is not being shown.

My footer-tab template:

<ion-tabs>
    <ion-tab tabIcon="list" tabTitle="Games"></ion-tab>
</ion-tabs>

Ts:

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
@IonicPage()
@Component({
  selector: 'page-footeer-tab',
  templateUrl: 'footeer-tab.html',
})
export class FooteerTabPage {

  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }


}

In my home component, I try to call through the dial, but nothing is rendered:

  <page-footeer-tab></page-footeer-tab>

I’m forgetting something special?

Answer 1

I believe that by making these modifications your code already works, you need to specify which page you want to open with the tab.

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
@IonicPage()
@Component({
  selector: 'page-footeer-tab',
  templateUrl: 'footeer-tab.html',
})
export class FooteerTabPage {
  public tab1Root = "SUAPAGEAQUI";
  constructor(public navCtrl: NavController, public navParams: NavParams)   {
  
  }
}

<ion-tabs>
    <ion-tab [root]="tab1Root" tabIcon="list" tabTitle="Games"></ion-tab>
</ion-tabs>

Answer 2

You can call the page in app.component.ts using this.nav.setRoot("FooteerTabPage");.