Managing table filters between components

TLDR; The logic behind this is to pass the table filters as query params when exiting the table route and when trying to re-activate the table route add the {queryParamsHandling="preserve”} directive after the routerLink so that the query params would be preserved.

Introduction
Tables are very important features when it comes to building applications, depending on the type of application, tables can range from small rows and columns of data, to really huge dataset representations in tabular form. Regardless of this, being able to filter through the data on a table is a very important part of the overall user experience.

After implementing filters, another issue that arises is how to identify previously applied filters after a component containing a table has been destroyed. Here is a use case: We have a component showing a list of customers in a table with filters and each row ends with an open button. Let’s assume a user of the application decides to filter the customers by name and he’s left with a particular customer and clicks open. In this scenario, the open button takes the user to a new component that gives more insight into the customer's history than can be represented on a table. In the use case above, all filters applied are lost once the user navigates away from the customer's table component and would be set to default when the component is reinitialized which might be a very bad user experience.

Possible Solutions

• Using a state management tool to manage the filter state between the components e.g NgRx, Akita, etc.
• Using a BehaviourSubject to store the filter state.
• Pass the filter state as query params

Implementation of the solution
We would be applying the third solution because it is very easy to implement and takes less effort.
Steps:

1. When routing to another page from our table component we want to pass our filter values as query params. This can be done from the template by using this syntax:
   
   or from the component by:
   

2. When trying to route back to the table component, the {queryParamsHandling="preserve”} directive must be set along with the routerLink directive so that the query params on the route can be preserved.
   

3. In the table component when initializing the filters, they should be set to the value of the query params or an empty string if there is no query param present so that previous filters can be populated. This can be done using this syntax:
   

With this setup, you have successfully been able to manage your filter state without any extra setup or state management solution.

Thanks for reading.

Reviewed by
Bonnie Brennan #ngMom
Sander Elias