Angular - Injectable Service

Injectable Services in Angular

In Angular, an injectable service or simply service is a TypeScript class that can be used to share data or a common feature across different parts of your angular application. A service is defined using @injectable decorator. This decorator tells Angular that we can use instances of the service in dependency injection. In other words, it makes a service injectable.

Dependency injection is a design pattern that is used to inject services and other dependencies into angular components and other classes. In this design pattern, other parts of the application request service objects to perform some operation. The provideIn property of the @injectable decorator metadata specifies where in the angular application the service should be injected.

Creating an Injectable Service

There are two ways to create an injectable service. If you don't want a separate folder for services, use the following command in your IDE's terminal −

ng generate service service-name

The above command will create a service class directly in your Angular application without a separate folder, which can be a bit confusing.

When you want to create services inside a separate folder, use the command given below −

ng generates service Services/service-name

This command will create a Services folder and place the service class inside it. After executing the command, you will see a similar output as given below −

CREATE src/app/Services/service-name.service.spec.ts (389 bytes)
CREATE src/app/Services/service-name.service.ts (147 bytes)

Injecting Service at Root Level

To inject a service at the root level, set the value of providedIn property to root. This property is used inside the @Injectable decorator. By default, the service is configured for injecting at the root level, which means a service is shared throughout the whole application.

Suppose we are creating a printName service, this will be the default configuration of the service −

import { Injectable } from '@angular/core';

@Injectable({
   providedIn: 'root'
})
export class PrintNameService {

   // some code...
   
   constructor() { }
}

Injecting Service at Component Level

To inject a service in a particular component and its children only, omit the providedIn property in the service class and use the providers array of the specific component where you want to use it.

Service:

import { Injectable } from '@angular/core';

@Injectable({

})
export class PrintNameService {

   // some code...
   
   constructor() { }
}

Component:

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  providers: [PrintNameService]  
})
export class MyComponent {
  // code
}

Injecting Service into Another Service

You can also inject a service into another service. This allows one service to depend on another service. In this type of dependency, Angular follow the same pattern as injecting into a component.

To do this, you simply add the service as a parameter in the constructor of the other service.

import { Injectable } from '@angular/core';
import { MyService } from './my-service.service'; // Make sure to import the service

@Injectable({
  providedIn: 'root'
})
export class AnotherService {
  constructor(private myService: MyService) {}

  getAnotherData() {
    return this.myService.getData();
  }
}