What is an Angular Service — Angular 9 Service by Example

We’ll learn what an Angular service is and then we’ll create an example with the latest Angular 9 version.

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 👈 to discuss anything related to Angular development.

According to Wikipedia:

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.

> ✋✋ Also check out Angular 9/8 Services & Dependency Injection via providedIn, root & any Tutorial 👈

According to the Angular docs:

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 Service?

To define a class as a service in Angular, use the @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).

Angular 9 Service by Example

Let’s now create a service by example.

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

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

$ cd your-angular-project

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

$ ng generate service my-example

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

@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:

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.