Manage your Filters Like a Pro in Angular With combineLatest

  • We need to create an Observable that will emit the active filter each time the user clicks on a filter.
  • We need to change the active state on every filter; then we need to emit the new active filter.
  • We need to find the active filter from the filters Input; then we need to create our BehaviorSubject and emit the current filter id with the group.
  • We are going to use the query string style to let our server know what the filters are.
  • Each time the user clicks on a filter we need to get the latest value from each and create the query string.

Imagine that you have a list of resources, for example, like in the hotjs website and you want to give your users the ability to filter the list by type or by level. We are going to use the query…

@JavaScriptKicks: Manage your Filters Like a Pro in Angular With combineLatest by @NetanelBasal #javascript #angularjs

In this article, I want to share with you an efficient and clean way to manage your app filters.

If you’re wondering what I mean when I say filters, I will answer with a gif:

Imagine that you have a list of resources, for example, like in the hotjs website and you want to give your users the ability to filter the list by type or by level.

We are going to use the query string style to let our server know what the filters are. For instance:

Our goal:

Each time the user clicks on a filter we need to get the latest value from each and create the query string.

Let me know when any Observable emits but also give me the latest value from the others. ( Array )

component. Our final result will be:

is referring to the query string key, for example:

, the group name and array of filters.

operator expect to receive a list of Observables. We need to create an Observable that will emit the active filter each time the user clicks on a filter.

and emit the current filter id with the group. (don’t forget to unsubscribe )

event.

method that will run each time the user click on a filter.

state on every filter; then we need to emit the new active filter.

The component is ready for use. Now the fun part.

decorator to grab the filters components from the current view.

Every time one of the filters will emit value, we are going to receive the latest value ( the active filter ) from each ( as array ), transform them to a query string and send to our server.

You can extract this code to a self-contained module and use it.

Follow me on Medium or Twitter to read more about Vue, Angular and JS!

Manage your Filters Like a Pro in Angular With combineLatest

You might also like More from author

Comments are closed, but trackbacks and pingbacks are open.