How to create a method in Angular 6 that returns a queryParams from the url?

Question

This is my code. Is there any other better or best way to get the queryParams from the url?

  getSolutionId(){
    let solutionId: number;
    this.activatedRoute.queryParams.subscribe((queryParams) => {
      solutionId = queryParams.solutionId ? queryParams.solutionId: null;
    });
    return solutionId;
  }

you cannot do this in that way – Derviş Kayımbaşıoğlu Jan 19 '19 at 14:36 — Derviş Kayımbaşıoğlu, Jan 19 '19 at 14:36
But how can i do it? I am new to angular – C.E James Jan 19 '19 at 14:38 — C.E James, Jan 19 '19 at 14:38

Reactgular · Answer 1 · 2019-01-19T14:48:15.733

1

You use the router snapshot:

getSolutionId() {
   return this.activatedRoute.snapshot.queryParamMap.solutionId;
}

https://angular.io/api/router/ActivatedRouteSnapshot#queryParamMap

edited Jan 19 '19 at 14:48

answered Jan 19 '19 at 14:40

Reactgular

52,335
19
158
208

These returns an error. Cannot invoke an expression whose type lacks a call signature. Type 'ParamMap' has no compatible call signatures – C.E James Jan 19 '19 at 14:42
@C.EJames you're using the ActivatedRoute class? https://angular.io/api/router/ActivatedRoute – Reactgular Jan 19 '19 at 14:46
Yes I imported it – C.E James Jan 19 '19 at 14:47
@C.EJames sorry, I thought the queryParamMap was a function. Try it as a property. I updated the answer. – Reactgular Jan 19 '19 at 14:47

score 1 · Accepted Answer · answered Jan 19 '19 at 14:49

1

This is already answered by this comment that also references the Angular docs describing how to achieve this.

answered Jan 19 '19 at 14:49

CREM · Answer 3 · 2019-01-19T15:06:29.790

0

You can do as follows:

this.activatedRoute.queryParams.subscribe((params: Params) => {
      this.param = params['name'];

    }).unsubscribe();
  }

This is case sensitive

edited Jan 19 '19 at 15:06

answered Jan 19 '19 at 15:01

CREM

1,929
1
25
35

score -1 · Answer 4 · answered Jan 19 '19 at 14:42

-1

I am not sure in what terms you are asking to get query params.

Assuming you are trying to create some global method to get queryParams if any. you can call method on every router chang like this -

this.router.events.subscribe(route => {
    this.activatedRoute.queryParams.subscribe((queryParams) => {
      solutionId = queryParams.solutionId || null;
    });
});

answered Jan 19 '19 at 14:42

Pardeep Jain

84,110
37
165
215

This will leak memory badly, because you are constantly subscribing on every router event. – Reactgular Jan 19 '19 at 14:44
Yes, As I already mentioned in the answer, assuming to trigger queryParams on every router change globally. – Pardeep Jain Jan 19 '19 at 15:14
Update the code with `queryParams.pipe(first()).subscribe(...)`. – Reactgular Jan 19 '19 at 15:21
@cgTag Can you please update my answer? I haven't used `queryParams.pipe..` yet – Pardeep Jain Jan 19 '19 at 15:24

How to create a method in Angular 6 that returns a queryParams from the url?

4 Answers4