Factory Service Provider

Factory Service Provider, In this article we are looking at the example of Factory Service Provider. Service provides the metadata to the component. So if you need to create some task we will create service for that because it helps us to separate the code. You can also reuse the code. The best way to use service is you can reuse the code multiple time no more restriction for using the service. Most important thing is that using @Injectable you can inject the service into @Component.

Dependency Injection is most Important part of the Angular System. In this lesson, we will create a service and inject this service by using a method. So the Factory Service Provider means we will dynamically create the instance of the object. We will provide service class instance using the method. In the previous article, we show you how to use the class as dependency injection. Now we will focus on factory service provider.

So let’s look at the example.


Create a Simple Angular app

So first we will create a simple angular app using CLI. There are still different ways to create an angular application but we are using CLI method.

Execute this command on visual code terminal or you can run this command on cmd also but make sure install node.js in your system.

After that, we will write another command to create service in our application. So following is the command to create a service. So first go inside your application folder using cd <application-name> command and enter this command to create service.

Create Service in Angular Application

In the above command, we first got into the FactProvider app and insert ng generate service fact command. This command will generate two files fact.service.spec.ts and fact.service.ts. The .spec.ts file is for testing purpose so we just need to focus on .service.ts file.



In the fact.service.ts file, we will create Injectable service that injected into the component. Look at the code we will explain to you what is going on in the code.

  • In this code, you will see @Injectable decorator. This will inject your class as dependency injection.
  • We will first export the class and in the constructor, we’ll create three private properties. So when we call the class using object we need to specify the parameter to the class object.
  • After this, we’ll create a method call getMethod(). In this method, we return a string and using if else statement we create a condition. In this condition if the flag value is true then we will return addition of the two properties otherwise we return subtraction of the two properties.
  • So in the if and else statement we just add the x and y value using plus sign and subtract it in the else statement.



Find out the app.component.ts file. In this file, we will add our fact service. we’ll use this service to as a reusable code so by just creating an instance of the object you can call all method of fact service.

  • In the above code, we’ll first import the fact service in the app.component.ts file using the import statement.
  • After that, In AppCompoent class we call a constructor and create an instance of the fact service. So now we can access all the properties and method of fact service using fact object.
  • You already know while creating the application we provided an inline template and inline style command. This command did not create the template and style file for the component.
  • So in the template, we will insert h2 heading tag with fact object and call getMethod(). This method will return a string and you can see the string in the browser.
  • After that, we will call the dynamic factory method to inject the service into the provider.


Dynamically Call Factory Method

After creating the constructor we need to provide the service in the component provider. In the previous article, I had shown you how to inject service using the class provider. Now we will inject the service using factory service provider. Then you will completely understand what is the difference between factory and service provider.

  • In the above code, we just updated the app.component.ts file and insert a constant FLAG variable. This variable has a boolean value which is true or false. So we just provide the false value to this variable.
  • After that, we’ll export the function call ProviderMethod(). You are free to use any name for this function.
  • In this function, we return an instance of the fact service. So we will first provide the name of the service and then in the useFactory keyword, we’ll provide the instance fact object and also provide the parameter value to this object.
  • In the last, Provide the ProviderMethod() function in the component provider.
  • That’s it. Run your application using serve command.
  • Use this command to run your angular application. You need to first go inside your application folder and execute this command.

    This command will run your application.

After compiling your application you will see we get the subtracted value 30. If you change the FLAG variable to true then the result is different. After changing FLAG variable false to true you will get “addiction of two value 50”.

So you can see we dynamically provide the instance of the object using method. In this article, we just clear the concept of factory service provider. You can use it for the different program and reuse the service.

If you have any question then comment us. You can also follow me on Youtube.

That is all for this tutorial, we will see you in the next article.