Search⌘ K
AI Features
Home
Courses
Mastering Mobile Application Development with Ionic

Accessing Navigation Data

Explore methods to access navigation data in Ionic by using Angular's ActivatedRoute module. Understand how to extract URL parameters and pass complex objects through routes with the data property. This lesson helps you handle route data effectively within your Ionic application components.

We'll cover the following...

In the previous lesson, we learned how to programmatically implement navigation within our page component classes using the navigate and navigateByUrl Angular Router methods.

This is all fine but how would we retrieve the URL parameter that has been posted via these methods?

Using the ActivatedRoute module

Within the DetailsPage component, we could make use of the ActivatedRoute module of the @angular/router library package and its methods, like so:

TypeScript 3.3.4
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
  selector: 'app-details',
  templateUrl: './details.page.html',
  styleUrls: ['./details.page.scss'],
})
export class DetailsPage implements OnInit {
  constructor(private route : ActivatedRoute) { }
  // Executed when component is first initialized
  // Here we Capture and display our routing parameters
  ngOnInit() : void {
    const idArr : any = this.route.snapshot.params['id']; 
    const idVal : any = this.route.snapshot.params.id;
    console.log('Id array: ' + idArr);
    console.log('Id value: ' + idVal);
  } 
}

We use the ...