How to define queryParams Angular 5 router

Question

I have an issue with query params. Each router has a bit different queryParams.

$stateProvider allowed to define queryParams inside $state

.state('contacts.list', { templateUrl: 'contacts.list.html', url: '/test?test1&test2' data: { customData1: 44, customData2: "red" } })

This code allows to get from queryParams only test1 and test2 fields.

About new Angular router, if I need watch queryParams, I should subscribe

this.activatedRoute.queryParams.subscribe(params => { });

This code has an issues, if I type in url some third party test3=lol, I will get this param in argument params and I don't want to filter it in all places

How can I set '/test?test1&test2' in Angular 5 router

Anuradha Gunasekara · Accepted Answer · 2018-05-08 10:01:49Z

1

goProducts() { this.router.navigate(['/products'], { queryParams: { order: 'popular', 'price-range': 'not-cheap' } }); }

And the url will be like this.

http://localhost:4200/products?order=popular&price-range=not-cheap

In your component constructor

this.activatedRoute.queryParams.subscribe(params => { });

Hope this helps. Used this to answer your question.

answered May 8, 2018 at 10:01

Anuradha Gunasekara

7,0132 gold badges29 silver badges38 bronze badges

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

2 Comments

Andrew Medvedsky Over a year ago

If I use this approach I will have case: User enters some third party param to url "test=lol" and press enter My subscription will handle this change and I will get this unexpected param "test" in my handler

Anuradha Gunasekara Over a year ago

Then you have to send data to that componet without using query params.. If you need to hide data from the user you have to do this in another way. Use a service to do this.

Collectives™ on Stack Overflow

How to define queryParams Angular 5 router

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related