> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/angular/angular/llms.txt
> Use this file to discover all available pages before exploring further.

# @Injectable

> Decorator that marks a class as available for dependency injection

## Overview

The `@Injectable` decorator marks a class as available to be provided and injected as a dependency. It enables Angular's dependency injection system to provide instances of the class where needed.

## Signature

```typescript theme={null}
@Injectable(options?: Injectable): TypeDecorator
```

## Parameters

<ParamField path="options" type="Injectable">
  Optional configuration object that determines how and where the service is provided.
</ParamField>

## Injectable Options

### providedIn

<ParamField path="providedIn" type="'root' | 'platform' | null">
  Determines which injector provides the injectable.

  * `'root'` - Provided in the root injector (application-level, singleton)
  * `'platform'` - Provided in the platform injector (shared across apps)
  * `null` - Not automatically provided, must be added to a `providers` array

  ```typescript theme={null}
  @Injectable({ providedIn: 'root' })
  ```
</ParamField>

<Note>
  The `providedIn: 'any'` option is deprecated. Use `'root'` instead.
</Note>

## Basic Service Example

```typescript user.service.ts theme={null}
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class UserService {
  private users: string[] = [];

  addUser(name: string) {
    this.users.push(name);
  }

  getUsers(): string[] {
    return this.users;
  }

  getUserCount(): number {
    return this.users.length;
  }
}
```

## Service with Dependencies

```typescript data.service.ts theme={null}
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  private apiUrl = 'https://api.example.com';

  constructor(private http: HttpClient) {}

  fetchData<T>(endpoint: string): Observable<T> {
    return this.http.get<T>(`${this.apiUrl}/${endpoint}`);
  }

  postData<T>(endpoint: string, data: any): Observable<T> {
    return this.http.post<T>(`${this.apiUrl}/${endpoint}`, data);
  }
}
```

## Using Services in Components

```typescript app.component.ts theme={null}
import { Component, OnInit } from '@angular/core';
import { UserService } from './user.service';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <div>
      <h2>Users ({{userCount}})</h2>
      <ul>
        <li *ngFor="let user of users">{{user}}</li>
      </ul>
      <button (click)="addUser()">Add User</button>
    </div>
  `
})
export class AppComponent implements OnInit {
  users: string[] = [];
  userCount = 0;

  constructor(private userService: UserService) {}

  ngOnInit() {
    this.users = this.userService.getUsers();
    this.userCount = this.userService.getUserCount();
  }

  addUser() {
    this.userService.addUser(`User ${this.userCount + 1}`);
    this.users = this.userService.getUsers();
    this.userCount = this.userService.getUserCount();
  }
}
```

## Component-Level Providers

```typescript notification.service.ts theme={null}
import { Injectable } from '@angular/core';

@Injectable()
export class NotificationService {
  notifications: string[] = [];

  add(message: string) {
    this.notifications.push(message);
  }

  clear() {
    this.notifications = [];
  }
}
```

```typescript notification.component.ts theme={null}
import { Component } from '@angular/core';
import { NotificationService } from './notification.service';

@Component({
  selector: 'app-notifications',
  standalone: true,
  providers: [NotificationService], // Component-specific instance
  template: `
    <div>
      <div *ngFor="let msg of notificationService.notifications">
        {{msg}}
      </div>
      <button (click)="addNotification()">Add</button>
      <button (click)="notificationService.clear()">Clear</button>
    </div>
  `
})
export class NotificationComponent {
  constructor(public notificationService: NotificationService) {}

  addNotification() {
    this.notificationService.add(`Notification at ${new Date().toLocaleTimeString()}`);
  }
}
```

<Note>
  When provided in a component, each instance of the component gets its own instance of the service.
</Note>

## Factory Providers

```typescript logger.service.ts theme={null}
import { Injectable, InjectionToken } from '@angular/core';

export const IS_PRODUCTION = new InjectionToken<boolean>('IS_PRODUCTION');

@Injectable()
export class Logger {
  constructor(private isProduction: boolean) {}

  log(message: string) {
    if (!this.isProduction) {
      console.log(message);
    }
  }

  error(message: string) {
    console.error(message);
  }
}

export function loggerFactory(isProduction: boolean) {
  return new Logger(isProduction);
}
```

```typescript app.config.ts theme={null}
import { ApplicationConfig } from '@angular/core';
import { Logger, loggerFactory, IS_PRODUCTION } from './logger.service';

export const appConfig: ApplicationConfig = {
  providers: [
    { provide: IS_PRODUCTION, useValue: false },
    {
      provide: Logger,
      useFactory: loggerFactory,
      deps: [IS_PRODUCTION]
    }
  ]
};
```

## Class Providers with useClass

```typescript config.service.ts theme={null}
import { Injectable } from '@angular/core';

export abstract class ConfigService {
  abstract get apiUrl(): string;
}

@Injectable()
export class DevelopmentConfigService implements ConfigService {
  get apiUrl() {
    return 'https://dev-api.example.com';
  }
}

