Why queryParams are empty

Question

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

Do you really passing the query param through the url? – Amaldev ps Mar 22 '19 at 08:28 — Amaldev ps, Mar 22 '19 at 08:28

score 7 · Accepted Answer · answered Mar 22 '19 at 08:26

7

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

answered Mar 22 '19 at 08:26

Dimanoid

6,999
4
40
55

2

Additionally, the answer should also indicate that queryParamMap is a BehaviourSubject and fires twice. https://stackoverflow.com/questions/39861547/angular2-query-params-subscription-fires-twice – Rafiek Nov 19 '19 at 12:04

score 5 · Answer 2 · answered May 09 '21 at 10:54

5

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

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

answered May 09 '21 at 10:54

MammothDevelopper

424
5
8

score 0 · Answer 3 · answered Mar 22 '19 at 10:54

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

Why queryParams are empty

3 Answers3

Linked