How to Create a Custom Service in Angular: Understanding the @Injectable Decorator

Angular services play a critical role in organizing shared functionality across an application, helping to manage data, perform business logic, interact with APIs, and handle application-wide concerns. Services allow for the separation of concerns, moving non-view logic out of components. The @Injectable decorator is key to creating services in Angular, enabling dependency injection and allowing Angular to manage service instances efficiently. In this article, we’ll walk through how to create a custom service in Angular and explore the significance of the @Injectable decorator.

What is a Service in Angular?

In Angular, a service is a class designed to handle specific functionality that can be shared across components. It’s typically used for things like:

• Fetching data from an API
• Managing global application state
• Providing utility functions
• Encapsulating business logic

Services are injected into components, other services, or directives, making their functionality accessible wherever needed without duplicating code. Angular’s dependency injection system makes this process straightforward, ensuring that only one instance of a service is created and shared across the application (unless scoped otherwise).

Why Use Services?

The primary benefits of using services in Angular include:

• Reusability: Services centralize reusable logic, reducing code duplication.
• Maintainability: With clear separation between view logic and business logic, services make applications easier to maintain.
• Testability: Services can be tested independently of components.
• Dependency Injection: Services leverage Angular’s dependency injection to share instances efficiently across components, minimizing memory usage and enhancing performance.

Creating a Custom Service in Angular

Step 1: Generate a Service

To create a new service, use the Angular CLI command ng generate service or ng g s:

bashCopy codeng generate service example

This command creates two files:

1. example.service.ts – contains the service class and logic.
2. example.service.spec.ts – contains boilerplate code for testing the service.

Step 2: Define the Service Class and Methods

Open the generated example.service.ts file and define any methods or properties needed by the service.

typescriptCopy codeimport { Injectable } from '@angular/core';
@Injectable({
  providedIn: 'root'
})
export class ExampleService {
  constructor() {}
  // Example method
  getMessage(): string {
    return 'Hello from the Example Service!';
  }
}

In this example:

• getMessage() is a simple method that returns a string.
• @Injectable({ providedIn: 'root' }) registers the service with the root injector, making it a singleton across the application.

What is the @Injectable Decorator?

The @Injectable decorator is crucial for creating services in Angular. It marks a class as a service that can be injected into other classes, enabling Angular’s dependency injection system to handle it. Without @Injectable, Angular’s injector won’t know that the service is intended for dependency injection.

Key Features of @Injectable

1. Dependency Injection: @Injectable allows Angular to inject dependencies into the service. For example, if the service needs HttpClient to fetch data from an API, @Injectable makes it possible for Angular to inject HttpClient as a dependency.
2. providedIn Property: The providedIn option configures where and how the service is provided in the application. By default, Angular uses providedIn: 'root', which registers the service as a singleton at the root level, meaning there is a single instance of the service shared across the entire application.
3. Scope Management: The @Injectable decorator helps manage the scope of the service:
   • Root Scope (providedIn: 'root'): The service is shared application-wide.
   • Lazy-Loaded Module Scope (providedIn: 'any'): Each lazy-loaded module receives its own instance of the service.
   • Specific Module: You can provide a service in a specific module’s providers array, restricting its availability to that module only.

Basic Syntax of @Injectable

typescriptCopy code@Injectable({
  providedIn: 'root' // Default scope, making it available throughout the application
})
export class ExampleService {
  // Service methods and properties
}

When providedIn: 'root' is used, Angular automatically includes the service in the root injector, eliminating the need to add it manually to providers in app.module.ts.

Using the Service in a Component

To use the service in a component, inject it into the component’s constructor. This enables you to access the service methods and properties.

Step 1: Inject the Service

In a component (e.g., app.component.ts), import the service and inject it in the constructor:

typescriptCopy codeimport { Component, OnInit } from '@angular/core';
import { ExampleService } from './example.service';
@Component({
  selector: 'app-root',
  template: `<h1>{{ message }}</h1>`
})
export class AppComponent implements OnInit {
  message: string = '';
  constructor(private exampleService: ExampleService) {}
  ngOnInit(): void {
    this.message = this.exampleService.getMessage();
  }
}

In this example:

• The ExampleService is injected into the component through the constructor.
• The getMessage() method is called to set the message property, which is then displayed in the template.

The providedIn Property: Scoping Services in Angular

The providedIn property in the @Injectable decorator offers different ways to scope services in Angular.

1. providedIn: 'root' (Application-Wide Singleton)

Setting providedIn: 'root' makes the service available application-wide as a singleton. This is the most common setting for services that manage shared state or communicate with APIs.

typescriptCopy code@Injectable({
  providedIn: 'root'
})
export class AppService {}

2. providedIn: 'any' (Lazy-Loaded Module Singleton)

Setting providedIn: 'any' creates a new instance of the service for each lazy-loaded module. This is useful if you need the service scoped to individual lazy-loaded modules without sharing state across them.

typescriptCopy code@Injectable({
  providedIn: 'any'
})
export class LazyService {}

3. Providing the Service in a Specific Module

If you want a service to be accessible only within a specific module, add it to the module’s providers array. This limits the service to that module and any components declared within it.

typescriptCopy code@NgModule({
  providers: [FeatureService]
})
export class FeatureModule {}

Testing Angular Services

Testing services is straightforward with Angular’s testing tools. Here’s a basic test for ExampleService:

typescriptCopy codeimport { TestBed } from '@angular/core/testing';
import { ExampleService } from './example.service';
describe('ExampleService', () => {
  let service: ExampleService;
  beforeEach(() => {
    TestBed.configureTestingModule({});
    service = TestBed.inject(ExampleService);
  });
  it('should be created', () => {
    expect(service).toBeTruthy();
  });
  it('should return a message', () => {
    expect(service.getMessage()).toBe('Hello from the Example Service!');
  });
});

In this example:

• Test Setup: TestBed.configureTestingModule() sets up the test environment.
• Dependency Injection: TestBed.inject(ExampleService) provides an instance of ExampleService for testing.
• Test Cases: We verify that the service is created and that getMessage() returns the expected message.

Best Practices for Using Angular Services

1. Organize Services by Functionality: Group related services by modules or folders to make the codebase easier to navigate.
2. Use Dependency Injection: Always use Angular’s dependency injection to provide services, making testing easier and improving reusability.
3. Keep Services Focused: Follow the Single Responsibility Principle (SRP) to keep each service focused on a single purpose.
4. Avoid Component Logic in Services: Keep services independent of UI logic to maintain separation of concerns.
5. Leverage RxJS for State Management: Use BehaviorSubject or Subject from RxJS within services to manage application state effectively.

Conclusion

Angular’s @Injectable decorator and dependency injection system make it easy to create, use, and share services across components and modules. Services allow you to encapsulate functionality, manage data, and create reusable logic in an organized, maintainable way. By leveraging @Injectable and the providedIn property, you can control the scope and lifecycle of services, optimizing memory usage and performance in your applications.

With this understanding, you can now create custom services tailored to the needs of your Angular applications, from handling API requests to managing global state. This approach keeps your code modular, reusable, and easy to test, enhancing both development speed and code quality.