CODEWITHSUNDEEP
ionic-frameworktabs
Roee Bendor
Roee Bendor

Reputation: 15

IONIC | how do i set new page in the tabs?

Hello

I have a problem with the links on my ionic app. I'm trying to set new tabs but I'm having a problem with the links.

tabs.html

 <ion-tabs>
  <ion-tab [root]="tab1Root" tabTitle="test1" tabIcon="md-mail"></ion-tab>

  <ion-tab [root]="tab2Root" tabTitle="test2" tabIcon="md-contact"></ion-tab>

  <ion-tab [root]="tab3Root" tabTitle="test3" tabIcon="md-chatbubbles">

     <ion-tab [root]="tab4Root" tabTitle="test4" tabIcon="md-beaker"></ion-tab>
     </ion-tab>
</ion-tabs>

tabs.ts

import { Component } from '@angular/core';

import { ListPage } from '../list/list';
import { HomePage } from '../home/home';


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

  tab1Root = HomePage;
  tab2Root = ListPage;
  constructor() {

  }
}

How do I add links to tabs 3 and 4? Thanks!

Upvotes: 0

Views: 1746

Answers (1)

Steve Kennedy
Steve Kennedy

Reputation: 5402

Tab 3 & Tab 4 will have to link to new pages. You will have to create these new pages FIRST. To create these pages, use following Ionic CLI commands:

ionic generate page Chat

ionic generate page Breaker

(documentation https://ionicframework.com/docs/cli/generate/):

I strongly suggest using the CLI to create your page. When you use the generate parameter, it will scaffold out everything your page needs (including the exported module, css, html, etc.). If you create the page manually, you might miss some of the valuable scaffolding that's needed with every page. You can download the ionic CLI using NPM. https://ionicframework.com/docs/cli/

Then, follow the exact same convention you see for Tab 1 and Tab 2.

For example, let's say Tab 3 will go to a page called ChatPage. And Tab 4 will go to page called BreakerPage. Your tabs.ts will look like:

import { Component } from '@angular/core';

import { ListPage } from '../list/list';
import { HomePage } from '../home/home';
import { ChatPage } from '../chat/chat';
import { BreakerPage } from '../breaker/breaker';


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

  tab1Root = HomePage;
  tab2Root = ListPage;
  tab3Root = ChatPage;
  tab4Root = BreakerPage;

  constructor() {

  }
}

Also fix your tabs.html page. It has two ending for the last tab, in the example you provided.

Upvotes: 1

Related Questions