Angular Services and Dependency Injection

Services are TypeScript classes that contain reusable logic — data fetching, state management, utility functions. Angular's DI system injects them wherever needed.

Create a Service

ng generate service user

// user.service.ts
import { Injectable, inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

export interface User {
  id:    number;
  name:  string;
  email: string;
}

@Injectable({ providedIn: 'root' }) // singleton across the whole app
export class UserService {
  private http = inject(HttpClient);
  private apiUrl = '/api/users';

  getAll(): Observable<User[]> {
    return this.http.get<User[]>(this.apiUrl);
  }

  getById(id: number): Observable<User> {
    return this.http.get<User>(`${this.apiUrl}/${id}`);
  }

  create(user: Omit<User, 'id'>): Observable<User> {
    return this.http.post<User>(this.apiUrl, user);
  }

  update(id: number, data: Partial<User>): Observable<User> {
    return this.http.put<User>(`${this.apiUrl}/${id}`, data);
  }

  delete(id: number): Observable<void> {
    return this.http.delete<void>(`${this.apiUrl}/${id}`);
  }
}

Inject the Service

// user-list.component.ts
import { Component, OnInit, inject } from '@angular/core';
import { UserService, User } from './user.service';

@Component({ selector: 'app-user-list', standalone: true, /* ... */ })
export class UserListComponent implements OnInit {
  private userService = inject(UserService);
  users: User[] = [];

  ngOnInit(): void {
    this.userService.getAll().subscribe(users => this.users = users);
  }
}