How to Create a Service in Angular: Simple Guide

In Angular, create a service by generating a class decorated with @Injectable(). Then provide it in the root or a module to make it available for dependency injection in components or other services.

Syntax

To create a service in Angular, define a class with the @Injectable() decorator. This decorator marks the class as available for dependency injection. Use providedIn: 'root' to make the service available application-wide without adding it to any module's providers.

• @Injectable(): Marks the class as injectable.
• providedIn: 'root': Registers the service globally.
• Class name: The service's name, usually ending with Service.

typescript

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

@Injectable({
  providedIn: 'root'
})
export class MyService {
  constructor() { }
  // service methods here
}

Example

This example shows a simple Angular service that provides a greeting message. The service is injected into a component to display the message.

typescript

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

@Injectable({
  providedIn: 'root'
})
export class GreetingService {
  getGreeting(): string {
    return 'Hello from GreetingService!';
  }
}

// Component using the service
import { Component } from '@angular/core';
import { GreetingService } from './greeting.service';

@Component({
  selector: 'app-root',
  template: `<h1>{{ greeting }}</h1>`
})
export class AppComponent {
  greeting: string;

  constructor(private greetingService: GreetingService) {
    this.greeting = this.greetingService.getGreeting();
  }
}

Output

<h1>Hello from GreetingService!</h1>

Common Pitfalls

Common mistakes when creating Angular services include:

• Not adding @Injectable() decorator, which prevents Angular from injecting the service.
• Forgetting to provide the service in providedIn or in a module's providers array, making it unavailable for injection.
• Creating multiple instances by providing the service in multiple modules unintentionally.

typescript

/* Wrong: Missing @Injectable decorator */
export class WrongService {
  constructor() { }
}

/* Right: With @Injectable and providedIn root */
import { Injectable } from '@angular/core';

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

Quick Reference

• Create service: Use ng generate service service-name or manually create a class with @Injectable({providedIn: 'root'}).
• Inject service: Add it to a component constructor with private serviceName: ServiceType.
• Use service: Call service methods inside the component.

Key Takeaways

Always decorate your service class with @Injectable() to enable dependency injection.

Use providedIn: 'root' to make the service available app-wide without extra configuration.

Inject services into components via constructor parameters for clean, testable code.

Avoid providing the same service in multiple modules to prevent multiple instances.

Use Angular CLI command ng generate service for quick and correct service creation.