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.

Answer 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