Class Factory and Service Provider

Difference between Class Factory and Service Provider. You will see from the previous view article we are focusing on the providers. So in previous few articles, we generally discuss class provider factory provider and value provider.  if you need to understand this provider separately then you can read the separate article. as I say in the previous article,  There is three type of provider in angular dependency injection. class provider, factory provider, and value provider.

we always want to explain every topic using the example so this article will also help you to understand every topic using the different example of class factory and value provider.

In this article, we will discuss all this three provider. So let’s starts with the class provider. Basically, we will use Provider to register classes functions or value.

So these classes are used by the dependency injection. basically, providers will provide information and provide it to the class. we will specify the information using the instance of an object. This information includes token the identifier of an object.

So when you go white an object to the component using provider Dependency injection check first the object in the  local component provider and then if the object is not exist then it attempt to resolve this object in the parent component and so forth and he goes all the way to the application component and check for the dependency injection.

But don’t worry I am good handle all these resolution and creation of dependencies for you so you don’t want to care about anything. But before you start understanding dependency injection you first need to understand services. we already created an article on services so you can read this article to understand better. So let’s know about the difference between class factory and value provider.

Class Provider

So in the class provider, we will use the class as dependency injection so we will create a new service with a function and extend this service with another service. keep in mind the service is just a typescript class the difference between typescript class and service is that the typescript class is a pure class.

This class cannot be injected into the angular module so if you wanted to inject class install angular module then we need to provide injectable decorator use this class as a module. So creating service will provide the class using import keyword and we can access this class just like a module in angular.

So now I will show you the example of the class provider.


In this example, you will see we created a simple service Call this service, we had created a  simple class which returns. In this function, we are returning two values with the edition.


After that, we had created another service called Add.  using this service request Extend the previous service and change extended function.

In the above code Just created a private variable called i and specify value 10 to this variable. now when we extend previous class is it returns the previous class method and minus the i variable. so when you call the function this will  – 10 from the get value function.

Provide Class as Dependency

So now we will provide this class as a dependency.  so we will provide this class to the component. create provider selector in the component And specify the provided class and extended class.

now you will see in the code we provide the first class in the provide selector and then provide use class which is extended, class. so when you create an object of the class so you don’t need to create child class object. you just wanted to create the object for the parent class.

You can access the method of the class using parent instance object.


Factory Provider

Let’s understand factory provider now. In factory provider, we will provide an instance of the object using the function. So sometimes you need to dynamically change the value then you will need to provide a function for that.  using factory provider you can change the value dynamically and you don’t need to specify the class in the component provider.

Just wanted to specify a function which returns an instance of the object.  so the component provider takes this function as dependency injection.  in the function, we just provide an instance of the class and return the instance of the class to the provider of the component decorator.

So let’s look at the example

So in the above example, we will export a function and return an instance of the object with the parameter. you will see in the code we just provided An instance of the object and specify this function in the component provider.

So this will get the value from the function.  Using this method value of function parameter dynamic

In the function, we first provide service Factservice and in the juice factory you provided an instance of the service or you can say a class.  except providing all this code in the component provider which simply create a function and provide the same value using factory provider.

Provided with a complete example of factory provider so you can read this Article. Now in the last, we will look at the value provider.


Value Provider

Now we had discussed the class provider and factory provider.  after that, I will focus on the value provider. I had explained to you what is the difference between class provider and factory provider. now we will discuss on the value provided.

The value provider we do not provide the class or function.except providing for class inject a class call injector. we will set injector as a token and provide this injector in the component provider. After that to provide a value we just provide use class selector and specify the value. you can specify any value here just like number and string.

let’s look at the example

In the example imported the injector using import keyword. In the app component constructor, we will create an instance of the injector class and use this instance to call get method. we will discuss the injectors class in the future articles.

In the app component class, we provide the dependency of the injector and specify the value using use value selector. So when you specify a string in the use value selector this will return the value to the component provider.

In the previous class provider we use the class to provide the information and in the factory provider, we use the function to provide information. But in value provider, we directly specify the value to the component provider.

I hope you understand what is the difference between class factory and value provider.

if you don’t understand the difference between class factory and value provider then comment in the comment section.

thank you for reading this article.