Chapter 7.1☕ 15 min read

HttpClient Setup & GET Requests

Angular's built-in HTTP client lets you talk to APIs, fetch data, and handle responses — all with Observables and TypeScript typing.

01What is HttpClient

HttpClient is Angular's built-in service for making HTTP requests. It wraps the browser's XMLHttpRequest under the hood and returns Observables — streams of data that you can transform, filter, and combine.

"HttpClient = Swiggy delivery boy — backend se data laake deta hai."

Key benefits over raw fetch():

TypeScript typing — generic types make response data type-safe
Interceptors — modify requests/responses globally
Error handling — built-in with catchError operator
Progress events — track upload/download progress
Automatic JSON parsing — no need to call .json()
Request cancellation — via RxJS takeUntil or AbortController

NOT fetch() — while fetch works in Angular, HttpClient has far better features: interceptors, typed responses, progress tracking, and seamless RxJS integration.

02Setup in app.config.ts

To use HttpClient, you must enable it in app.config.ts using provideHttpClient().

// app.config.ts
import { ApplicationConfig } from '@angular/core';
import { provideHttpClient } from '@angular/common/http';

export const appConfig: ApplicationConfig = {
  providers: [
    provideHttpClient(),
    // other providers...
  ]
};

"provideHttpClient = delivery app activate karna — bina iske order nahi dega."

Three ways to provide HttpClient depending on your needs:

// 1. Basic — no interceptors
provideHttpClient()

// 2. With class-based interceptors (legacy)
provideHttpClient(withInterceptorsFromDi())

// 3. With functional interceptors (new — recommended)
provideHttpClient(withInterceptors([authInterceptor, loggingInterceptor]))

Once provided, inject it in any component or service:

private http = inject(HttpClient);

03GET Request — Fetch Data

The most basic HTTP operation: fetch data from a URL.

import { Component, inject, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

interface Biryani {
  id: number;
  name: string;
  price: number;
  category: string;
}

@Component({...})
export class MenuComponent implements OnInit {
  private http = inject(HttpClient);
  biryanis: Biryani[] = [];

  ngOnInit() {
    this.http.get<Biryani[]>('/api/biryani')
      .subscribe(data => {
        this.biryanis = data;
      });
  }
}

"GET = menu maango — server dedo."

Key points:

<Biryani[]> — the generic type tells TypeScript what shape the response has
.subscribe() — the Observable is LAZY; it doesn't fire until you subscribe
HttpClient automatically parses JSON response — no .json() call needed

04GET with Parameters

Often you need to pass query parameters — filters, sorting, pagination.

Old way (Angular 16 and earlier):

import { HttpParams } from '@angular/common/http';

const params = new HttpParams()
  .set('category', 'chicken')
  .set('sort', 'price')
  .set('page', '1');

this.http.get<Biryani[]>('/api/biryani', { params })
  .subscribe(data => this.biryanis = data);

New way (Angular 17+ — object syntax):

this.http.get<Biryani[]>('/api/biryani', {
  params: {
    category: 'chicken',
    sort: 'price',
    page: '1'
  }
}).subscribe(data => this.biryanis = data);

"Parameters = filters — sirf chicken biryani chahiye, mutton nahi."

The object syntax is cleaner and more readable. Angular automatically encodes the parameters into URL query string format: /api/biryani?category=chicken&sort=price&page=1.

05Full URL vs Relative URL

You can use relative or full URLs when making HTTP requests.

Relative URL:

this.http.get('/api/biryani')
// Uses current origin: https://myapp.com/api/biryani

Full URL:

this.http.get('https://api.hyderabad.com/v2/biryani')
// Full URL — no origin calculation

"Relative = ghar se order, Full = dusre city se order."

Best practice: Use relative URLs in your services and add the base URL via an interceptor. This way:

You can change the API URL in one place
Different environments (dev/staging/prod) can use different base URLs
Your service code stays clean and portable

// Interceptor adds base URL
export const baseUrlInterceptor: HttpInterceptorFn = (req, next) => {
  const apiReq = req.clone({
    url: `https://api.hyderabad.com${req.url}`
  });
  return next(apiReq);
};

Key Takeaways

✅ HttpClient is Angular's built-in HTTP service — better than fetch() with interceptors, typing, and RxJS
✅ Enable with provideHttpClient() in app.config.ts — inject via inject(HttpClient)
✅ http.get<Type>(url) returns an Observable — must subscribe() to fire the request
✅ Pass query params via object syntax: { params: { key: 'value' } } (Angular 17+)
✅ Use relative URLs in services and add base URL via interceptor for environment flexibility

Previous6.6 — Resolvers 📋 All Chapters Next Chapter7.2 — POST PUT DELETE →