Angular 10 | Getting query params in URL null or undefined

Question

I have this route with the query param lang:

http://localhost:4200/?lang=de

None of the following examples work, it is always null or undefined

import { ActivatedRoute } from '@angular/router';

constructor(private route: ActivatedRoute) { 
  console.log(this.route.snapshot.params.lang);
  console.log(this.route.snapshot.queryParamMap.get('lang'));
}

ngOnInit(): void {
  this.route.queryParams.subscribe(params => {
    let lang = params['lang'];  
    console.log(lang);
  });
  console.log(this.route.snapshot.queryParamMap.get('lang'));
  console.log(this.route.snapshot.params.lang);
}

What am I doing wrong? I have now read several guides, even some for angular 10. Each of them show the above examples, but I still cannot get the value of lang.

Did you try checking the Value of de , before passing it as a param — Faizal Hussain
– Faizal Hussain, Commented Aug 18, 2020 at 12:34

Roman · Accepted Answer · 2020-08-18 12:49:04Z

8

Here is my working solution:

var url = new URL(window.location.href);
var lang = url.searchParams.get("lang");

This works in ngInit and in constructor.

answered Aug 18, 2020 at 12:49

Roman

3,9617 gold badges56 silver badges116 bronze badges

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

2 Comments

user2549980 Over a year ago

This also works in app.component without router-outlet!

sgryt Over a year ago

This solution isn't correct for SSR.

Riyad · Accepted Answer · 2020-08-18 12:46:37Z

3

For the Observable mechanism, you can use paramMap observable like this with an undefined check.

this.route.paramMap.subscribe(params => {
if(params.get('lang')){
    let lang = params.get('lang');  
    console.log(lang);
    }
  });

And other solutions @Leo has already proposed.

Thanks.

edited Aug 18, 2020 at 12:46

answered Aug 18, 2020 at 12:40

Riyad

4175 silver badges10 bronze badges

1 Comment

DeFeNdog Over a year ago

Do you know if this method can be used without using the current route? For example: this.router.parseUrl('https://myapiendpoint.com?page=2');

Leo · Accepted Answer · 2020-08-18 12:29:40Z

1

What about

this.route.snapshot.paramMap.get('lang');

From the official documentation ?

answered Aug 18, 2020 at 12:29

Leo

7516 silver badges15 bronze badges

3 Comments

Leo Over a year ago

Did you try it in constructor or ngOnInit ?

Roman Over a year ago

I have tried in in constructor, but I found an other solution, see my answer

Leo Over a year ago

Ok, glad you found your answer. I would still try my answer in ngOnInit though, as it more the "angular way".

Buczkowski · Accepted Answer · 2020-08-18 12:49:54Z

0

  constructor(private route: ActivatedRoute,
              private router: Router) {
    this.route.queryParamMap.pipe(
      filter(queryParamMap => queryParamMap.has('lang'))
    ).subscribe(queryParamMap => {
      const lang = queryParamMap.get('lang');
      console.log(lang);
    });

    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd),
      switchMapTo(this.route.queryParamMap)
    ).subscribe(queryParamMap => {
      const lang = queryParamMap.get('lang');
      console.log(lang);
    });
  }

answered Aug 18, 2020 at 12:49

Buczkowski

2,41614 silver badges19 bronze badges

Collectives™ on Stack Overflow

Angular 10 | Getting query params in URL null or undefined

4 Answers 4

2 Comments

1 Comment

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

1 Comment

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related