Sharing Dependencies through Components

Learn how to inject services in the component tree and share dependencies through components.

The @Component decorator has a providers property similar to the @NgModule decorator to register services with a component injector. A service that registers with the component injector can serve two purposes:

  • It can be shared with its child components.

  • It can create multiple copies of the service every time the component that provides the service is rendered.

Sharing dependencies through a component

A service provided through the component injector can be shared among the child components of the parent component injector, and it is immediately available for injection at their constructors. Child components reuse the same instance of the service from the parent component. Let’s walk through an example to understand this better:

  1. Create a new component named favorites inside the src\app\products folder:

Note: The command below is for creating a component on the local machine using the Angular CLI.

Get hands-on with 1200+ tech skills courses.