What are services and dependency injection in Angular?

Question

Accepted Answer

A **service** is a class for **non-UI logic** — data fetching, business rules, shared state, logging — that components can reuse. **Dependency Injection (DI)** is how Angular *provides* those services to the components that need them, instead of components creating them manually.

## Defining a service

```ts
import { Injectable } from "@angular/core";

@Injectable({ providedIn: "root" }) // makes it a singleton available app-wide
export class UserService {
  private users = [];
  getUsers() { return this.users; }
  addUser(u) { this.users.push(u); }
}
```

The `@Injectable({ providedIn: "root" })` decorator registers the service with Angular's DI system as a single shared instance (singleton) for the whole app.

## Injecting it into a component

```ts
@Component({ ... })
export class UserListComponent {
  // Angular sees this constructor param and INJECTS the singleton automatically
  constructor(private userService: UserService) {}

users = this.userService.getUsers(); // just use it
}
```

You simply declare the service as a constructor parameter; Angular's DI **creates and supplies** the instance. You never write `new UserService()`. (Modern Angular can also use the `inject()` function instead of constructor injection.)

```ts
import { inject } from "@angular/core";
export class UserListComponent {
  private userService = inject(UserService); // alternative injection style
}
```

## Why DI is valuable

```text
✓ Single source of truth — one shared UserService instance across components
✓ Loose coupling — components depend on the type, not on constructing it
✓ Testability — swap in a mock service in tests easily
✓ Lifecycle management — Angular handles creation and sharing
```

Because the component doesn't construct its dependencies, you can inject a **fake** service in tests, or change the implementation app-wide in one place.

## Why it matters

Services + DI are central to Angular architecture: components stay focused on the UI while services hold logic and state, and DI wires them together with minimal coupling.

This separation (and the testability it brings) is one of Angular's defining strengths — borrowed from backend frameworks — and `@Injectable({ providedIn: 'root' })` is the everyday pattern for a shared, injectable singleton.