Value Provider

Angular Value Provider,  in this article we are creating angular value provider example in the previous article we had created factory provider with the example. if you don’t know what is factory provider then must read this article first because we are creating value provider depend on factory provider.

We had created three article on dependency injection first one is the class provider second one factory provider and the third one values provider. So in this article, we are looking out value provider. If you don’t know what is dependency injection then must read the dependency injection article because this article is very important while creating family provider or any provider which we are creating in this lesson.

Value provider is the simple way to provide a value as dependency injection.  so if you wanted to provide a value to the class then you can choose value provider. The first we need to understand the difference between value provider and factory provider I will explain both examples in detail. using factory provider we simply provide a method to the class.  and using value provider provide value to class as dependency injection.

In this lesson, I will show you both ways to inject value using value provider and factory provider. Now let’s jump into the code and understand how to paint value provider in the angular application.

Create angular app first

So first we will create the angular application using CLI. You can choose a different method for creating the application but this is the most basic and simple way to create an angular application. So first open visual code editor and in the terminal of the editor enter the following command.

in this command, we are creating value provider application you can choose the different name for your application the two the same which we have written here. In this command, you will also see the inline template and inline style command to create an angular application. These commands do not create the angular template file and angular style file. if you are creating a bigger application then just remove this template and style command. just for this tutorial, we are using this command.



After creating the application we are just focusing on app.component.ts file. Open your angular application folder and locate this file. you can find this. In source> app folder. When understanding the value provider you need to know about in the injector. So first we will understand the injector API. The injector is the class in angular core package you can access the Injector object directly.

The injector is a dependency injection container used for initiating object and resolving dependencies if the class you are attempting to resolve and create using the injector Then you have dependencies themselves injector automatically attempt to resolve and create those for you.

So here is the value provider example

Understand the code

  • In this code, we will first import the injector using Angular core module. 
  • we had created title property in the app component class and provide it as type string.
  • In the constructor of app component class you provided private injector so here we will create the instance of the injector class
  • So whenever app component class is called injector instance will call automatically.  in the constructor the specified value to the title property of app component class.
  • In the constructor please specify provide value to the class title property an add injector get method. This method will get the value from use value.
  • In the get method, we provide language.  you can choose anything in this parameter.
  • After that in the component decorator we provide the language provider and using use value We will specify our value.
  • So you can specify any value like string number boolean.
  • So we will provide English string here in the use value.
  • In the component template, we will create h2 heading tag specify title  variable in the H2 heading tag
    now just compile your angular application using NG serve command.

    after compiling your application you will get the result provided value English. Now just change this English value to Russian. The injector will return Russian value you can just replace the this value to number and you will see the result.


Provide Value Using Factory Provider

Now we will understand how to inject this value using factory provider. So as I say using factory provider We are providing the injector value using the method.

I will show you how is done. look at the example.

Understand Code
  • in this example we had exported a function call provide value in this function we will return two values.
  • So just look at the value we will first return the provide value which is the language then we will return the use value which is English.
  • Then we will just import this function from the provider.  so I will just write provide value function in the component provider selector.And save this file as it is.

After compiling this file you will see the same result. Using the factory provider  we just specify the method in the provider selector.

that’s it now we are done with the value provider example. I hope you understand valueprovider. Till now you don’t understand valueprovider then just comment me you are question.

For your practice create a class which provides value provider I hope it is not difficult for you.  this is your homework. this article we had completed half of the homework using factory and value method you just need to understand how to provide a value to the component provider selector.

that is ok for this article.

we will see you in the next article with the new topic of angular.