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.
– Aleksey L., Commented Aug 8, 2017 at 11:50

Vijay · Accepted Answer · 2018-01-06 07:45:29Z

11

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?

answered Jan 6, 2018 at 7:45

Vijay

4,4851 gold badge16 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Alexandre Lindolfo Vianna · Accepted Answer · 2019-05-06 22:42:39Z

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 6, 2019 at 22:42

Alexandre Lindolfo Vianna

314 bronze badges

Comments

Shawn Pivonka · Accepted Answer · 2018-09-14 19:18:44Z

2

  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);
    });
  }

answered Sep 14, 2018 at 19:18

Shawn Pivonka

3534 silver badges14 bronze badges

Comments

federico scamuzzi · Accepted Answer · 2017-08-08 10:56:49Z

1

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 8, 2017 at 10:56

federico scamuzzi

3,7781 gold badge19 silver badges26 bronze badges

3 Comments

Remotec Over a year ago

Thanks for the fast reply. Sadly this didn't work. Can't see what I am missing!

federico scamuzzi Over a year ago

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 ?

Remotec Over a year ago

Adjusted the comparison to this: this.a= (queryParams.a === 'true'); still not working for some reason.

Dmitry Sobolevsky · Accepted Answer · 2018-01-06 08:01:27Z

-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 6, 2018 at 8:01

Dmitry Sobolevsky

1,1916 silver badges12 bronze badges

Collectives™ on Stack Overflow

Subscribing to query string parameters in Angular

5 Answers 5

Comments

Comments

Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related