mediumFrontend

What is the difference between providing a service in root vs in a component?

Q: What is the difference between providing a service in root vs in a component?

**Core concept.** providedIn: 'root' registers the service **once for the whole app** — a single shared singleton (and it's tree-shakable). Providing it in a component's providers: [] creates a **new instance per component instance** (shared only with that component's children), and it's destroyed when the component is. Choose root for shared state, component-level for isolated state. providedIn: 'root' ONE app-wide singleton shared everywhere tree-shakable <rect class='d-b

288 views

Understand the problem

Explain provider scope.

diprovidedin

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

Read the code

Root singleton vs component-scoped

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

@Injectable({ providedIn: 'root' })   // ONE shared instance app-wide
export class GlobalCart {}

@Injectable()                          // not auto-provided
export class WidgetState {}

@Component({
  selector: 'app-widget',
  standalone: true,
  providers: [WidgetState],            // NEW WidgetState per <app-widget>
  template: '...',
})
export class WidgetComponent {
  // each <app-widget> gets its own WidgetState;
  // GlobalCart is the same instance everywhere.
}

Join the discussion

Discussion (0)

No responses yet. Be the first to share what you think.

What are pipes in Angular?

What is the customElements schema in Angular and when do you need to use it?