HttpClient adalah cara Angular melakukan HTTP request.

Setup

import { provideHttpClient } from "@angular/common/http"

// di app.config.ts
export const appConfig = {
  providers: [provideHttpClient()]
}

GET Request

@Injectable({ providedIn: "root" })
export class ApiService {
  private http = inject(HttpClient)

  getUsers(): Observable<User[]> {
    return this.http.get<User[]>("/api/users")
  }
}

POST Request

createUser(user: User): Observable<User> {
  return this.http.post<User>("/api/users", user)
}

Di Komponen

export class UserListComponent {
  users = signal<User[]>([])
  private api = inject(ApiService)

  ngOnInit() {
    this.api.getUsers().subscribe(data => this.users.set(data))
  }
}

Error Handling

Request HTTP pasti suatu saat gagal — server down, koneksi putus, status 4xx/5xx. Tangani pakai operator catchError:

import { catchError, of } from "rxjs";

getUsers() {
  return this.http.get<User[]>("/api/users").pipe(
    catchError(err => {
      console.error("Gagal fetch users:", err);
      return of([]); // fallback: array kosong, UI tetap render
    })
  );
}

catchError bisa:

• Return Observable fallback (of([])) supaya stream tetap berjalan.
• throwError(() => ...) untuk melempar ulang setelah logging.

Tracking Loading & Error State

Pola umum: simpan loading, data, dan error sebagai signal terpisah.

users = signal<User[]>([]);
loading = signal(false);
error = signal<string | null>(null);

loadUsers() {
  this.loading.set(true);
  this.error.set(null);
  this.api.getUsers().subscribe({
    next: (data) => this.users.set(data),
    error: (err) => this.error.set(err.message),
    complete: () => this.loading.set(false),
  });
}

Template cukup @if (loading()), @if (error()), @for (u of users(); ...).