Extract the ID from the Router's URL

Question

Extract the ID from the Router's URL

I am currently working on a project where I need to keep a log of every page that is accessed in my Angular application.

Here is an overview of my routing setup:

const routes: Routes = [
  { path: ':id', component: AppComponent}
];

Within my app component's TypeScript file, in the ngOnInit() method, I have added the following code:

ngOnInit() {
  console.log(this.router.url);
}

For example, when trying to access the URL /testing123,

I am expecting the log to show "/testing123", However, it is currently only logging "/" without passing the ID.

angular typescript angular6

Answer 1

Answer №1

If you need to retrieve the id from the router URL, the following code can be very handy:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Params} from '@angular/router';

export class AppComponent implements OnInit {

  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
    this.route.params.subscribe(
      (params: Params) => {
        console.log(params['id']);
      }
    );
  }

}

Answer 2

If you need to retrieve the id from the router URL, the following code can be very handy:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Params} from '@angular/router';

export class AppComponent implements OnInit {

  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
    this.route.params.subscribe(
      (params: Params) => {
        console.log(params['id']);
      }
    );
  }

}

Answer 3

Answer №2

Below is the code snippet to capture logs of each successful route:

import { NavigationEnd, Router } from '@angular/router';

export class Tracker {

constructor(private router: Router) {
router.events.subscribe((evt) => {
  if (evt instanceof NavigationEnd) {
   console.log(evt.url);
  }
})
}

Answer 4

Below is the code snippet to capture logs of each successful route:

import { NavigationEnd, Router } from '@angular/router';

export class Tracker {

constructor(private router: Router) {
router.events.subscribe((evt) => {
  if (evt instanceof NavigationEnd) {
   console.log(evt.url);
  }
})
}

Extract the ID from the Router's URL

Answer №1

Answer №2

Similar questions

Shifting focus among an array of standard <input> controls with each keystroke

Cypress: Importing line in commands.ts is triggering errors

Utilize ngx-filter-pipe to Streamline Filtering of Multiple Values

Issue with ngModel being undefined after data has finished loading in Ionic 3

Extracting Date and Time Information from matDatepicker in Angular 6 Material

Set the value of HTML input type radio to a nested JSON string

Angular Karma encountered an error: TypeError - It is unable to read the property '_id' as it is undefined

The condition will be false if a number is present, even if it is zero

Error TS2322: This type cannot be assigned to type 'never' in Angular

What is the best way to retrieve the deviceValue in another function?

Exploring JSON object nesting

Cancelling an ongoing AWS S3 upload with Angular 2/Javascript on button click

How can I set up timers and display their outcomes?

The Div element triggers a focus event when either the div itself is selected or any nested input field is selected - Angular

Instructions for activating "error prevention only" in TSLint: How can you turn off style checks and other features?

Encountering Invalid Chai attribute: 'calledWith'

Displaying individual information for each Bootstrap modal in Angular can be achieved by properly binding the data

Fade-in and fade-out animations in Angular triggered by a click event

New post: "Exploring the latest features in Angular

An error was encountered at line 52 in the book-list component: TypeError - The 'books' properties are undefined. This project was built using Angular