CODEWITHSUNDEEP
angulartypescriptionic-framework
RedCrusador
RedCrusador

Reputation: 705

ionic add tabs to page

I am trying to add tabs to a page in Ionic.

It seems like a trivial task but for some reason they are not showing.

I have tried two ways;

One is Adding /pages/tabs and a tabs.html / tabs.ts file

tabs.html page.

<ion-tabs>
   <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab> 
   <ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle">
   </ion-tab>
</ion-tabs>

tabs.ts page

   import { Component } from '@angular/core';
   import { AboutPage } from '../about/about';
   import { HomePage } from '../home/home';

   @Component({
     templateUrl: 'tabs.html'
   })
   export class TabsPage {

      tab1Root = HomePage;
      tab2Root = AboutPage;

     constructor() {
     }
    }

Then adding the tabs part into my app.module.ts page in 'declarations' and 'entryComponents'.

Second one is I tried adding the tabs html into the view for home...

<ion-content padding>
<ion-tabs>
<ion-tab (click)="nav.setRoot(pages2.homePage)" tabTitle="Home" tabIcon="home"></ion-tab>
<ion-tab (click)="nav.setRoot(pages2.aboutPage)" tabTitle="About" tabIcon="information-circle"></ion-tab>
</ion-tabs>
</ion-content>

In both implementations I get no tab bar showing.

Upvotes: 1

Views: 6801

Answers (1)

Sathyajith
Sathyajith

Reputation: 4024

I think the thing you are missing here is root property of the ion-tab. You can try like shown below.

<ion-tabs>
<ion-tab [root]="tab1Root" (ionSelect)="nav.setRoot(pages2.homePage)" tabTitle="Home" tabIcon="home"></ion-tab>
<ion-tab [root]="tab1Root" (ionSelect)="nav.setRoot(pages2.aboutPage)" tabTitle="About" tabIcon="information-circle"></ion-tab>
</ion-tabs>

Upvotes: 1

Related Questions