How to get Parameter value in Common component in Angular 6

Question

I have HeaderComponent which is common for all pages and appears on each page. so, I have created separate Component for Header and added in app.component.html using selector. I have created two child pages "Home" and "Second" and route it using <router-outlet> in app.component.ts

Route

const routes: Routes = [{
  path : "", component : HomeViewComponent
},{
  path : "second/:id/:category", component : SecondComponent
}];

I am passing parameters id and category in second components.

in HeaderComponent I want to fetch this parameter when route changes so I did following code in header.component.ts

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

  ngOnInit() {
    this.router.events.subscribe((val) => {
      // see also 
      this.route.params.subscribe(params => {
        console.log(params);
      });
    });
  }

But, I am unable to get params. I am getting {} empty params in console I've attached stackblitz link as well for same.

https://stackblitz.com/edit/hardik?file=app%2Fapp.routing.module.ts

UPDATE: I've this header component in all pages not just even in second component. so I can't put it in second component only.

I found this, hope it will help: https://stackoverflow.com/questions/51943663/get-route-parameters-in-component — rcanpahali, Dec 18 '18 at 14:21
I think the params is empty because your `header-component` is not inside the router-outlet. I'm not saying you should have it inside, but I'm saying it's probably why you can't access the params in that component. — gerb0n, Dec 18 '18 at 14:27
Could you tell us what is your need that require your header component to be aware of the route parameters ? Are the route parameters always id / category ? — Florian, Dec 18 '18 at 14:34
@Florian - Yes route parameters are always id and category only. I need to fetch this parameters value and do further process in header components. I've not added that logic here because it is not necessary here. I just want to get parametes value, rest of the things are working well — Ubiquitous Developers, Dec 18 '18 at 14:35
@shadowman_93 - I am looking into link you shared. It looks promising but still I working on it that how I can add that code into my solution — Ubiquitous Developers, Dec 18 '18 at 14:38
@UbiquitousDevelopers apparently, angular gives each component an unique instance of ActivatedRoute. That means that you can't access to your route parameters with `ActivatedRoute` instance of your header.component. I'm looking for a nice way to implement it, without having to use a service and update the parameters in the service for each component... — Florian, Dec 18 '18 at 14:40
@Florian - I really appreciate you help. as far as I understood from all comments that header should be part of route, if I want to use ActivatedRoute. am I correct? — Ubiquitous Developers, Dec 18 '18 at 14:42
@UbiquitousDevelopers : no, your route and your component (*second*) are wired by your `app.routing.module`. Your component *second* is the target of the route `second/:id/:category` so if you implement `ActivatedRoute` in this component, you have access to your params in your component *second*. Apparently angular router let you access to routes tree `router.children` from anywhere (from your *head component* for example). So if you want to access to first activated route, chek this : https://angular.io/guide/router#activated-route — Florian, Dec 18 '18 at 14:59

score 2 · Answer 1 · answered Dec 18 '18 at 14:11

2

Use the paramMap

this.router.events.subscribe((val) => {
  // see also 
    let id = this.route.snapshot.paramMap["id"]; 
    console.log(id)

});

answered Dec 18 '18 at 14:11

Sachila Ranawaka

39,756
7
56
80

I used the same, but I am getting undefined only. you can check in stackblitz link for testing. I've attached screenshot as well here. https://prnt.sc/lwj932 – Ubiquitous Developers Dec 18 '18 at 14:14
I think u need to use the route subscribe inside second component since the parameter are set for that component – Sachila Ranawaka Dec 18 '18 at 14:25
actually I want to get this parameters in all components not in just second component. that's why I used in header component – Ubiquitous Developers Dec 18 '18 at 14:27
1

If you want to access it in all components than you should make a parent-child construction with the routing including your `header-component` – gerb0n Dec 18 '18 at 14:31
I'm not saying you should continue like this; but in this example you can access your params inside your `header-component`. https://stackblitz.com/edit/hardik-ndx3gr However this is how I normally tackle this issue and it always feels a bit 'off'. That's why I wouldn't recommend it but it does the job. – gerb0n Dec 18 '18 at 14:51
@GVersluis - You have remove the header from HomeComponent which is not desired output. – Ubiquitous Developers Dec 19 '18 at 06:10

How to get Parameter value in Common component in Angular 6

1 Answers1