How to define queryParams Angular 5 router

0
votes

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

1
angularangular-router

1 Answers

1
votes
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.