Subscribing to query string parameters in Angular

Question

I've seen quite a few examples of subscribing to query string parameters in Angular 2+ but I can't seem to get it to work

e.g. How get query params from url in angular2?

Here is my code:

import { ActivatedRoute, Router } from '@angular/router';
...
export class MyComponent implements OnInit,OnDestroy {
  private a: boolean = true;
  private b: boolean = true;

  constructor(route: ActivatedRoute)  {
  ...

  ngOnInit(): void {    
    this.route.queryParams.subscribe((queryParams:any) => {
      this.a = queryParams.a;
      this.b = queryParams.b;
     });

The problem I have is that this does not appear to refer to my component to setting a and b which I want to use to drive *ngIf statements does not work.

What am I doing wrong?

`this.route` probably undefined. Try to define it as instance member: `constructor(private route: ActivatedRoute)` - pay attention to added `private` modifier. Also it is recommended to use `queryParamMap` instead of `queryParams` — Aleksey L., Aug 08 '17 at 11:50

score 10 · Answer 1 · answered Jan 06 '18 at 07:45

The below code is for Angular 5.

import { ActivatedRoute, Router } from '@angular/router';
...
export class MyComponent implements OnInit, OnDestroy {
  private a: boolean;
  private b: boolean;

  constructor(private route: ActivatedRoute)  {
  this.a = true;
  this.b = true;
  ...
  }

  ngOnInit(): void {    
    this.route.queryParams.subscribe(queryParams => {
      this.a = queryParams['a'];
      this.b = queryParams['b'];
  });

Could you try and check if it works?

score 3 · Answer 2 · answered May 06 '19 at 22:42

3

It works for me...

let comp = this;
ngOnInit(): void {
this.route.queryParams.subscribe(queryParams => {
  comp.a = queryParams['a'];
  comp.b = queryParams['b'];
});

answered May 06 '19 at 22:42

Alexandre Lindolfo Vianna

31
4

score 2 · Answer 3 · answered Sep 14 '18 at 19:18

  ngOnInit() {
    // Example http://google.com?foo=bar#hash
    this.route.fragment.subscribe(frag => {
      // Result: 'hash'
      console.log('Fragment: ', frag);
    });
    this.route.queryParamMap.subscribe(queryParams => {
      /**
       * result: 'bar'
       */
      console.log('Data: ', queryParams);
    });
  }

score 0 · Answer 4 · answered Aug 08 '17 at 10:56

0

I think your problem is your a and b are PRIVATE .. you have to make them PUBLIC top use in your html like:

import { ActivatedRoute, Router } from '@angular/router';
...
export class MyComponent implements OnInit,OnDestroy {
  public a: boolean = true; //<-- PUBLIC
  public b: boolean = true;

  constructor(route: ActivatedRoute)  {
  ...

  ngOnInit(): void {    
    this.route.queryParams.subscribe((queryParams:any) => {
      this.a = queryParams.a;
      this.b = queryParams.b;
     });

answered Aug 08 '17 at 10:56

federico scamuzzi

3,708
1
17
24

Thanks for the fast reply. Sadly this didn't work. Can't see what I am missing! – Remotec Aug 08 '17 at 11:02
Are your sure your queryParams.a; is a boolean ? ..can you maybe check ? (maybe it's 'true' ..so a string .. cause it came from a url ... can post also yur html with ngIf ? – federico scamuzzi Aug 08 '17 at 11:05
Adjusted the comparison to this: this.a= (queryParams.a === 'true'); still not working for some reason. – Remotec Aug 08 '17 at 11:23

score -2 · Answer 5 · answered Jan 06 '18 at 08:01

-2

You are losing 'this'. You should create function and bind it to this component and put it on subscribe callback. Also you can save your this like const self = this

answered Jan 06 '18 at 08:01

Dmitry Sobolevsky

1,171
6
12

Subscribing to query string parameters in Angular

5 Answers5