Angular2 how to do a url query string

Question

I have a search feature on my application which searches a list of products, which is all going okay however I want to redirect the user to another page say www.site.com/search?keyword=perfume

I can only make it www.site.com/search/perfume and www.site.com/search;keyword=perfume

Router navigate this.router.navigate(['search', {keyword: searchVal}]); doing this results as www.site.com/search;keyword=perfume

Routes

const appRoutes: Routes = [
  { path: 'search', component: SearchComponent} 
];

Search function:

findproduct(searchTerm: HTMLInputElement): void {
var searchVal = searchTerm.value;
this.productService.searchproduct(searchVal)
  .subscribe(data => {
    this.router.navigate(['search', {keyword: searchVal}]);
    console.log(data)
  });

}

How can I make my url to be www.site.com/search?keyword=perfume

developer033 · Accepted Answer · 2016-11-20 17:08:51Z

2

You should use queryParams:

this.router.navigate(['/search'], { queryParams: { keyword: searchVal } });

answered Nov 20, 2016 at 17:08

developer033

25k8 gold badges85 silver badges113 bronze badges

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

1 Comment

MrNew Over a year ago

Oh thanks, I thought I had to put the param in []. This worked :)

umair yasin · Accepted Answer · 2016-11-20 17:08:48Z

0

You should update your appRoutes as follow:

const appRoutes: Routes = [
  { path: 'search/:keyword', component: SearchComponent} 
];

answered Nov 20, 2016 at 17:08

umair yasin

1591 gold badge5 silver badges16 bronze badges

1 Comment

MrNew Over a year ago

This will output a parameter /search/product not a query string /search?keyword=product

Collectives™ on Stack Overflow

Angular2 how to do a url query string

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related