What is an Angular Service — Angular 10/9 Service by Example
Tags: angular
Published: 2020-03-02 07:55:33

---
title: What is an Angular Service — Angular 10/9 Service by Example
published: true
description: In this post, we’ll explain what an Angular service is and we’ll create an example with the latest Angular 10 version.
tags: angular
---


Learn Angular with techiediaries.com
<img  src="https://i.imgur.com/7gQ2IPy.jpg"  />

In this tutorial, we’ll explain what an Angular service is and we’ll create an example with the latest Angular 10 version.

> ✋✋ [Download our Angular ebook for free by subscribing here](https://upscri.be/wvwuxi) 


# What is an Angular Service?

An Angular service is a singleton that can be wired with components or other services via  **Dependency Injection.**

> ✋✋ Join our  [Facebook group](https://www.facebook.com/groups/angular9/)  👈 to discuss anything related to Angular 10/9 development.

According to  [Wikipedia](https://en.wikipedia.org/wiki/Dependency_injection):

> In software engineering,  **dependency injection**  is a technique whereby one object supplies the dependencies of another object.

Don’t be intimidated by this term, it simply means that Angular (or a part of Angular, the injector) takes care of instantiating the services and provides the instance to the requesting component.

According to the  [Angular docs:](https://angular.io/guide/architecture-services)

> DI is wired into the Angular framework and used everywhere to provide new components with the services or other things they need. Components consume services; that is, you can  _inject_  a service into a component, giving the component access to that service class.
> 
> You can use  **services**  to organize and share code across your app

# How to Define an Angular 10 Service?

To define a class as a service in Angular, use the @[Injectable](https://angular.io/api/core/Injectable)() decorator to provide the metadata that allows Angular to inject it into a component as a  _dependency_.

You need to provide a service before it can be available. This can be done in three ways:

-   Via the service’s metadata passed to the @Injectable() decorator (The service will be available everywhere),
-   Via the providers' array, in a specific module (The service is available only to the components and services of the module),
-   Via the providers' array in a specific component (The service is available only to the component).

> ✋✋ Also check out [Angular 10/9 Services & Dependency Injection via providedIn, root & any Tutorial](https://www.techiediaries.com/angular-9-8-services-and-dependency-injection-via-providedin-tutorial/) 👈

# Angular 10/9 Service by Example

Let’s now create a service by example.

Make sure you have an Angular project created and Angular CLI v10 installed.

Head to your command-line interface and navigate to your project’s folder:

```bash
$ cd your-angular-project
```

Next, generate a new service by running the following command:

```bash
$ ng generate service my-example
```

Open the  `src/app/my-example.service.ts`  file:

```ts
@Injectable({  
  providedIn: 'root'  
})  
export class MyExampleService {    
}
```

Thanks to the  **providedIn**  property, you don’t need to do anything else to start using this service except for implementing the functionality that needs to provide. the  _root_  value refers to the root app module.

You can also inject other services in your new service — for example, the built-in  **HttpClient** service — via its constructor:

```ts
import { HttpClient } from  '@angular/common/http';@Injectable({  
  providedIn: 'root'  
})  
export class MyExampleService {    constructor(private httpClient: HttpClient) { }  
}
```

After implementing your service methods, you can import and inject it into other components and call the public methods of your service in your component.

According to the Angular docs:

> Typically, a component’s job is to enable the user experience and nothing more. A component should present properties and methods for data binding, in order to mediate between the view (rendered by the template) and the application logic.
> 
> A component can delegate certain tasks to services, such as fetching data from the server, validating user input, or logging directly to the console.
> 
> By defining such processing tasks in an  _injectable service class_, you make those tasks available to any component.