How to work with browser Forward\Back buttons in Angular SPA?

Question

Angular

Good time of the day!
There is Angular SPA with Angular Material. The entire application is one component, which is the type of tabs that the user navigates through when filling out information. How to make it so that when the browser button "back" is pressed, the user returns to the previous tab, when the browser button "forward" is pressed, the user goes to the already filled tab? I found this option , but it is based on routing and other components, but I have one component. Tell me where to dig about? In the comments on the link, the author writes about adding RouterLink to tabs, but I don’t quite understand how to do this, if you still need to specify the path and components in the routing.

Answer 1

In order for the browser "Back" to work, the browser needs to know that there was a transition along the route.
Those. pressing the tab should change the address on the command line and window.history has changed
In spa frameworks, a convenient abstraction for this is the router.
In angular, it will look something like this https://ng-run.com/edit/zmORlCu2qJ5hI5G7Ggbk
As for fullness, in this example, when transitioning, the tab components are destroyed and the data disappears.
Possible solutions are to force the router to keep components in memory, or to store data outside of the component.
The second option is simpler, for example, you can keep the reactive form in the service, just remember to destroy it when it is no longer needed. Or just store the data from the form in the component. If stored in local storage, the data will be saved even if the page is reloaded.
upd:
You can do everything in one component if you wish.
Make a route of type
A in the tabs itselfroute.params.subscribe(({ tab}) => { ... })

Answer 2

Browser forward and back buttons work with browser history, you can't do without a router and various components.
Either write your own router ( here is the browser apishka ), or use an angular router. You still have to break the application into components and render different components on different virtual pages. Otherwise, the buttons will not work.
No way.
Not at all. Honestly.
PS: In fact, your divine component can constantly monitor the current URL and render this or that tab. And on the tab switching buttons, you need to hang router links so that the URL changes on click. But no router.