Routing in Ionic 4 for tabs based apps

5 min readAug 12, 2018

In earlier versions of Ionic, it had its own custom routing. In version 4 Ionic recommends using angular routing. I’ll show you how you can route to a subpage within a tab and optionally send parameters. We’ll create a tabs app which shows a list of events and tapping on an event will take you to the event details page.

Let’s start by creating an app using Ionic 4 cli. Before creating the app check the version of cli by running ionic — version it should be 4.0.5 or above. If it’s not latest you can run npm install -g ionic to get the latest version.

Run below to create the app.

ionic start routes tabs — type=angular

Once dependencies are installed go to the routes folder and run the app.

cd routes
npm start

Now you can open http://localhost:4200 (It may be a different port on your machine, use the URL shown in your terminal) in your browser and you should see the app running with 3 tabs Home, About and Contact.

Open the routes folder in your favorite editor, my preference is to use VS Code, Atom or WebStorm.

Before adding your own routes let look at the default routes that ionic creates for tabs app. You can find all the tab routes in the tabs.router.module.ts file.

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'home',
        outlet: 'home',
        component: HomePage
      },
      {
        path: 'about',
        outlet: 'about',
        component: AboutPage
      },
      {
        path: 'contact',
        outlet: 'contact',
        component: ContactPage
      }
    ]
  },
  {
    path: '',
    redirectTo: '/tabs/(home:home)',
    pathMatch: 'full'
  }
];

Here tabs is the parent route and all other routes come under tabs. For example, if you want to navigate to about page your route will start with tabs and will look like /tabs/(about:about). Here we also specify the router outlet, we’ll talk about it later in the Setup Routes and Home Page section.

The last line defines the default route which is the home page in the home tab.

Next, we’ll add events service, event details page and display list of events in the Home tab.

Events Service

Let’s add an events service that will give us events.

ionic g service events

Here we’re using ionic cli to generate us a service, this will create a service in file events.service.ts. Open this file and add the following code.

export class EventsService {
 events: Event[]; constructor() {
   this.events = [
   {
     id: ‘1’,
     name: ‘JSConf AU 2018’,
     location: ‘Melbourne’,
     country: ‘Australia’,
     time: ‘12th Monday’
   },
   {
     id: ‘2’,
     name: ‘Ionic Conference’,
     location: ‘San Francisco’,
     country: ‘USA’,
     time: ‘10th Wednesday’
   }];
 }
 
 getAllEvents() {
   return this.events;
 }
 getEventById(id) {
   return this.events.find((event) => (event.id === id));
 }
}export interface Event {
 id: string;
 name: string;
 location: string;
 country: string;
 time: string;
}

Above we created an Event type and exported it, we’ll use it in Home and event details page. Adding a type is optional.

In the constructor, we initialized events property with 2 events. We also added 2 methods, getAllEvents which returns all the events and will be used in the Home page to display a list of events and getEventById which will be used in Event details page to show details.

Add Event Details page

Similar to events service we can use ionic cli to generate an event details page.

ionic g page event-details

Setup Routes

Let’s setup routes in tabs.router.module.ts and tabs.module.ts.

To add routes in tabs.router.module.ts, write import statement as below.

import { EventDetailsPage } from ‘../event-details/event-details.page’;

And add below code in routes property.

{
 path: ‘event-details/:id’,
 outlet: ‘home’,
 component: EventDetailsPage
}

Here we specify the id which is a variable that we’ll pass when navigating to a particular event. Also note outlet, here outlet is the name of the tab where we want to display the event details. As we want to display event details in home tab we specify outlet as home. Each tab has a different router outlet in ionic.

Also, add the module reference to tabs.module.ts.

import { EventDetailsPageModule } from ‘../event-details/event-details.module’;

And add EventDetailsPageModule in imports under NgModules.

Get Event Details

Add following import statements in the event-details.page.ts file just below other imports to get event details.

import { EventsService, Event } from ‘../events.service’;
import { ActivatedRoute } from ‘@angular/router’;

Next, declare an event property that we’ll use in the template to display event details and inject the events service and activated route in the constructor.

event: Event;constructor(public eventsService: EventsService,
 public route: ActivatedRoute) {
 const id = this.route.snapshot.params.id;
 this.event = this.eventsService.getEventById(id);
 }

When the user navigates to this page we’ll grab the id from ActivatedRoute and pass it to eventsService getEventById method that returns an event for this id and assign it to event property.

Update Event Details Template to display event details

Open event-details.page.html and add a back button so we can navigate back to the main events home page. Put this code inside ion-toolbar.

<ion-buttons slot=”start”>
 <ion-back-button></ion-back-button>
</ion-buttons>

Setting slot to start means the back button will appear left side of the title. We don’t need to provide any links in ion-back-button it’ll navigate to the previous view automatically.

Also, add ion-card inside ion-content that will display event details.

<ion-card>
 <ion-card-content>
 <ion-card-title>{{event.name}}</ion-card-title>
 
 <p>{{event.location}}, {{event.country}}</p><ion-text>{{event.time}}</ion-text>
 </ion-card-content>
</ion-card>

Home Page

Here we’ll display a list of events. Import events service and event data type in home.page.ts.

import { EventsService, Event } from ‘../events.service’;

And also inject the events service in the constructor and initialise events property that we’ll use in the template.

events: Event[];
constructor(public eventsService: EventsService) {
 this.events = eventsService.getAllEvents();
}

Open home.page.html and replace ion-content with following.

<ion-list>
 <ion-item *ngFor=”let event of events”
 href=”tabs/(home:event-details/{{event.id}})”
 detail=”true”>
 <ion-label>{{event.name}}</ion-label> 
 </ion-item>
</ion-list>

Please note the value of href carefully tabs/(home:event-details/{{event.id}}), tabs is the path of the parent route, home is the outlet, event-details is the first part of the path and id is an identifier of the event that we get from the event.

We’re all done now, you can run the app and navigate between home and event details page.

Here is the link to GitHub repo for this app. https://github.com/sandy9git/ionic-4-routes