How to route within the tab component in ionic

Question

I am just a beginner to ionic with some angular knowledge.I have tabs template, The Activity tab will have 3 tab-buttons on the page as shown in below image:

As shown in the image when the user click on:

• about button, the user will be routed to about page
• home button, the user will routed to home page
• contact button, the user will routed to contact page

within tabs page . This scenario works fine.

Now i have another page called add-contact. When the user click on add-contact button in contact page he must be routed to add-contact page along with tabs-menu something like this:

While surfing i got this question. Here they are routing to other page along with the clicked object ID and displaying that object properties.

I don't want to perform such operation, I just want to route another page (i,e add-contact) as shown in the 2nd image.

Since pages are more, i am giving Stackblitz DEMO

Answer 1

NavController is an Ionic V3 navigation method

See https://ionicframework.com/docs/v3/api/components/tabs/Tab/ and https://ionicframework.com/docs/v3/api/navigation/NavController/ for details.

So inside each of the tab root pages you can use

import { NavController } from 'ionic-angular';

constructor(public navCtrl: NavController) {}

And in your method: this.navCtrl.push(NewPage) to navigate to a new page.

Here is the modified stackblitz:

https://stackblitz.com/edit/ionic-oykegj

Ionic V4 primarily uses Angular Routing

See: https://ionicframework.com/docs/navigation/angular

You'll have to declare routes then use [routerLink] to navigate. It's a little more work at the beginning, but quite powerful.

This tutorial runs through how to update your app and why: https://www.joshmorony.com/converting-ionic-3-push-pop-navigation-to-angular-routing-in-ionic-4/

Answer 2

Navigate to the TypeScript file for your 'Contact' page. In this file, you need to create a function that pushes the add-contact page when the 'ADD CONTACT' button is clicked.

Ensure that the NavController has been imported:

import { NavController } from 'ionic-angular';

Below the import, your code should look something like this:

export class ContactPage {

constructor(public navCtrl: NavController) {

}


addPageLink() {
this.navCtrl.push(addContactPage);
{



{

Now navigate back to the HTML page for your 'Contacts' page:

In the code for your 'ADD CONTACT' button, you will need to call the function you just created.

Your code should look similar to this:

<button ion-button (click)="addPageLink()">
ADD CONTACT
</button>

Now, when the button is clicked, you should be redirected to the 'add-contact' page.

I hope this helps, please let me know how you get on and of course let me know if you have any additional questions.

Answer 3

The module should be included inside the route's tabs module in order to navigate to another page within the tabs. Assuming you have three tabs (home, about and contact), to add a new route (add-contact) to the tabs navigation, you have to add the new module into tabs-routing.module.ts:

const routes: Routes = [
{
    path: '',
    component: TabsPage,
    children: [
      { path: 'home', loadChildren: () => import(...).then(m => m.HomePageModule) },
      { path: 'about', loadChildren: () => import(...).then(m => m.AboutPageModule) },
      { path: 'contact', loadChildren: () => import(...).then(m => m.ContactPageModule) },
      ...
      // set the 'add-contact' route inside the children of tabs route
      { path: 'add-contact', loadChildren: () => import(...).then( m => m.AddContactPageModule) },
    ]
}]

Your button inside Contact's page should now specifies the route with routerLink to navigate to as follows:

<ion-button [routerLink]="['/add-contact']" routerDirection="forward">Add</ion-button>

This way, the add-contact page is wrapped by the tabs.