CODEWITHSUNDEEP
angular
Konstantin
Konstantin

Reputation: 139

How to save table filters/page after changing route?

I've got a table of reports and custom filters, pagination there. Then I change route to /:reportId. After I navigate back to the table, filters/paging are reset. How to save that on route changing only when I go back from report route(if from others, reset filters). How to hook that when I came exactly from report route?

P.S. I subscribe to service http request in ngOnInit() in the tableComponent

Upvotes: 2

Views: 5355

Answers (4)

Ivan Blanar
Ivan Blanar

Reputation: 51

use parent container component for table and table item. 

{
    path: 'table',
    component: ContainerComponent,
    children: [
      {
        path: '',
        component: TableComponent,
      },
      {
        path: ':id',
        component: TableItemComponent,
      }
    ]
  },

Save filters in TableComponent's ngOnDestroy(). Reset filters in ContainerComponent's ngOnDestroy(). Keep data in additional service.

Upvotes: 0

Friso Hoekstra
Friso Hoekstra

Reputation: 885

You can store your filter and sort settings in variable in a service

let navigationExtras: NavigationExtras = {
    queryParams: { 
        'page': currentPage,
        'sortBy': 'date',
        'filter': true
    }
};

Then use that variable with navigation 

// Navigate to the table component with extras
this.router.navigate(['/table'], navigationExtras);

And use them to set your table

constructor(private route: ActivatedRoute) {
    this.route.queryParams.subscribe(params => {
        // update the table
    });
}

The pro is that the same URL will give you the same table filter/sort state, which might be useful in some cases, the con is that you will have to deal with long URLs as you add parameters.

If you are looking for a more elaborate solution, definitely check out NgRx (as mentioned by @hohnzy)

Upvotes: 2

hohnzy
hohnzy

Reputation: 73

I would use some kind of state management (NgRx, NGXS), or you can store applied filters, page in a service.

Upvotes: 3

mojtaba ramezani
mojtaba ramezani

Reputation: 1559

You must fit any page store the information in the localStorage, for example:

filterData: {page1: {Paging: '', sort: [], filetype: ''}, page2: {Paging: '', sort: [], filetype: ''}}

Upvotes: 0

Related Questions