Angular Services: Your App's Shared Toolbox

Why it exists

As applications grow, you need to share functionality like fetching data or logging across many components. Creating this logic inside each component leads to code duplication and makes the app hard to maintain, test, and scale. Services solve this by centralizing shared code in one place.

The mental model

An Angular service is a shared toolbox managed by Angular's Dependency Injection (DI) system. A component doesn't build its own tools; it simply declares what it needs in its constructor (e.g., "I need a logger"). The DI system then provides the single, shared instance of that tool (the service) to any component that asks for it.

How it works

You create a standard TypeScript class and add the @Injectable() decorator. To make it a singleton available everywhere, you use @Injectable({ providedIn: 'root' }). This tells Angular to create one instance of the service for the entire application. Then, in any component, you "inject" it by adding it as a typed parameter in the constructor, like constructor(private myService: MyService) {}. Angular handles the rest.

When to use it

Services are the backbone of most Angular applications. Use them for tasks that need to be shared or are independent of a specific view. Common uses include: first, making API requests to a server (data clients); second, managing user authentication; third, sharing application state between unrelated components; and fourth, centralizing logging or error handling.

When not to use it

Avoid putting logic that is tightly coupled to a single component's view or internal state into a service. If the logic or data is only ever used by one component and its direct children, it's often simpler to manage it within the component itself or pass it down with @Input() properties.

One canonical example

A logging service prevents console.log calls from being scattered everywhere. First, define the service: import { Injectable } from '@angular/core'; @Injectable({ providedIn: 'root' }) export class AnalyticsLogger { trackEvent(category: string, value: string) { console.log('Analytics event:', { category, value }); } }. Then, to use it, a component injects it in its constructor: constructor(private logger: AnalyticsLogger) { this.logger.trackEvent('page_view', 'home'); }.