How to retrieve queryParams passed to an Angular route via NavigateByUrl

Question

How to retrieve params passed as NavigationExtras using navigateByUrl as described below from the target component in Angular ?

let extras: NavigationExtras = {
                queryParams : {
                    errorTitle: 'Erreur Technique',
                    errorBody: 'URL erronée'
                }
            };
this.router.navigateByUrl(RoutesUrl.ERROR, extras);

There seems to be an existing bug I guess, details [here],(https://github.com/angular/angular/issues/18798). Please go for `navigate` instead of `navigateByUrl` else you can try the alternate solutions in the github ticket if using navigate by url is absolutely necessary! — Naren Murali, Feb 01 '22 at 13:22
Thank you so much ! The solution suggested by Donsoulfresh worked fine for me ;) — Ghassen, Feb 01 '22 at 14:12
The only inconvenience now is that all the data I pass as queryParams shows up in the address bar ! is there a way to hide it ? — Ghassen, Feb 01 '22 at 14:28
you could use state instead, but when you refresh you will not have state persisting ` this.router.navigate(['action-selection'], { state: { example: 'bar' } });`, [reference](https://stackoverflow.com/questions/44864303/send-data-through-routing-paths-in-angular) answer with 349 points — Naren Murali, Feb 01 '22 at 14:33
I'm getting this `ERROR TypeError: Cannot read property 'extras' of null` because of `this.router.getCurrentNavigation()` is returning `null` — Ghassen, Feb 01 '22 at 14:39
found the solution ! `this.router.getCurrentNavigation()` must be called inside the constructor — Ghassen, Feb 01 '22 at 14:42

score 1 · Answer 1 · answered Feb 01 '22 at 13:11

You can use the Activated Route by injecting it into your component.

 constructor( private activatedRoute: ActivatedRoute  ) {}

 ngOnInit(): void {
     this.activatedRoute.queryParams.subscribe((params: Params) => {
        this.params = params;
    });
 }

Or you can get the queryParams from its activated routes' snapshot

 ngOnInit(): void {
    const params = this.activatedRoute.snapshot.queryParams;
    console.log(params.errorTitle);
    console.log(params.errorBody);
}

Didn't work :( It returns `undefined` – Ghassen Feb 01 '22 at 14:13 — Ghassen, Feb 01 '22 at 14:13

Ghassen · Accepted Answer · 2022-02-01T15:15:22.893

The solution that I found is suggested by soulfresh in this GitHub issue : https://github.com/angular/angular/issues/18798

I call my route this way :

this.router.navigateByUrl(this.router.createUrlTree([RoutesUrl.ERROR], {
                queryParams: {
                    errorTitle: 'Erreur Technique',
                    errorBody: 'URL erronée'
                }
}));

then I retrieve query params this way :

this.activatedRoute.queryParamMap.subscribe(params => console.log(JSON.stringify(params)))

or

this.activatedRoute.queryParams.subscribe(params => console.log(JSON.stringify(params)))

UPDATE

If you don't want that your queryParams appears in the address bar (URL) you can use :

Sending data :

constructor(private router: Router) {} 

ngOnInit(){
    this.router.navigate([RoutesUrl.ERROR], {
                    state: {
                        errorTitle: 'Erreur Technique',
                        errorBody: 'URL erronée'
                    }
    });
}

Retrieving data :

constructor(private router: Router) {
      this.errorTitle = this.router.getCurrentNavigation().extras.state.errorTitle;
      this.errorBody = this.router.getCurrentNavigation().extras.state.errorBody;
  }

How to retrieve queryParams passed to an Angular route via NavigateByUrl

2 Answers2

UPDATE