Stepped process in SPA application (Angular 13)

adasko 0
Viewed 42

Hi i'm making an Angular (13) CRM application.

I have to implement stepped process where for each step user have to fill some form fields, than send request to backend which response is then cached and used by other steps. By looking at known to me websites, usually it's implemented in a way that each step is it's own page (has it's own url address). Thus when going forward or backwards, already filled data has to be cached and loaded to each component (step) on ngOnInit hook. On the other hand i was thinking on implementation where i could only hide each step so that all data stays in forms and doesn't need to by filled with cached data every time user navigates through stepper. My question actually is what is a good practice in this particular case. What pros has multi paged solution over the other. Any help would be appriciated because i have a feeling that i'm missing something here.

This is my first question, so please don't be harsh ;)

Thanks for all the answers.

frontend angular
1 Answers

My take would be:

  • Every step should be a page (= a component) served through the routing system.

  • Use a service to store the data you need through every step inside of it. Your service should be a singleton (providedIn: 'root') if you want every pages to share the same data and not have a specific instance of the service created by every page on their instanciation.

  • Get this service through the DI system from Angular:

      constructor(private stepDataService: StepDataService) {

  • DI does all the job for you: you have access to this instance in every pages (components) using this constructor, from the OnInit status of your page component.

  • This instance will have all data and can have public methods for modifying this very data inside of it.

Tip: if you want to go further and be sure to have the exact state of the data anywhere in your app structure, look for state management through a service. Your data can be a BehaviourSubject to which you can subscribe.

thomasgainant0
Related