title: Angular 5: How to get Current queryparams [Routing]
body: <p>I am having trouble trying to get the queryparams into a component. For now, I just want to <code>console.log(...)</code> it. 
  I am using the <code>ActivatedRoute</code> from <code>@angular/router</code> for this task. </p>
  
  <p><em>I am redeveloping a certain platform for work so unfortunately some irrelevant code will have be to substituted with "..."</em> </p>
  
  <p>My Component.ts code:</p>
  
  <pre><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)
    }
  ...
  
  }
  </code></pre>
  
  <p>When I do <code>console.log(this.activatedRoute.queryParams.value.reportName)</code>, the console spits out the queryparams (which is exactly what I wanted) <strong>HOWEVER</strong> it also says </p>
  
  <blockquote>
    <p>"Property 'value' does not exist on type 'Observable' "</p>
  </blockquote>
  
  <p>so I believe this not the correct way of tackling it. </p>