What is a service and why use it? | Interview Question

Q: What is a service and why use it?

**Target Audience:** Beginners who have built a few components and are starting to duplicate logic between them. **Difficulty:** Easy > **How to read this doc:** Ideas are explained in plain language first, then tagged with 📌 Interview term: so you also learn the words an interviewer listens for. The output in section 5 was produced by compiling and running the example on Angular 22.2.3; the @Service() facts come from the 22.2.3 typings, the compiler and the CLI 22.2.3 schematic. ## 1. Why This Even Matters — A Story First A small hotel has three front desks: check-in, concierge and the bar. At first each desk keeps its own paper list of which rooms are occupied. Within a week the lists disagree. The bar charges a guest who already checked out; the concierge books a taxi for an empty room. The fix is not a better paper list at each desk. It is one booking system in the back office that every desk *asks*. The desks become simple: they show what the system

The problem

Question presented to candidate: "Three components on our dashboard each fetch and filter notifications themselves, and they keep drifting out of sync. What is an Angular service, and how would one fix this?"

What a strong answer should cover:

A service is a plain class that holds logic or state that does not belong to one view, made available through dependency injection.
Why: one source of truth for shared state, reusable business rules, thin components, and an easy seam for test fakes.
How it is registered: @Injectable({ providedIn: 'root' }) for an app-wide singleton, or the newer @Service() decorator (Angular 22.1+), which is root-provided by default and only supports inject().
How it is consumed: inject(MyService) in a component, directive, pipe, guard or another service.
Good practice: expose read-only state (a readonly signal or observable) and mutate only through service methods.
Scope matters: root gives one shared instance; a component providers array gives each component its own.

Clarifying questions expected:

"Should all three components see the same notifications, or does each need its own list?"
"Is the data local state, or does it come from an API that should be cached?"

Code / implementation expected: Yes — a small service with state and methods, injected into two or more components.

services

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Beginners who have built a few components and are starting to duplicate logic between them. Difficulty: Easy

How to read this doc: Ideas are explained in plain language first, then tagged with 📌 Interview term: so you also learn the words an interviewer listens for. The output in section 5 was produced by compiling and running the example on Angular 22.2.3; the @Service() facts come from the 22.2.3 typings, the compiler and the CLI 22.2.3 schematic.

1. Why This Even Matters — A Story First

A small hotel has three front desks: check-in, concierge and the bar. At first each desk keeps its own paper list of which rooms are occupied. Within a week the lists disagree. The bar charges a guest who already checked out; the concierge books a taxi for an empty room.

The fix is not a better paper list at each desk. It is one booking system in the back office t

The solution is hidden so you can try first

9 min read · 10 sections

Read the code

AngularA ToastService shared by three components, with the rules kept in the service

Open in playground

import { Component, Service, computed, inject, signal } from "@angular/core";

export interface Toast {
  id: number;
  text: string;
}

// The service owns the state and the rules. Components only display and forward clicks.
// @Service() (Angular 22.1+) is provided in root, like @Injectable({ providedIn: "root" }).
@Service()
export class ToastService {
  private nextId = 1;
  private readonly _toasts = signal<Toast[]>([]);
  readonly toasts = this._toasts.asReadonly(); // components can read, not write
  readonly count = computed(() => this._toasts().length);

  show(text: string) {
    const clean = text.trim();
    if (!clean) return; // business rule lives here, not in every component
    this._toasts.update((list) => [...list, { id: this.nextId++, text: clean }]);
  }
  dismiss(id: number) {
    this._toasts.update((list) => list.filter((t) => t.id !== id));
  }
}

@Component({
  selector: "app-header",
  template: `<header>Inbox ({{ toasts.count() }})</header>`,
})
export class Header {
  toasts = inject(ToastService);
}

@Component({
  selector: "app-composer",
  template: `
    <input #box placeholder="message" />
    <button (click)="toasts.show(box.value); box.value = ''">send</button>
  `,
})
export class Composer {
  toasts = inject(ToastService);
}

@Component({
  selector: "app-root",
  imports: [Header, Composer],
  template: `
    <app-header />
    <app-composer />
    <ul>
      @for (t of toasts.toasts(); track t.id) {
        <li>{{ t.text }} <button (click)="toasts.dismiss(t.id)">x</button></li>
      }
    </ul>
  `,
})
export class AppComponent {
  toasts = inject(ToastService); // same instance the header and composer got
}

Discussion

Other approaches, follow-ups and how it went in real interviews.

Sign in to join the discussion.

No comments yet. Share how you would answer it.

The solution is hidden so you can try first

Keep your momentum going.