Get values from URL in Angular

Question

I have a component named reset-password-modal. I need to use this component when a user gets a link to reset a password. In the link, there are details regarding the user, username, mail, and a token. I need to display the username, email on UI, from the given link. The format of the link is like this: http://localhost:4200/#/resetPassword?email=someone@something.com&userName=YourName&token=iAMyourTOKEN.

I referred to many of the StackOverflow answers regarding how to use Angular's ActivatedRoute. But was not able to get the desired output.

Some of the ways which I tried.

import { ActivatedRoute } from '@angular/router'

constructor(private activateRoute: ActivatedRoute){}

ngOnInit(){
const email = String(this.activateRoute.snapshot.paramMap.get('email'))
    console.log(email);
}

Every time I am receiving a null value in return.

Another way which I tried was using queryParamMap but was not able to retrieve the needed information. I have also tried subscription to the params but didn't help. Any help is appreciated. Thank you.

Does this answer your question? [Get route query params](https://stackoverflow.com/questions/38488568/get-route-query-params) — Vimal Patel, Dec 30 '21 at 08:49

score 1 · Answer 1 · answered Dec 30 '21 at 08:51

It's not possible to get queryParams with paramMap method, read this:

paramMap: An Observable that contains a map of the required and optional parameters specific to the route. The map supports retrieving single and multiple values from the same parameter.

It's an observable and you need to subscribe to this if you want to get some required parameters from URL.

example:

this.route.paramMap.subscribe((obs) => {
      console.log(obs.get('id'));
    });

But you need to specife this in your Routes:

{ path: ':id', component: ContactIdComponent }

To get query params from your URL use this:

 this.route.queryParams.subscribe((query: Params) => {
      console.log(query);
    });

Dhairya · Answer 2 · 2022-02-21T05:29:40.500

0

You can try this out :

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

email: string;
constructor(private activateRoute: ActivatedRoute){}

ngOnInit(){
this.getParams();
}
getParams(){
this.activatedRoute.data.subscribe(params => {
  if(params){   
    this.email = params?.email;
 }
})
}

edited Feb 21 '22 at 05:29

answered Dec 30 '21 at 08:45

Dhairya

1
1

score 0 · Answer 3 · answered Dec 30 '21 at 08:51

please try it

import { ActivatedRoute } from '@angular/router'

email: string;

constructor(private activateRoute: ActivatedRoute){}

ngOnInit(){
this.route.queryParams
      .subscribe(params => {
        console.log(params); 
        this.email= params.email;
        console.log(this.email); 
      }
    );
}

guide: here

Get values from URL in Angular

3 Answers3