22

I have 3 type of components to handle forms. They are:

  • EntityFormEditComponent //To Edit
  • EntityFormViewComponent // To Visualize
  • EntityFormCreateComponent // To Create

They have a common parent that is the EntityFormComponent that share the basic logic between themself.

When i create a new entity, this entity extends from the base forms components, like this:

  • UserFormEditComponent extends from EntityFormEditComponent
  • UserFormViewComponent extends from EntityFormViewComponent
  • UserFormCreateComponent extends from EntityFormCreateComponent

This way of organizing my project create a problem that is:

How i can share the common methods between these 3 components ?

I think that service would be a solution, but is not recomendable because they aren't used to handle component logic.

Carlinhos
  • 940
  • 2
  • 10
  • 21
  • 1
    Please, be more precise and tell us what you exactly mean by "common methods". –  May 29 '18 at 17:36
  • 1
    If they all share a comment parent, `EntityFormComponent`, can you just place your common logic in there and use inheritance? – user184994 May 29 '18 at 17:36
  • @DiabolicWords Common functions like save(), that can be shared between UserFormEditComponent and UserFormCreateComponent – Carlinhos May 29 '18 at 17:38
  • 2
    Typically, a `save` function would belong in a service, and the service would be called from the component – user184994 May 29 '18 at 17:42
  • 1
    I agree with user184994. Using Angular and Typescript you should avoid complicated inheritance patterns. I reckon that you come from a Java background where this was pretty normal. Well, in the world of Angular you have to rethink your approaches to common solutions as we are talking about Components, Modules and Services. -- To put it simple: If you have a method that is to be shared among several components, use a service instead of applying inheritance patterns. –  May 29 '18 at 17:43
  • @user184994 I cannot do this because the logic is common between user entity components, but the EntityFormComponent have a basic logic that is generic and can be overrided. – Carlinhos May 29 '18 at 17:55
  • You can still use a service. Just pass the additional logic to it or apply it as a callback in each component. – isherwood May 29 '18 at 18:15

1 Answers1

38

I think that service would be a solution, but is not recommendable because they aren't used to handle component logic.?

Angular distinguishes components from services in order to increase modularity and reusability. and It's Good Practice to Delegate complex component logic to services

From Angular Style Guide
Do limit logic in a component to only that required for the view. All other logic should be delegated to services.

Do move reusable logic to services and keep components simple and focused on their intended purpose.

Why? Logic may be reused by multiple components when placed within a service and exposed via a function.

Why? Logic in a service can more easily be isolated in a unit test, while the calling logic in the component can be easily mocked.

Why? Removes dependencies and hides implementation details from the component.

Why? Keeps the component slim, trim, and focused.

Usage of Services In Angular also ensures that you are not violating DRY and SRP principles of software development,For your scenario the best solution is to use a service

Bonus: what, why and when to use services?

Vikas
  • 11,859
  • 7
  • 45
  • 69
  • 1
    Hi if this answer has solved your question please consider accepting it by clicking the check-mark. This indicates to the wider community that you've found a solution and gives some reputation to both the answerer and yourself. There is no obligation to do this. – Vikas Jun 24 '18 at 18:28
  • 2
    This is a really great answer, it highlights the reason Angular is so popular, but it hides how hard the refactoring can besometimes on large projects! ;) - if you are making a new component though - Follow this, then you can see other areas you can re-use your services. Took me a long time, and many advice from others to see that. – Pogrindis Jul 31 '19 at 23:44