HTTP Request Options

Headers and Options

1import { HttpHeaders, HttpContext, HttpContextToken } from '@angular/common/http';
2
3// Custom headers
4const headers = new HttpHeaders()
5  .set('Content-Type', 'application/json')
6  .set('X-Custom-Header', 'CustomValue');
7
8this.http.post(url, data, { headers });
9
10// Context tokens for interceptors
11export const SKIP_AUTH = new HttpContextToken<boolean>(() => false);
12
13this.http.get(url, {
14  context: new HttpContext().set(SKIP_AUTH, true)
15});
16
17// Observing progress
18this.http.post(url, data, {
19  reportProgress: true,
20  observe: 'events'
21}).subscribe(event => {
22  if (event.type === HttpEventType.UploadProgress) {
23    const progress = Math.round(100 * event.loaded / event.total!);
24    console.log(\`Upload: \${progress}%\`);
25  }
26});

Response Types

1// Default - JSON body
2this.http.get<Samurai[]>(url);  // Observable<Samurai[]>
3
4// Full response
5this.http.get<Samurai[]>(url, { observe: 'response' });
6// Observable<HttpResponse<Samurai[]>>
7
8// Text
9this.http.get(url, { responseType: 'text' });  // Observable<string>
10
11// Blob (files)
12this.http.get(url, { responseType: 'blob' });  // Observable<Blob>
13
14// ArrayBuffer
15this.http.get(url, { responseType: 'arraybuffer' });  // Observable<ArrayBuffer>

File Upload

1uploadFile(file: File): Observable<UploadResponse> {
2  const formData = new FormData();
3  formData.append('file', file, file.name);
4
5  return this.http.post<UploadResponse>('/api/upload', formData, {
6    reportProgress: true,
7    observe: 'events'
8  }).pipe(
9    filter(event => event.type === HttpEventType.Response),
10    map(event => (event as HttpResponse<UploadResponse>).body!)
11  );
12}