Angular2 how to balance components and services

I am trying to design a profile(resume) page with many parts using angular2.
These parts are photo, contact, experiences etc.

Each part editable when double clicking a text. When any part is edit mode, two button(save&cancel) will be visible.

A simple demo plunk is

So, i couldn’t decide which below approach is suitable for my case.

  1. Single component and single service.
  2. Single service(singletion) to keep application state and multiple
    component. Sharing state between components via service.
  3. Single service and multiple component(parent and childs), retriving
    data only in the service, getting by parent component and passing to child via @input, for interaction using @output.
    Application states are distributed.

  4. Multiple components and multiple services with interaction between
    components. Each component gets own data using own service, and
    keeps own states.

Do you have any suggest?

Leave a Reply

1 Comment threads
0 Thread replies
Most reacted comment
Hottest comment thread
1 Comment authors
Jason Recent comment authors
newest oldest most voted
Notify of

to me: 1- hard to maintain – easy to start up with – fragile code – I would chose it if only the requirements are very clear and won’t expand/extend. -- app ---- app.component.ts (your resume component) ---- app.module.ts ---- main.ts ---- app.routing.ts 2- this will end up being 3 as you need a wrapper around all your components to make them visible to user and that wrapper would be your parent component this is the best approach, easy to maintain and the service will be injectable to all components and they can communicate via that, if you want to… Read more »