A component’s job is to render data. Thus, making sure that it has data, and renders the data the right way, and sometimes makes sure that it dispatches the right data to its children.

If we delegate fetching and managing data to the component, this would be too much to manage. Besides that, if we have a problem rendering the component, tests will be much more time consuming since we do data fetching and management, and rendering in the same component. Any changes in the future would be harder to implement and test. That’s why this type of design is a terrible practice.

Angular is built in a way that you won’t have this issue by using services and dependency injection so that:

• You make the app none strongly coupled and linked with its dependencies.
• Factorise the instantiation of a dependency
• Facilitate the maintainability as we can replace a dependency with another implementation rapidly and easily.
• Facilitate testability, as you test service and its functionalities separately. Thus, bugs detection is easy and fast, as well as its correction.

In this article, I’ll be covering:

• What’s a service?
• What’s DI, and how it works?
• A concrete example of DI
• Takeouts

#angular #dependency-injection #typescript #web-development