Angular 4 get queryString

Question

Making an angular onboarding page for a corporate website. People will navigate to the page via a link in a welcome email which will contain a user specific token. I need to get this token out of the url querystring and use it in all ajax calls for auth purposes. My problem is reading the querystring.

Angular version is 4.2.4

I have combed through pages of docs on the '@angular/common' Location, LocationStrategy, PathLocationStrategy and have copy pasted the import and adding them to the providers, I get error after error after error. I can't find a simple example anywhere of importing location and using it to get the querystring from the page url. If this were javascript it's a super simple couple lines of code. Why is this so difficult? Any help would be greatly appreciated!

What I tried:

app.module.ts

import { Location, LocationStrategy, PathLocationStrategy } from '@angular/common';

providers: [Location, {provide: LocationStrategy, useClass: PathLocationStrategy}],

page.services.ts

constructor(private location: Location) {
  console.log('location: ', location);
}

vince · Accepted Answer · 2018-01-29 19:16:52Z

7

You can do this using Angular's ActivatedRoute in the @angular/router package. Import it into your module as you do with the others, and inject it into your component as you already are with Location. Then you can access the queryParamMap like:

constructor(private route: ActivatedRoute) {
  console.log(route.snapshot.queryParamMap);
}

That will return a ParamMap interface, which was actually inspired by URLSearchParams interface :)

You can do things like route.queryParamMap.get('myQueryParam') and it works as you would expect.

edited Jan 29, 2018 at 19:16

answered Jan 29, 2018 at 19:13

vince

8,3463 gold badges39 silver badges45 bronze badges

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

5 Comments

vince Over a year ago

Let me know if this answers your question or if you need more information.

mycroft16 Over a year ago

That was great! Thanks. Hadn't even noticed that option.

JC5577 Over a year ago

For Angular 6, I get null back for my parameter, as there are no parameters.

John Churchill Over a year ago

This answer may be obsolete. At least since v10, queryParamMap has been an Observable.

Kariudo Over a year ago

In regard to the update from @JohnChurchill here, the instant value is available from ActivatedRouteSnapshot.

Collectives™ on Stack Overflow

Angular 4 get queryString

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related