DEV Community


Posted on

Angular Component Architecture

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

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

  1. Customer Service Request
    a. Service A
    b. Service B
    c. Service C

  2. Customer Payment Request
    a. Payment A
    b. Payment B
    c. 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) a. ServiceAComponent has further one Child Component for confirmation and Success Page. (ServiceAConfirmationComponent) b. ServiceAConfirmationComponent receives customer inputs from its parent (as @Input) and make service call + show/hide confirmation page on Success. It also sends (@Output) events for cancel.

Is it the right way to proceed ?

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

Top comments (0)