Angular 5: How to get Current queryparams [Routing]

Question

I am having trouble trying to get the queryparams into a component. For now, I just want to console.log(...) it. I am using the ActivatedRoute from @angular/router for this task.

I am redeveloping a certain platform for work so unfortunately some irrelevant code will have be to substituted with "..."

My Component.ts code:

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { RelevantReportService } from './../reportServices/relevantReports.service';
import { ActivatedRoute ,Params, Router } from '@angular/router';

@Component({
  selector: 'vr-reports',
  templateUrl: './reports.component.html',
  styleUrls: ['./reports.component.scss'],
  providers: [RelevantReportService],
  encapsulation: ViewEncapsulation.None
})
export class ReportsComponent implements OnInit {

  reportSections: any;
  constructor( private relevantReportService: RelevantReportService,
               private router: Router,
               private activatedRoute : ActivatedRoute

             ) { }

  ngOnInit() {
   ...

    console.log(this.activatedRoute.queryParams.value.reportName)
    // console.log(this.activatedRoute.queryParams._value.reportName)
  }
...

}

When I do console.log(this.activatedRoute.queryParams.value.reportName), the console spits out the queryparams (which is exactly what I wanted) HOWEVER it also says

"Property 'value' does not exist on type 'Observable' "

so I believe this not the correct way of tackling it.

Solution 1

It's observable in order to be able to monitor for changes in the params (by subscribing to observable). To get currently passed query params use:

this.activatedRoute.snapshot.queryParams

You could also use ActivatedRouteSnapshot instead of ActivatedRoute

Solution 2

Nothing surprising there! activatedRoute.queryParams is an observable, and therefore you need to subscribe to it as per https://angular.io/api/router/ActivatedRoute#queryParams

You need to do the following :

ngOnInit() {
    this.activatedRoute.queryParams.subscribe(values => {
      console.log(values);//Which will print the properties you have passed
    });
  }

Comments

[its.david]

Thanks, this is exactly what I was looking for. Could you possibly explain to me what the 'snapshot' is?

[Nikola Yankov]

It's kind of static picture of the initially passed parameters to the activated route.

[DeborahK]

And note that if you use the snapshot, you won't get notified if the page is redisplayed with different query parameters.

[its.david]

Printing the properties is not what I want, I want to get the Query Params :/

[its.david]

Would I use a lifecycle hook to make sure it does get notified then?

[Nikola Yankov]

If you need to be notified for parameters change you should use regular ActivatedRoute and subscribe to queryParams or params depending from what you need.

[Mehdi]

Well, you can do whatever you want with the variable values. Printing it is just to see what's in it!

[its.david]

I have done it but unfortunately I did not see the queryparams... I'm not sure if it's in there or if it's buried really deep

[Lea Reimann]

@its.david You just have to exchange "params" with "queryParams" and you're good to go. They are both observables. I changed the example code here so it reflects what the OP wanted (currently waits for review).