How to get params from url using Router or ActivatedRoute in angular

Question

I'm trying to get parameters from url in AppComponent in my angular application.

But when I use ActivatedRoute to get params it gives null. This is my router configuaration.

  {
    path: '',
    component: HomeComponent,
    canActivate: [AuthGuard]
  },
  {
    path: 'product/:product',
    component: HomeComponent,
    canActivate: [AuthGuard]
  }

This is what I tried in AppComponent to get the the result of params from url.

constructor(
      private route: ActivatedRoute,
      private router: Router
) {}

ngOnInit() {

this.route.params.subscribe(params => {
      console.log(params['product']); //jsut print the result in console
});

//or can use to get the result
//console.log(this.route.snapshot.params['product'];

}

this code only works inside particular components. So, Is there any suitable way to get the results. [Angular 6+]

where are you subscribing to route.params ? Is it inside any function? please provide complete code — Sachin Gupta
It should work, can you please create a stackblitz to reproduce the issue. — Sachin Gupta
@SachinGupta This is stackblitz link with the issue: angular-9xa95q.stackblitz.io/product/se — Lilanka

Chirag Chirag · Accepted Answer · 2019-04-12T10:17:16

First, create a sharedService

import { Injectable } from '@angular/core';
import {  Subject  } from 'rxjs';


@Injectable()
export class SharedService {

  myData: Subject<any> = new Subject<any>();

  constructor() {}

  setData(data) {
    this.myData.next(data);
  }
}

Then from where you want to set the data use this method:

export class MyComponent implements OnInit {

    constructor(private sharedService: SharedService) { }

    ngOnInit() {
       this.sharedService.setData(data);
    }
}

Then in your appComponent:

export class AppComponent implements OnInit {

  constructor(private sharedService: SharedService) {
    this.sharedService.myData.subscribe((value) => {
     console.log(value) // Here you will get your complete data
    });
  }

}

How to get params from url using Router or ActivatedRoute in angular

2 Answers