Angular Services

What Is an Angular Service?

A service is a class with a focused responsibility, fetching data, managing shared state, logging, or any logic that shouldn't live directly inside a component. Services become useful in Angular specifically because of dependency injection: any component (or other service) can request an instance without creating it manually.

Separating logic into services keeps components focused on presentation, and makes that logic reusable and independently testable.

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

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

  addItem(name: string) {
    this.items.push(name);
  }

  getItems() {
    return [...this.items];
  }
}

providedIn: 'root' registers CartService as a singleton available application-wide through dependency injection.

Creating and Injecting a Service

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

// in a component, using inject()
private myService = inject(MyService);

// or via constructor injection
constructor(private myService: MyService) {}

• @Injectable() marks a class as available for dependency injection.
• providedIn: 'root' is the most common registration, making the service a singleton for the whole app.
• The inject() function is the modern way to obtain a service instance inside a class field initializer.
• Constructor injection is the classic approach and is still fully supported.

Angular Services Cheatsheet

The core patterns you'll use when building and consuming services.

Why Use a Service Instead of a Component

Components are meant to focus on presenting UI and delegating to services for anything else: fetching data, computing derived values, managing shared state, or talking to browser APIs. Without services, every component would duplicate that logic or awkwardly reach into sibling/parent components directly.

• Services are easily shared across unrelated components through dependency injection.
• Services are simple to unit test since they're plain classes without a template.
• Services centralize a single source of truth for shared state or business logic.

Example: A Data Access Service

One of the most common service patterns wraps HttpClient calls behind a focused, typed API, so components never call HttpClient directly.

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

  getUser(id: string) {
    return this.http.get<User>(`/api/users/${id}`);
  }
}

Components inject UserService, not HttpClient directly, keeping HTTP details out of component code.

Services as a Lightweight State Container

Beyond data access, a singleton service is a natural place to hold state shared across multiple components, like the current user, a shopping cart, or UI theme preference, especially when paired with signals.

@Injectable({ providedIn: 'root' })
export class ThemeService {
  theme = signal<'light' | 'dark'>('light');
  toggle() {
    this.theme.update(t => (t === 'light' ? 'dark' : 'light'));
  }
}

Common Mistakes

• Injecting HttpClient directly into components instead of wrapping API calls in a dedicated service.
• Forgetting @Injectable() on a class you intend to inject, causing a runtime dependency injection error.
• Putting UI-specific logic (DOM manipulation, template state) inside a service instead of a component.
• Creating a new MyService() manually instead of letting Angular's injector provide the instance.

Key Takeaways

• Services are plain classes marked @Injectable() that hold shared logic and state.
• providedIn: 'root' registers a service as an application-wide singleton.
• Services keep components focused on presentation and make logic independently testable.
• Services can hold reactive state (with signals) as well as one-off methods.