How to Set Headers in HTTP Request Angular | Simple Guide

In Angular, you set headers in an HTTP request by creating an HttpHeaders object and passing it in the options of the HttpClient method like get or post. Use new HttpHeaders() to define headers and include them in the request options as { headers: yourHeaders }.

Syntax

To set headers in an Angular HTTP request, you use the HttpHeaders class to create header key-value pairs. Then, you pass these headers inside an options object to the HttpClient method.

• HttpHeaders: Used to define headers.
• HttpClient method: Methods like get, post, etc., accept an options object.
• Options object: Contains the headers property with your HttpHeaders instance.

typescript

const headers = new HttpHeaders({
  'Authorization': 'Bearer your-token',
  'Content-Type': 'application/json'
});

this.httpClient.get('your-api-url', { headers: headers });

Example

This example shows how to send a GET request with custom headers using Angular's HttpClient. It sets an Authorization header and a Content-Type header.

typescript

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

@Component({
  selector: 'app-root',
  template: `<h1>Check console for HTTP response</h1>`
})
export class AppComponent {
  constructor(private httpClient: HttpClient) {
    const headers = new HttpHeaders({
      'Authorization': 'Bearer my-secret-token',
      'Content-Type': 'application/json'
    });

    this.httpClient.get('https://jsonplaceholder.typicode.com/posts/1', { headers })
      .subscribe(response => {
        console.log('Response:', response);
      });
  }
}

Output

Response: { userId: 1, id: 1, title: '...', body: '...' }

Common Pitfalls

Common mistakes when setting headers in Angular HTTP requests include:

• Not importing HttpClientModule in your app module, causing HttpClient to be undefined.
• Passing headers as a plain object instead of an HttpHeaders instance.
• Mutating HttpHeaders directly instead of using its methods, since it is immutable.
• Forgetting to subscribe to the HTTP observable, so the request never runs.

typescript

/* Wrong way: Passing plain object as headers */
this.httpClient.get('url', { headers: { 'Authorization': 'token' } });

/* Right way: Use HttpHeaders instance */
const headers = new HttpHeaders().set('Authorization', 'token');
this.httpClient.get('url', { headers });

Quick Reference

Summary tips for setting headers in Angular HTTP requests:

• Always create headers using new HttpHeaders() or its methods like set().
• Pass headers inside the options object as { headers: yourHeaders }.
• Import HttpClientModule in your app module to use HttpClient.
• Subscribe to the HTTP observable to trigger the request.

Key Takeaways

Use HttpHeaders to create headers and pass them in the options object of HttpClient methods.

HttpHeaders is immutable; use its methods like set() to add or change headers.

Always import HttpClientModule in your Angular module to enable HttpClient.

Subscribe to the HTTP observable to execute the request and receive the response.

Do not pass plain objects as headers; always use HttpHeaders instances.