Ionic 4 Latest Angular Routing in Ionic 4 Application

After the release of Ionic’s stable version 4, the major change which is introduced besides web components is related to Routing. The latest version of Ionic now supports Angular Routing.

In the earlier version on Ionic, there was the concept of push and pop, where pages were pushed in a stack of pages having viewable page object on top. So if we want to go to some page we simply go to that pushed page index or push a new one.

Push/Pop in Ionic’s previous version 3

This old style push/pop method of navigation still exists and can be used but not preferred. The ionic team introduced Angular’s Routing to make latest Ionic more compatible with other frameworks as well. The team has already announced the beta version of Ionic React. So introducing Angular Routing in Ionic 4 makes sense they will not take extra overhead to develop navigation modules for each framework.

Angular Routing in Ionic 4

Now the latest version of Ionic Angular Routing style of routing which is browser-based and URL are

NavController

We still have NavController in Ionic 4 which spells the same like before but it is different. The ionic team has added animations for opening (Forward) and closing (Backwords) pages which are not available by default in Angular Routing for now. We will get to know How to apply these routing animations later in this post.

<ion-nav> changed to <ion-router-outlet>

In Ionic 3 we used to have where selected page’s template used to load, changed to tag this is now where the selected component will load. Angular’s router outlet looks like this as the Ionic team has added animations which are available only if we use

How to Use Routing in Ionic 4?

In Ionic 3 we had push, pop & setRoot methods in NavController for Routing used as follows:

this.navCtrl.push('list');
this.navCtrl.pop('home');
this.navCtrl.setRoot('HomePage');

These are now changed to

this.navCtrl.navigateForward('/list');
this.navCtrl.navigateBack('/home');
this.navCtrl.navigateRoot('/details');

The paths provided above are set in Routes available in ‘@angular/router‘

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', loadChildren: './home/home.module#HomePageModule' },
  { path: 'list', loadChildren: './list/list.module#ListPageModule' },
  { path: 'details', loadChildren: './details/details.module#DetailsPageModule' },
];

Here we used loadChildren as in Ionic 4 routes by default are Lazy Loaded so there is no need to add @IonicPage decorator.

Implement Routing in HTML Template and Component Methods

In HTML template we can Route/ Navigate pages by using

<span [routerLink]="'/list/'" routerDirection="forward">
	Go To List
</span>

routerDirection attribute can have “forward‘ or “backward” to show respective animations.

In component, we can simply use methods as discussed above

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

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  constructor(
    private navCtrl: NavController
  ){}


  GoToList(){
    this.navCtrl.navigateForward('/list');
  }

  BackToList(){
    this.navCtrl.navigateBack('/details');
  }

}

So this is a basic discussion on Angular Routing in Ionic’s latest version 4. We will further discuss other related topics.