IONIC 4 Routing with Angular 6 Router

Routing is the process of selecting a path for traffic in a network — Wikipedia

The core functions of any application router include:

  1. Mapping URLs to application views
  2. Managing URL parameters such as item identifiers used for querying e.g. https://my-posts/p1d11?location=us-west
  3. Restricting access to specific views etc.

Basic Angular Router configuration

$ ng generate module app-routing  # Using angular CLI# If you generate your ionic app with the --type=angular option
# ...the app-routing.module.ts is automatically generated
# e.g. ionic new my-ionic-4 blank --type=angular

2. Match URL paths to Pages/Components

# app-routing.module.ts
# Add the following below the import statements
.............
const routes: Routes = [
{ path: 'index',
loadChildren: './home/home.module#HomePageModule'},
{ path: 'page-2',
loadChildren: './page-2/page-2.module#Page2PageModule'},
{ path: 'about', loadChildren: './about/about.module#AboutPageModule' }
]
.............

3. Update routing module imports and exports

# app.module.ts
.....
imports { RouterModule, Routes } from '@angular/routes';
....
imports: [
RouterModule.forRooot(routes) ]
# forRoot makes module available 'application wide'
exports:[
RouterModule]
.....
  • NB: Do not forget to import the routing module to you main app module
# app.routing.module....
import { AppRoutingModule } from './app-routing.module';
....imports:[
......,
AppRoutingModule]
........

4. Finally, add a router-outlet to indicate where the pages will be rendered

# app.component.html<ion-app>
<ion-router-outlet></ion-router-outlet>
</ion-app>

Example use cases

  1. Navigate from template using routerLink
# home.component.html#Suppose you want to navigate to the About page from the home page<a routerLink=”/path-name-to-about”>Go to About page</a>

2. Navigate from template using events

# home.component.html
# Suppose you wanted to view details for a list item with a given id
<ul *ngFor="let item of items"> <li ion-button round id="{{ item.id }}" (click)=”goToAboutPage($event)”> View item details
</li>
</ul>
  • Next, define an event handler inside the *. component.ts file
# home.component.ts…..import { Router } from ‘@angular/routes’;…..constructor( private router: Router ) {}
...
goToAboutPage(event): void{
let itemId = event.target.id;

this.router.navigate([ 'details', { id: itemId } ]);
# This will resolve to 'details/{itemId}' # ItemId will be replaced by the value of id from the clicked item
}
  • If we want to retrieve the passed id inside the details page, we can do so as follows
# details.component.tsimport { ActivatedRoute } from ‘@angular/router’;
......
itemId: string;
constructor(private thisRoute:ActivatedRoute){}
ngOnInit(){
this.itemId = this.thisRoute.snapShot.paramMap.get('id');
}
// we can now fetch item with the given Id from a database or API
}

What about item update, or delete?

  • Once we retrieve the id of the item all we need to do is to pass the id as a parameter to the delete, edit or view function(s)

Child components in Ionic pages(Optional)

# that is:$ ionic generate page headlines$ ionic generate component headlines/article # Child component
  • This is how you would configure the routes in your headlines page routing module
# headlines-routing.module.tsimport { Routes } from ‘@angular/routes’;const routes: Routes=[
{ path: '', component: HeadlinesComponent, name='headline'},
// Child routes
{ path: ':itemId', component: ArticleComponent, name='article'},
]
  • Hence to view any Article you can refer to it’s id as follows
# headlines.component.html<ion-list> <ion-item> <a href=”headlines/{{article.id}}”> {{ article.title }}</ion-item></ion-list># This assumes that you have configure the Headlines page on the main app routing modulei.e.
....,
{ path: 'headlines',
loadChildren: './headline/headlines.module#HeadlinesPageModule'
},
.........

— — — — — — — — — — Feel free to leave comments below. — — — — — — — —

Written by

Former Glorified Electrician(aka Electrical Engineer). Now a Software Developer working on complex Enterprise Software. Lets connect on twitter @NdamuleloNemakh

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store