🌐 HTTP Client

About This Feature

Angular's HttpClient service provides typed HTTP requests that return Observables. It's provided via provideHttpClient() in app.config.ts. Use withFetch() for SSR-compatible fetch-based requests.

• http.get<T>(url) — retrieve data
• http.post<T>(url, body) — create data
• http.put / http.patch / http.delete — update/remove data
• Add headers/params with HttpOptions
• Use interceptors for auth, error handling, logging

Demo uses the public JSONPlaceholder API.

Code Example

// Inject HttpClient (Angular 17 style)
private http = inject(HttpClient);

// GET request
this.http.get<Post[]>('https://api.example.com/posts')
  .subscribe({
    next: data  => { this.posts = data; },
    error: err  => { this.error = err.message; }
  });

// POST request
this.http.post<Post>('/api/posts', { title: 'Hello', body: '...' })
  .subscribe(res => console.log('Created:', res.id));

// Don't forget to add provideHttpClient() in app.config.ts:
export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideHttpClient(withFetch())  // ← required
  ]
};

Live Demo