How to navigate between pages in ionic 4 & 5?


I had a project that I developed with ionic 3. But I took a break and when I started working again with ionic, I saw the navigation system change in the new versions. My project is a simple project. This project that lists the data in the a array and details about the data appear on a different page.

I was doing this on Ionic 3: homepage.ts

export class HomePage { items = []; constructor(public navCtrl: NavController) { this.initializeItems();} initializeItems() { this.items = [ { 'title': 'John', 'image': '', 'hair': 'black', }, { 'title': 'Brendon', 'image': '', 'hair': 'blonde', }]; openNavDetailsPage(item) { this.navCtrl.push(DetailsPage, { item: item }); }


export class DetailsPage { item; constructor(params: NavParams) { this.item = params.data.item; } }

NavCtrl and NavParams are no longer available in version 5 (and I think in version 4). I did to navigate from the home page to the next page(ionic 5). homepage.ts:

toDetailsPage(){ this.router.navigate(['details']) }

However, I couldn't navigate according to the data on my list. How can I do this according to the next generation version?


app.routing.module.ts (Routing Module)

const itemRoutes: Routes = [ { path: 'item', component: ItemListComponent}, { path: 'DetailsPage/:id', component: DetailComponent } ];

homepage.ts file

import { Router } from '@angular/router'; export class HomePage { constructor(private router: Router) openNavDetailsPage(item) { this.router.navigate(['/DetailsPage', { item: item }]); } }

.html file

If you directly want to route through html page:

<ion-button routerLink="/DetailsPage">Log In </ion-button>


<ion-button [routerLink]="['/DetailsPage', item.id]">Log In </ion-button>

detail.ts file

import { ActivatedRoute, Router } from '@angular/router'; export class DetailsPage implements OnInit { id: any; constructor(private route: ActivatedRoute, private router: Router) { } ngOnInit() { this.id = this.route.snapshot.paramMap.get('id'); } }

In addition to using a JSON

homepage.ts file

this.router.navigate(['/DetailsPage', { item: JSON.stringify(item) }]);

detail.ts file

this.item = JSON.parse(this.route.snapshot.paramMap.get('item'));



  • How to navigate between pages in ionic 4 & 5?
  • How to navigate between pages in ionic 4 & 5?
  • Is it possible to use username without domain for authentication in WSO2
  • gzip not working in Django with Whitenoise
  • Null check vs Optional is present check
  • Espresso.pressBack() does not call onBackPressed()
  • R Multiple Regression Loop and Extract Coefficients
  • Is there a built-in shortcut key for selecting the owner of the currently active form?
  • What I can use subquery instead for search MAX()?
  • Alphabetical array sort - lowercase first
  • ClearCase can I use clearexport_ccase/clearimport to copy VOB data to a VOB on a different machine
  • Can I switch the 'connected' user within an sql script that is sourced by mysql?
  • CSS style for container with transparent border images
  • Enable CORS on Tomcat 8.0.30
  • Access to database zend framework
  • Wicket - getting body of markup element
  • Videos won't upload
  • Auto send email based on the time and email address in database
  • NoClassDefFoundError: com.google.gson.GsonBuilder when using google play services with microsoft azu
  • ASP.NET MVC 2 actions for the same route?
  • How to clear a browser cache in Protractor
  • How to integrate angular2-material (alpha 8.2) with angular2-Quickstart app
  • php “page caching” solution suggestions for CMS Applications
  • calling IO Operations from thread in ruby c extension will cause ruby to hang
  • Codeigniniter insert data through models and controller
  • Spring Boot not autowiring @Repository
  • ARKit code issue {unknown error -1=ffffffffffffffff error: Task failed with exit 1}