Angular Dependency Injection(Custom Provider)
Angular Dependency Injection
Before discussing dependency injection lets understand what are dependencies first
- Dependencies are services or objects that the class needs to perform its function
- Dependency Injection is a design pattern in which a class/ component request dependencies from external sources rather than creating them.
In Angular, Component or services are injected with dependencies via the constructor arguments. Angular DI’s framework will provide dependencies calling the factory function to instantiate the dependencies.
How Services are exposed to Inject?
Its using @Injectable decorator and dependency injection provider which is declared in service.
In the above service named AngProvidedDepService the if provided In is removed then you will get following error
No provider for “service_name”. This is because Angular not able to find any provider which will provide AngProvidedDepService.
Lets create our own Custom Provider
In our case we have to return AngProvideDepService which needs to provide its own dependencies also as shown below inside the function.
We created a Custom service provider which will return new AngProvidedDepService. Here comes one more question how will you provide dependencies to the provider that is also through Angular Dependency Injection system.
Next step is to plug this provider into Angular Dependency Injection system. There are multiple ways doing that lets provide to component inside Component decorator
We will use providers property and pass it an configuration object. In this Configuration object we will telling exactly what we are providing using a unique name to service via Injection Token.
Lets create one Unique Injection token for Angular Provided service and then pass it to the providers property available in Component annotation
Lets provide Configuration object to provider
- provide will have unique token for the service i.e. Injection token which is created
- use factory will be provided with custom provider created
- deps will have the dependencies which is needed for AngDepProvidedService to run.
We have provided all these to Angular dependency Injection system so that whenever any component use this via constructor Service will be provided
Lets inject it in one of the compoent using inject decorator
Summarize :
Angular Dependency Injection system will provide services or objects which were injected into components via constructor. Each Dependency has its own Injection token and provider function which will provide the instantiation. To go deeper into we have created our custom provider and Custom injection token and updated into one of the component.
Thanks for Reading…
If you liked this reading follow me on this for technical blogs
https://abiaradhya.medium.com/
abi — DEV Community Profile
Abilash S — Software Developer — Siemens Healthineers | LinkedIn
For Subscribing my next upcoming articles click here
Originally published at https://dev.to on June 19, 2021.
