Understanding Angular 6 Services


Understanding Angular 6 Services is the very important topic in angular. Services are used to manage dependency injection in angular. We are looking out what is dependency injection in later articles. In this lesson, we are creating services. So when you write services you typically write them as Typescript classes. You can create only one class for one file(filename.service.ts) per class. It is a good idea to marks this class as @Injectable() annotation.

So now let’s know about Providers. Providers use to register the classes, functions or values so that can be used by the dependency injection. So a provider is basically a source of information on how to create an instance of an object. When you see provider[] in angular code, you are seeing a call to an angular function to register information to create an object.

There are three types of Provider. Class provider, factory provider, and value provider. Later in the future article, we learn about these three articles but now we just focus on services.

Let’s look at the example

In this example, we will check a gender of male. So let’s jump into the code.

Create Angular app

So first we will create a simple my-services app using angular CLI command.

After that create an angular service. we name this service gender. This service checks the gender of the male and female using makes.

Now we will create a code for gender service.

gender.service.ts

You can find two files in the file hierarchy which is gender.sevice.spec.ts and gender.service.ts. The .spec.ts file used for testing. So in the gender.service.ts file, we create a method in the service and use it.

In the above code, we create a method isGender() and pass a parameter to it. In this method, we check Mike is male or not. So if mike is male then we return yes or we return no.

app.component.ts

In the app.component.ts file, we create two component and inject our gender service into the first component. Let’s look at the code first.

Understand code:-

  • In the above code, we import GenderService using the import statement.
  • After this, we create another component and name this gend. we will provide GenderService to this component using the provider.
  • After that, we create the GenderComponent class and implement the OnInit method. In this class we insert @Input Decorator and with gender name and create YesorNo class property of the string.
  • In the constructor, we create an instance of the GenderService and implement ngOnInit method. In this method, we specify the value to the YesorNo class property using the isGender method.
  • At the last in the app root component, we insert gend tag and specify the values to the @Input gender.

app.component.html

We insert the gend tag which is the first component and specify a value to @Input gender.

app.module.ts

In the end, we import our class into the module.ts file. After AppComponent we import GenderComponent class.

That’s it.

So our Component level Service is ready. You will see the output.

Angular 6 Service

You will see this type of output.

This service is only for component level service. In the next article, we will create app level service. This service will use to provide this service to all component in the application. We do not discuss it more here we will describe it in the next lesson.

I hope you understand Angular 5 Service. In the next few articles, we dive deep into angular services and (DI) Dependency Injection.

So that is all for now. we will see you in the next article.

Leave a Reply

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