mediumFrontend

What is a service and why use it?

Q: What is a service and why use it?

**Core concept.** A service is a reusable class — usually marked @Injectable — that holds logic, data access, or shared state that **isn't tied to a view**: HTTP calls, business rules, caching, app-wide state. Components stay focused on the UI and **inject** services via Dependency Injection, which keeps code reusable and testable. ComponentA ComponentB ComponentC <text class='d

365 views

Understand the problem

Explain services in Angular.

services

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

A service injected into a component

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

@Injectable({ providedIn: 'root' })   // app-wide singleton
export class CounterService {
  private count = 0;
  increment() { return ++this.count; }
}

@Component({
  selector: 'app-root',
  standalone: true,
  template: '<button (click)="onClick()">count: {{ value }}</button>',
})
export class AppComponent {
  private counter = inject(CounterService);  // DI, no 'new'
  value = 0;
  onClick() { this.value = this.counter.increment(); }
}

Join the discussion

Discussion (0)

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

What is provideHttpClient(withInterceptors([...])) and how does it replace legacy HTTP interceptor providing?

What is a FormArray?