Angular Class Provider


In this article, we will looking out how to create a simple angular class provider. There is three type of provider class provider, factory provider and value provider. In each article, we will show each provider with description and example.

So we need to first know about what is the provider?

Providers are basically used to register classes, functions or values. So provider can use as a dependency injection. So the injector class uses the provider to supply information so that it can create an instance of an object to injected into another. In this article, we will create two classes. In the first class we provide the addition of two values and in second class we minus a value for the first class value.

If you don’t know what I mean then just look at the example.

We will first create a simple angular application.

Create Angular CLI Application

So we will first create a simple angular CLI application. There are few commands to create angular CLI application. So follow the steps and create simple angular applications.

After creating an application we need to create classes. So we will create two classes here.

How to Create Angular Class

In above command, we had created two classes. first gonna be do and the second gonna be add. In Do class we will add two values using the method. After that in Add class we minus a value for the first class.

Do.ts

If you can see them in your file hierarchy you can find the do.ts file which is your class. In this class, we will create two property and specify values to it.

  • Copy this code and paste it into a do.ts file. In this file, we first import component from the angular core.
  • Then in the class, we create two property x and y. we also specify some value to it. So for the first property, we specify 30 and for the second property, we specify 20 value.
  • In the end, we will create a function getValue(). This function will return a number. In this function, we will return addition of two properties.

 Add.ts

Now, look at the second class. In the second class, we will implement the first class method. Let’s see how it’s done.

Copy and paste the above code into the add.ts file.

  • We will first import Component from angular core module.
  • Then we will import Do class which we created before.
  • Now in Add class, we will extend the first Do class. So using extends keyword we will extend the Do class.
  • In Add class, we will create I property the has a 10 number value.
  • Then we will create a getValue() method that returns a number. In this method, we will return the first Do class method but with some implementation. So here we will minus 10 number for the first Do class method.

app.component.ts

In the app.component.ts file, we will add the provider. In the provider, we will specify the provider class and also provided the use class that depends on another class.

  • In the above code, we will first import the classes using the import statement. So we will import Do and Add class.
  • After that, we will create the provider for the component. In the prover array, we specify provide Do and useClass Add.
  • In the end, we will create a constructor and create an instance of the Do class.
  • Using this instance we will class the getValue() method.

app.component.html

Now the time is to create a template. Now we need to show the value of the getValue() method. So In the app.component.html file, we will place this code.

Now here we just call the getValue() function using add an instance. Keep in mind that add is the first class instance we did not create a second class instance for that. Using first class instance we will call the second-class method.

Serve Angular Application

At the end of the application just serve the application using ng serve command.

Angular Serve Command

After completing this command. You will see the message and value. So the function returns 40 value. In first Do class, we add two value. The addition of these two value is 50. After that we in the extend class which is Add class we just minus 10 from the first method which returning 50 value.

You will get 40 results from the class. Here the second class depends on the first class and extend the first class. we will implement the first class method using the second class. In the provider, you will see which class is provided and which class is used.

I hope you understand how angular class provider works.

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

Leave a Reply

Your email address will not be published. Required fields are marked *