Angular 10 | Getting query params in URL null or undefined

user_5291566 0
Viewed 5976

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.

angular typescript
4 Answers

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.

user_52915660
user_99463820

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.

user_91839240 
  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);
    });
  }
user_99072930
Related