Ionic Cookbox

Routing and Navigation

Basic Angular Router configuration

Create a routing module that is ‘visible’ to all components in your app

With Angular CLI

ng generate module app-routing

With Ionic

ionic start my-app blank --type=angular

Match URL paths to Pages/Components

const routes: Routes = [
    { path: 'home',  loadChildren: './home/home.module#HomePageModule'    },
    { path: 'list',  loadChildren: './list/list.module#ListPageModule'    },
    { path: 'about', loadChildren: './about/about.module#AboutPageModule' }

Update routing module imports and exports


imports { RouterModule, Routes } from '@angular/routes';
imports: [
    RouterModule.forRooot(routes) # makes module available 'application wide'

Do not forget to import the routing module to you main app module


import { AppRoutingModule } from './app-routing.module';

Add a router-outlet to indicate where the pages will be rendered





const routes: Routes = [
   { path: 'hello', component: HelloPage }


  // Regular Route
  { path: 'eager', component: MyComponent },

  // Lazy Loaded Route (Page)
  { path: 'lazy', loadChildren: './lazy/lazy.module#LazyPageModule' },

    // Redirect
  { path: 'here', redirectTo: 'there', pathMatch: 'full' }
<ion-button href="/hello">Hello</ion-button>
<a routerLink="/hello">Hello</a>

Navigate Programmatically

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

@Component({ ... })
export class HomePage {
  constructor(private router: Router) {}

  go() {

Navigate to Dynamic URLS

const routes: Routes = [
  // Regular Route
  { path: 'items/:id', component: MyComponent },
<ion-button href="/items/abc">ABC</ion-button>
<ion-button href="/items/xyz">XYZ</ion-button>

Extract Data from Routes with ActivatedRoute

When working with dynamic data, you need to extract the params from the URL.

For example, you might want to read from the database when the user navigates to /items/:id, using the ID from the route to make a query.

Angular has an ActivatedRoute service that allows us to grab information from the current route as a plain object or Observable.

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({ ... })
export class ProfileComponent implements OnInit {

  id: string;

  constructor(private route: ActivatedRoute) {}

  ngOnInit() { = this.route.snapshot.paramMap.get('id');

Or if we need to react to changes, we can subscribe to an Observable.

ngOnInit() {

Migrate from Ionic X to Ionic 4 Routing

Set Root

<ion-button href="/support" routerDirection="root">

or in class



<ion-button href="/products/12" routerDirection="forward">


<ion-button href="/products" routerDirection="backward">
<ion-back-button defaultHref="/products"></ion-back-button>

Navigate backwards programatically:


Routing in Tabs

  path: 'contact',
  outlet: 'modal',
  component: ContactModal

Lazy Loading


const routes: Routes = [
  { path: 'about', loadChildren: './about/about.module#AboutPageModule' },


const routes: Routes = [
  { path: '', component: AboutPage },

Using Guards

  providedIn: 'root'
export class AuthGuard implements CanActivate {
  constructor(private router: Router) {}

    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): boolean {

    const loggedIn = false; // replace with actual user auth checking logic

    if (!loggedIn) {

    return loggedIn;
const routes: Routes = [
  { path: 'special', component: SpecialPage, canActivate: [AuthGuard] },




HTML Elements

Access HTML Element from Page Class

<div #box></div>
@ViewChild('box') el_box:ElementRef;
box: any;

constructor() { = this.el_box.nativeElement;

Grabbing Ionic Components with ViewChild

Let’s imagine we have a HomePage component that looks like this and we want to close the menu when an item is clicked.

  <!-- with some stuff inside -->

Our goal is to access the ion-menu from the TypeScript code so we can call its API methods, like open() and close().

import { Component, ViewChild } from ‚@angular/core‘;
import { Menu } from ‚@ionic/angular‘;

export class HomePage {

@ViewChild(Menu) menu: Menu;

onDrag() {;

Shortcut: Use Template Variables

There’s actually a very convenient shortcut to using ViewChild in a component. We never have to leave the HTML by setting a template variable in Angular. In this example we reference the menu component with a hashtag and variable name #mymenu.

<ion-menu #mymenu>
<!– with some stuff inside –>

<ion-item (click)=“mymenu.close()“></ion-item>

And we’re done. Much easier then using ViewChild in the TypeScript.

Grabbing Multiple Components with ViewChildren

You might also run into a situation where there are multiple components of the same type on the page, such as multiple FABs:


ViewChildren is almost the same, but it will grab all elements that match this component and return them as an Array.

import { Component, ViewChildren } from ‚@angular/core‘;
import { Fab } from ‚@ionic/angular‘;

export class HomePage {

@ViewChildren(Fab) fabs: Fab[];

closeFirst() {

Now that you know about ViewChild, you should have no problem accessing the API methods found on Ionic’s web components.

Loops in HTML Elements

   <li *ngFor="let number of [0,1,2,3,4]">
  <li *ngFor='#key of [1,2]'>
  <li *ngFor='#val of "0123".split("")'>{{val}}</li>
  <li *ngFor='#val of counter(5) ;#i= index'>{{i}}</li>

export class AppComponent {
  demoNumber = 5 ;

  counter = Array;

    return new Array(length);

Display Array

<ion-grid class="board">
  <ion-row *ngFor="let r of [0,1,2]">
    <ion-col col-4 class="cell" *ngFor="let c of [0,1,2]" (click)="handle(c+r*3)">

Change CSS class on click

Add handler to html element

<a class="btn" (click)='toggleClass($event)'>
    <ion-icon class="icon" name="bluetooth"></ion-icon>

Import Render2 in page.ts

import { Component, OnInit, Renderer2 } from '@angular/core';

constructor(private renderer: Renderer2) { }

Write handler to toggle class

toggleClass(event: any) {
    const classname = 'active';

    if ( {
        this.renderer.removeClass(, classname);
    } else {
        this.renderer.addClass(, classname);

Migrating to Ionic 4

Replace Http Module with HttpClient

Changes in app.module.ts

import { HttpClientModule } from '@angular/common/http';
    declarations: [AppComponent],
    entryComponents: [],
    imports: [

Changes in service.ts

import { Http } from '@angular/http';
import { HttpClient } from '@angular/common/http';
constructor(public http: Http) { }
constructor(public httpClient: HttpClient) { }