Create a service to save and retrieve page number and filter data

[forest crater]

1.346 / 5.000
Hello, I come from the backend world and I am creating a component using Angular 18 that shows a list of clients and one of the characteristics of this component is that it must save in the localstorage the state of the applied filters and the number of the page in which it is located so that when the user goes to another page and returns to the list of clients it shows the information according to the last state saved in the localstorage. My problem is that when I select a page in the pagination and I go to another page when I return to the list the pagination returns to 1 and I can't find exactly the reason. I have followed up and apparently when initializing the component it loads the data from the localstorage but then they return to 1 but I can't find the function that makes it return to 1. I have created a service to bring the data and save it in the localstorage I would like to find the reason for this behavior. I've been thinking about putting the loading logic in the constructor but I think it's better to keep it in the NgOnInit end, maybe my approach to storing the page state is not the most optimal and I'd like to know if there could be another more efficient approach.

this is my component

and this is my service

I appreciate any help you can give me, thank you very much

[native rain]

You shouldn't use local storage in the first place to do that. Use the url. That's what it is for.

[forest crater]

hello 🙂 Do you mean the URL used to send the request to the backend or the browser URL? The idea is that the state has to be stored somewhere?

[native rain]

The browser url.

[forest crater]

But if I leave the client list in the browser and return, the URL does not return to 0, for example /clients/?page=3&test-value=test-result. If I go to another page and return to the list, the URL returns to /clients/.

[native rain]

And the only place where the page is changed is onPageChange. So that's probably what resets the page to 1. Probably because you display the pagination component before the data is available (and thus without knowing the correct number of pages)

[forest crater]

Maybe I should put the logic to set the values ​​in the constructor, not in NgOnInit.

[native rain]

Sure, but that wouldn't fix your issue.

[forest crater]

Could you suggest something so that the URL can be used to maintain the search status?

[native rain]

Use Router.navigate, and pass the page and the filters as query params. But you'll probably have the same problem.
Have you checked if onPageChange is being called?

[forest crater]

Yes, it runs it, I have followed it up with the debugger

[native rain]

The page changes to 1 because, most probably, you're telling the pagination component to display page x and also tell it that you have only one page. Probably because you're displaying it before you have loaded the data, and thus before you know the actual page count. That's what I guess, but I don't have the code, so you need to check by yourself.

[pallid halo]

Could you create a stackblitz to replicate the challenge? It would be easier to follow along and see what's happening.

[forest crater]

My problem was that the pagination component that comes with ngBootstrap starts at 1 by default every time it loads. So to solve it I had to create a custom component to handle pagination. With that I have the desired behavior.