CODEWITHSUNDEEP
angulartypescriptangular-router
Remotec
Remotec

Reputation: 10758

Subscribing to query string parameters in Angular

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?

Upvotes: 10

Views: 26036

Answers (5)

Alexandre Lindolfo Vianna
Alexandre Lindolfo Vianna

Reputation: 31

It works for me...

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

Upvotes: 3

Shawn Pivonka
Shawn Pivonka

Reputation: 353

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

Upvotes: 2

Dmitry Sobolevsky
Dmitry Sobolevsky

Reputation: 1191

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

Upvotes: -2

Vijay
Vijay

Reputation: 4455

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?

Upvotes: 11

federico scamuzzi
federico scamuzzi

Reputation: 3778

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

Upvotes: 1

Related Questions