I'm currently developing Angular 6 project where I have lots of actions item inside single module/route.

What is the best component architecture design for following menu items:

1. Customer Service Request

   • Service A
   • Service B
   • Service C

2. Customer Payment Request

   • Payment A
   • Payment B
   • Payment C

All the services/payments require 3 screens :

1. Customer Inputs/Forms
2. Confirmation Page
3. Success Page.

Currently, I have following approach in mind :

1. One Request Module which fetches all lists (like accounts list) and pass it to child components as @Input.

2. Each Action Item (like Service A) has its own component (like ServiceAComponent)

3. ServiceAComponent has further on Child Component for confirmation(ServiceAConfirmationComponent).

4. ServiceAConfirmationComponent receives customer inputs from its parent and make service call + show/hide confirmation page on Success.

Is it the right way to proceed ?

any help/comments are welcome. thanks for reading !!

#angular #javscript #webdev