Using QueryParams in Angular route

Question

So I have a Back-End that's in charge of sending confirmation emails to users when they create an account, the email has a format like: http://localhost:8080/confirm?token=

I then want to have route with the same format on my Front-End side (which is made with Angular), so my question is how this url should be represented in my application routes. I'm currently trying to use { path: 'confirm', paramMap: { token : token } } but not sure this is the best way to handle this, this is my first time doing something like this so I'd appreciate any input :)

I later need to use that token value in a service so I need a way to obtain its value in the "confirm" component or something.

You don't include the parameters in the routing. If the component needs to access the query params, it can subscribe to them via the ActivatedRoute. I'd recommend reading angular.io/guide/router — jonrsharpe
– jonrsharpe, Commented Nov 3, 2017 at 17:44
There are literally some in the documentation. That's what it's for. — jonrsharpe
– jonrsharpe, Commented Nov 3, 2017 at 18:10

DeborahK · Accepted Answer · 2017-11-06 20:41:16Z

2

I have an example of using query parameters here: https://github.com/DeborahK/MovieHunter-routing

As Jon stated, you don't specify query parameters in the route configuration:

UPDATE: Updated the screen shot to correct a typo and for latest syntax.

edited Nov 6, 2017 at 20:41

answered Nov 3, 2017 at 17:58

DeborahK

60.9k12 gold badges115 silver badges136 bronze badges

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

Comments

Pradeep · Accepted Answer · 2017-11-03 18:03:19Z

1

Inject the ActivatedRoute in your Component constructor and then access params using ActivatedRoute instance.

    export class TestComponent Implements OnInit
    {
     token:string;
    constructor(private route:ActivatedRoute)
    {
    }
   ngOnInit()
   {
    route.params.subscribe((params:Params)=>{
      this.token=params['token'];
      //Or call your service to load the resource you need.
   })

   }
}

This is just sample example.

answered Nov 3, 2017 at 18:03

Pradeep

563 bronze badges

Collectives™ on Stack Overflow

Using QueryParams in Angular route

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related