@Injectable()
export class ProductionConfigService implements ConfigService {
  get apiUrl() {
    return 'https://api.example.com';
  }
}
```

```typescript app.config.ts theme={null}
import { ApplicationConfig } from '@angular/core';
import { ConfigService, DevelopmentConfigService } from './config.service';

export const appConfig: ApplicationConfig = {
  providers: [
    {
      provide: ConfigService,
      useClass: DevelopmentConfigService
    }
  ]
};
```

## Value Providers

```typescript constants.ts theme={null}
import { InjectionToken } from '@angular/core';

export const API_CONFIG = new InjectionToken<ApiConfig>('API_CONFIG');

export interface ApiConfig {
  apiUrl: string;
  timeout: number;
  retries: number;
}
```

```typescript app.config.ts theme={null}
import { ApplicationConfig } from '@angular/core';
import { API_CONFIG, ApiConfig } from './constants';

const apiConfig: ApiConfig = {
  apiUrl: 'https://api.example.com',
  timeout: 5000,
  retries: 3
};

export const appConfig: ApplicationConfig = {
  providers: [
    { provide: API_CONFIG, useValue: apiConfig }
  ]
};
```

Usage:

```typescript theme={null}
import { Injectable, inject } from '@angular/core';
import { API_CONFIG, ApiConfig } from './constants';

@Injectable({ providedIn: 'root' })
export class ApiService {
  private config = inject(API_CONFIG);

  constructor() {
    console.log(`API URL: ${this.config.apiUrl}`);
  }
}
```

## Inject Function

```typescript modern.service.ts theme={null}
import { Injectable, inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { API_CONFIG } from './constants';

@Injectable({
  providedIn: 'root'
})
export class ModernService {
  private http = inject(HttpClient);
  private config = inject(API_CONFIG);

  fetchData() {
    return this.http.get(`${this.config.apiUrl}/data`);
  }
}
```

<Tip>
  The `inject()` function is the modern way to inject dependencies. It can be used in constructors, field initializers, and factory functions.
</Tip>

## Service Lifecycle

```typescript cleanup.service.ts theme={null}
import { Injectable, OnDestroy } from '@angular/core';
import { interval, Subscription } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class CleanupService implements OnDestroy {
  private subscription: Subscription;

  constructor() {
    this.subscription = interval(1000).subscribe(n => {
      console.log(`Tick: ${n}`);
    });
  }

  ngOnDestroy() {
    // Clean up resources
    if (this.subscription) {
      this.subscription.unsubscribe();
    }
  }
}
```

<Warning>
  Services provided in `'root'` are singletons and live for the entire application lifetime. They won't be destroyed until the app is closed. Implement `OnDestroy` for cleanup, but be aware it may not be called for root services.
</Warning>

## Testing Services

```typescript user.service.spec.ts theme={null}
import { TestBed } from '@angular/core/testing';
import { UserService } from './user.service';

describe('UserService', () => {
  let service: UserService;

  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [UserService]
    });
    service = TestBed.inject(UserService);
  });

  it('should be created', () => {
    expect(service).toBeTruthy();
  });

  it('should add users', () => {
    service.addUser('John');
    expect(service.getUserCount()).toBe(1);
    expect(service.getUsers()).toContain('John');
  });
});
```

## Provider Scopes

| Scope                    | Description                 | Lifetime           |
| ------------------------ | --------------------------- | ------------------ |
| `providedIn: 'root'`     | Application-level singleton | Entire app         |
| `providedIn: 'platform'` | Platform-level singleton    | All apps on page   |
| Component `providers`    | New instance per component  | Component lifetime |
| Module `providers`       | Shared in module scope      | Module lifetime    |

## Best Practices

<Tip>
  * Use `providedIn: 'root'` for application-wide services
  * Use component `providers` for component-specific state
  * Implement `OnDestroy` for cleanup in services with subscriptions
  * Use `inject()` function for modern dependency injection
  * Create abstract classes for service interfaces
</Tip>

<Warning>
  * Avoid circular dependencies between services
  * Don't store component-specific state in root services
  * Be careful with service constructors - keep them lightweight
  * Always unsubscribe from observables to prevent memory leaks
</Warning>

## Related APIs

* [inject()](/api/core/inject) - Modern dependency injection function
* [InjectionToken](/api/core/injection-token) - Create custom injection tokens
* [Injector](/api/core/injector) - Manual service instantiation
* [@Component](/api/core/component) - Component decorator with providers

## See Also

<CardGroup cols={2}>
  <Card title="Dependency Injection" icon="book" href="/concepts/dependency-injection">
    Learn DI fundamentals
  </Card>

  <Card title="Hierarchical Injectors" icon="book" href="/concepts/dependency-injection">
    Understand injector hierarchy
  </Card>

  <Card title="Creating Services" icon="book" href="/concepts/services">
    Service creation guide
  </Card>

  <Card title="Providers" icon="book" href="/concepts/dependency-injection">
    Configure providers
  </Card>
</CardGroup>