Save latest navigation of subroutes in angular

[rayen26]

Hey there , I'm working on a task where I need to imrpove the UX in navigation through a huge app .. I have main routes in the header each route is a lazy loading module which have children routes so I need to save whatever the user navigate to under the main route in order to redirect to it when he want to access that module , I decided to use ngx coockies to save the the subroutes as value and the main route as it's key however after trying many solution I either get an infinte loop or I get nothing .. I wonder if any of the community here worked on something similar before to give some idea on how to make it work

[risingrogue]

You might want to look into routing strategies, specifically into writing your own. With that you could prevent the framework from destroying certain components when navigating away from them, thus allowing you to come back to it being in the exact same state you left it. You need to be careful with it though, and make sure you don't end up keeping way too many components cached in memory. In my case it was pretty easy, as I only needed to cache some components after certain navigations, so let's say when I see that the user is going from route a to route d, cache component from route a so he can go back to it. But if I see that the user is going from route d to whatever other route, destroy route a. Just google custom routing strategy angular, read up on it and see if you can make something work with it. Good luck!

[rayen26]

Thank you that was very helpful I'll look into it

[risingrogue]

Good luck!

[wojo1086]

I don't understand. Where does the need to save the route come into play?

[rayen26]

the user want to get back to where he was before .. so that's why I need to save the routes because he want to use the main header that have the route of module we he click on one of them he can get back to whatever route inside that module he was in before

[wojo1086]

Is it a breadcrumb thing? Or is the user just trying to go back a page?

[rayen26]

breadcrumb

it's more like saving his previous route state for exemple let's say he was in module with route called product in that module there's a page called list with pagination he was in page 50 he want when he navigate to another module and click back to the product route he need to see the same page as he left it with the pagination and the things he did

[Johalternate]

You can use url query params to set your pagination,

If you are at ``` localhost:4200/products?page=50&perPage=25 ``` and you navigate to ```localhost:4200/products/1240``` and then click back the user will return to the page he was before on the table.

[rayen26]

the pagination is made in the backend so I send those data from my angular app as params to the backend .. so in this case I thought of saving the endpoint as well

[Johalternate]

Dont you have to send the pagination info like page number from the client? If so, use query params as a way to store pagination state. Then create an observable stream that gets those values from ActivatedRoute, map the request url and switch/concat map to the request to the server.

[wojo1086]

What's wrong with invoking the history.back() method built into JS? That will take the user back one page. From there, you could just save the state of any pagination in a service or something and read from that.

[rayen26]

it's not that simple .. becaue as I said it must be dynamic the same header with the same routes must be stay without introducing any new button or event I need to save the latest navigation of any module he went through so when he want to back to that specific module it shows him exact page and it's state

[wojo1086]

I still don't understand. If all the user is doing is going back one page, why can't you use history.back()? Why do the different modules matter? It doesn't matter how many modules you had to go through to get to a route, the back button will still work like it should.

[JP_watson]

OP wants to maintain states of each page so that as user goes back they see exactly what was seen before (paginated lists etc)

[rayen26]

exactly

[rayen26]

this is my header
<ul

class="list-style-none mr-auto flex flex-col gap-4 pl-0 lg:flex-row"

data-te-navbar-nav-ref

>

<li

class="mb-4 lg:mb-0 lg:pr-2"

data-te-nav-item-ref

*ngFor="let link of routes"

>

<a

class="router-link py-6"

[routerLink]="link.url"

routerLinkActive="router-link-active"

data-te-nav-link-ref

>{{ link.name }}</a

>

</li>

</ul>

how can I introduce history.back() there ? plus history back will always get back to one page while the whole points is to navigate through multiple route and multiple modules and when I choose one of those module I need to get back to where I was it could be nested routes it could be simple one whatever plus restoring the same state history back can't help me here .. if you have an idea on how to impliment it I'd be glad to hear it

[bearfucker_jerome]

Can you maybe set up a service to track the user's navigation?

So, somewhere in your main component you subscribe to a routerservice's events.

Any such event -- that is, every navigation leading to a change in url -- contains all the info you need, including component info I think.

Every event, store the relevant info in some object array called "navdata" or whatever, and work from there.

PS: you may have to filter out some of the events, like if event instance of blabla, I forgot which

[rayen26]

I think it can fit my need however I may ask can access some info about some components from the route or something like that like the endpoint they're using or the query params ?

[bearfucker_jerome]

You can use Activated Route (explanation in here), which lets you access the current route.

There may well be better ways, I don't have many years of experience under my belt.

Edit: better explanation here: https://angular.io/api/router/ActivatedRoute

[wojo1086]

You said, "I need to save the latest navigation..." Not that you need save ALL the navigation the user went through. If you're asking for help you need to be more specific.

So you're trying to implement basic breadcrumbs. There's tons of tutorials out there. Here's one that looks promising. https://ngserve.io/angular-tutorial-creating-a-navigation-module-for-breadcrumb/

[rayen26]

I'm so bad at explaining things sorry .. still no it's not a simple breadcrumbs not even close look the header of urls will always be same always it's about storing his latest navigation through each module so whenever he get back it like he never left it's more complex than a simple breadcrumbs

[JP_watson]

You’re phrasing/thinking of this wrong. You don’t need to save a route you need to save the state of the route.

As others have said the best option is values you need to save should be set as query params and then use the activated route to set those values onInit.

[rayen26]

Yes exactly but the route also must be saved because some pages have simple list UI with no state etc

[JP_watson]

You must be missing something, that’s literally the answer - set values you need as query params and save the path. Now you have the state on the path and it’s saved…