CODEWITHSUNDEEP
angular
David ROSEY
David ROSEY

Reputation: 1805

Why queryParams are empty

I'm currently trying to understand how to collect the queryParameters in an Angular component. As I want to only collect them once during the init, I firstly tried the snapshot pattern:

ngOnInit() {
    console.log(this.route.snapshot.queryParamMap);
    console.log('param test = ' + this.route.snapshot.queryParamMap.get('test'));
}

See the demo on Stackblitz: https://stackblitz.com/edit/angular-2tuafn Testable through the folowwing URL: https://angular-2tuafn.stackblitz.io?test=123

But as a result, the queryParam "test" is null and the queryParamMap is empty, see console output:

ParamsAsMap {params: {…}}
    keys: Array(0)
    params: {}
    __proto__: Object
param test = null

=> Why does the queryParamMap is empty ???

Then, I tried with the Observable pattern:

ngOnInit() {
    this.route.queryParamMap.subscribe(
      (params: ParamMap) => {
        console.log(params);
        console.log('param test = ' + params.get('test'));
      }
    );
}

See the demo on Stackblitz: https://stackblitz.com/edit/angular-hfqx8a Testable through the folowwing URL: https://angular-hfqx8a.stackblitz.io?test=123

But as a result, the queryParam "test" is firstly null and then it take the correct value (123), see console output:

ParamsAsMap {params: {…}}
    keys: Array(0)
    params: {}
    __proto__: Object
param test = null
Angular is running in the development mode. Call enableProdMode() to enable the production mode.
ParamsAsMap {params: {…}}
    keys: Array(1)
    params: {test: "123"}
    __proto__: Object
param test = 123

=> Why there is a first console output empty and then the console output with the correct queryParam value ?

After several researsh I don't reach to understand what's going on :-(

=> Thanks in advance for your help

Regards

EDIT:

Thanks to Dimanoid and Pravin Pokharkar, I understood my issue. => Because component is loaded before the actual routing applied!!!

Thus I have update my code an now I properly collect the queryparams:

this.router.events.subscribe(
  (event: RouterEvent) => {
    if (event instanceof NavigationEnd) {
        this.test = parseInt(
              this.activatedRoute.snapshot.queryParamMap.get('test')
        );
    }
  }
);

Upvotes: 24

Views: 19495

Answers (5)

MammothDevelopper
MammothDevelopper

Reputation: 451

I'm using javascript, it's working very nice :

var action = new URLSearchParams(window.location.search).get('action');

Upvotes: 5

Malcolm Swaine
Malcolm Swaine

Reputation: 2268

One liner alert!

Assuming the your URL is something like

http://localhost:8100/#/life-fabric?contextUserId=7d854070-3836-4b46-931c-db910e10d4d7

To get the value for contextUserId

new URLSearchParams((new URL(window.location.href)).toString().split('?')[1]).get("contextUserId")

Or create something more reusable like...

getQueryStringParamValue(key) {
    try {
      return new URLSearchParams((new URL(window.location.href)).toString().split('?')[1]).get(key);
    }
    catch {
      return null;
    }
  }

Upvotes: 0

Baudouin Meli
Baudouin Meli

Reputation: 36

I'm also using javascript(Typescript) and it work fine base on this github issue on Angular repository

const queryParams = extractQueryParameters(window.location.href, ['mode', 'key']);

function extractQueryParameters(url: string, keysArray: string[]) {
const url_ = new URL(url);

const urlParams = new URLSearchParams(url_.search);
const result: any = {};
let found = false;

keysArray.forEach((key) => {
 const value = urlParams.get(key);
 if (value !== null) {
   found = true;
   result[key] = value;
 }
});

return found ? result : null;
}

Upvotes: 0

Pravin Pokharkar
Pravin Pokharkar

Reputation: 110

ngOnInit gets Initialize the directive/component after Angular first displays the data-bound properties and sets the directive/component's input properties.
all routing activities you do are take place after your initialization only. hence at initial stage you dont have anything inside router (null) but once you route to something, you get the value.
for more info please go through lifecycle hooks of angular here

Upvotes: -1

Dimanoid
Dimanoid

Reputation: 7289

Because component is loaded before the actual routing applied. Add { enableTracing: true } to the RouterModule to see what is happening behind the scene.

RouterModule.forRoot([], { enableTracing: true })

https://stackblitz.com/edit/angular-boghpy?file=src/app/app.module.ts

Upvotes: 10

Related Questions