@Injectable decorator and providedIn in Angular

Introduction

The @Injectable decorator tells Angular that a class can be used to provide data or logic to other parts of the app. The providedIn option helps Angular know where to create and share this service.

When you want to create a service that shares data or functions across components.

When you want Angular to manage the service's lifetime automatically.

When you want to make a service available app-wide or only in a specific module.

When you want to avoid manually adding services to module providers.

When you want to optimize your app by lazy loading services only when needed.

Syntax

Angular

@Injectable({
  providedIn: 'root' | 'platform' | 'any' | SomeModule
})
export class MyService {
  // service code here
}

providedIn: 'root' means the service is available everywhere in the app.

You can also specify a module to limit the service scope or use 'any' for multiple instances.

Examples

This makes DataService available throughout the whole app.

Angular

@Injectable({
  providedIn: 'root'
})
export class DataService {
  // shared data service
}

Each lazy loaded module gets its own LoggerService instance.

Angular

@Injectable({
  providedIn: 'any'
})
export class LoggerService {
  // creates a new instance in each lazy loaded module
}

This service is only created when SomeModule is loaded.

Angular

@Injectable({
  providedIn: SomeModule
})
export class FeatureService {
  // only available in SomeModule
}

Without providedIn, you must add this service to a module's providers array.

Angular

@Injectable()
export class OldService {
  // no providedIn, must add to module providers manually
}

Sample Program

This example shows a simple service GreetingService that is provided in the root injector. The WelcomeComponent uses this service to get a greeting message and display it.

Angular

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

@Injectable({
  providedIn: 'root'
})
export class GreetingService {
  getGreeting(name: string): string {
    return `Hello, ${name}!`;
  }
}

// Usage in a component
import { Component } from '@angular/core';
import { GreetingService } from './greeting.service';

@Component({
  selector: 'app-welcome',
  template: `<h1>{{ greeting }}</h1>`
})
export class WelcomeComponent {
  greeting = '';

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

Important Notes

Using providedIn helps Angular tree-shake unused services, making your app smaller.

Always prefer providedIn: 'root' for app-wide singleton services.

If you forget providedIn and don't add the service to providers, Angular will throw an error.

Summary

@Injectable marks a class as a service that Angular can inject.

providedIn controls where and how Angular creates the service instance.

Using providedIn simplifies service registration and improves app performance.