Learn Angular with techiediaries.com

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

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 10/9 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.

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 10 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).

✋✋ Also check out Angular 10/9 Services & Dependency Injection via providedIn, root & any 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:

$ 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.