Passing filter options to route in Angular

Question

In my Angular 4 application there are several form fields that allows user to enter and select some filter options. There are form fields and not anchor links. I need to pass these options (all optional) to route and read it back to show result and populate form fields again.

This is very similar to filters in any shopping application. Please view the wireframe to understand it better. I don't want to use any plugin.

Application Wireframe

depending on how you bind your model to your form, using ngModelChange then making an api call is all you really need to do — Ric
– Ric, Commented Nov 15, 2019 at 9:27

Stefan · Accepted Answer · 2019-11-15 09:20:07Z

0

What you can do is set a filter options in the queryParams https://alligator.io/angular/query-parameters/ and then subscribe to see if the queryParams change and filter your data Angular is it possible to detect if query Paramter has changed?.

You can also do it on the route guard if you change the policy of running your guards https://angular.io/api/router/RunGuardsAndResolvers. In your case it will be paramsOrQueryParamsChange.

answered Nov 15, 2019 at 9:20

Stefan

1,5112 gold badges21 silver badges36 bronze badges

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

2 Comments

Aryan Over a year ago

Thanks @Stefan. Is it possible to use / instead & and ? for query params?

Stefan Over a year ago

To be honest, I am not sure, but probably not.

Collectives™ on Stack Overflow

Passing filter options to route in Angular

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related