What is an Angular service, how does DI provide it (providedIn/providers), and why do teams use services?Frontend interview answer

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, catchError, map, of, shareReplay } from 'rxjs';

type UserDto = { id: string; name: string };
export type User = { id: string; displayName: string };

@Injectable({ providedIn: 'root' })
export class UsersService {
  private readonly apiUrl = '/api/users';
  private users$?: Observable<User[]>;

  constructor(private http: HttpClient) {}

  /**
   * Cache + dedupe: multiple subscribers share one request.
   * If you need refresh, expose an explicit invalidation method.
   */
  getUsers(): Observable<User[]> {
    this.users$ ??= this.http.get<UserDto[]>(this.apiUrl).pipe(
      map(dtos => dtos.map(d => ({ id: d.id, displayName: d.name })) as User),
      // In real apps, prefer a typed error strategy (domain errors) over swallowing.
      catchError(() => of([])),
      shareReplay({ bufferSize: 1, refCount: true })
    );

    return this.users$;
  }

  invalidateUsersCache(): void {
    this.users$ = undefined;
  }
}
                  

import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
import { AsyncPipe, NgFor } from '@angular/common';
import { UsersService } from './users.service';

@Component({
  selector: 'app-users',
  standalone: true,
  imports: [NgFor, AsyncPipe],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <button type="button" (click)="refresh()">Refresh</button>

    <ul>
      <li *ngFor="let u of (users$ | async)">
        {{ u.displayName }}
      </li>
    </ul>
  `
})
export class UsersComponent {
  private readonly usersService = inject(UsersService);
  readonly users$ = this.usersService.getUsers();

  refresh(): void {
    this.usersService.invalidateUsersCache();
    // reassign stream (simple pattern); in larger apps use a facade/store.
    (this as any).users$ = this.usersService.getUsers();
  }
}
                  

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

@Injectable()
export class WizardStateService {
  step = 1;
  data: Record<string, unknown> = {};

  reset(): void {
    this.step = 1;
    this.data = {};
  }
}

// component.ts
// @Component({
//   ...
//   providers: [WizardStateService]
// })
// export class CheckoutWizardComponent {
//   constructor(public wizard: WizardStateService) {}
// }
                  

@Injectable({ providedIn: 'root' })
export class SearchCacheService {
  results = new Map<string, User[]>();
}

@Injectable()
export class WizardStateService {
  step = 1;
  data: Record<string, unknown> = {};
}

@Component({
  selector: 'app-checkout-wizard',
  providers: [WizardStateService],
  template: `...`
})
export class CheckoutWizardComponent {
  constructor(public wizard: WizardStateService, public cache: SearchCacheService) {}
}

// Each CheckoutWizardComponent gets its own WizardStateService,
// but all screens still share the root SearchCacheService.