Mastering Mobile Application Development with Ionic/

...

/

Accessing Navigation Data

Accessing Navigation Data

Learn how to retrieve URL parameters and access navigation data using the ActivatedRoute module.

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:

Press + to interact
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 ...