Setting headers and params in Angular - Mini Project: Build & Apply

Setting headers and params

📖 Scenario: You are building a simple Angular service to fetch user data from a server. The server requires a custom header for authentication and a query parameter to specify the user ID.

🎯 Goal: Create an Angular service method that sends an HTTP GET request with custom headers and query parameters.

📋 What You'll Learn

Create an Angular service with HttpClient injected

Add a custom header named Authorization with value Bearer token123

Add a query parameter named userId with value 42

Use HttpParams and HttpHeaders to set params and headers

Send the GET request to https://api.example.com/users

💡 Why This Matters

🌍 Real World

APIs often require headers for authentication and query parameters to filter data. This project shows how to set them in Angular HTTP requests.

💼 Career

Knowing how to set headers and params in Angular services is essential for frontend developers working with REST APIs.

1

Create the Angular service and import HttpClient

Create an Angular service class named UserService and inject HttpClient in the constructor. Import HttpClient from @angular/common/http.

Angular

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({ providedIn: 'root' })
export class UserService {
  constructor(private http: HttpClient) { }
  // Your code here
}

Hint

Remember to import HttpClient and add it to the constructor for dependency injection.

2

Create HttpHeaders and HttpParams variables

Inside the UserService class, create a variable named headers of type HttpHeaders with the header Authorization set to Bearer token123. Also create a variable named params of type HttpParams with the parameter userId set to 42. Import HttpHeaders and HttpParams from @angular/common/http.

Angular

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

@Injectable({ providedIn: 'root' })
export class UserService {
  constructor(private http: HttpClient) { }

  // Create headers and params variables here
  // Your code here
}

Hint

Use new HttpHeaders().set() and new HttpParams().set() to create headers and params.

3

Create a method to send GET request with headers and params

Add a method named getUserData in UserService that returns the result of this.http.get to URL 'https://api.example.com/users' with the headers and params you created.

Angular

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

@Injectable({ providedIn: 'root' })
export class UserService {
  constructor(private http: HttpClient) { }

  headers = new HttpHeaders().set('Authorization', 'Bearer token123');
  params = new HttpParams().set('userId', '42');

  // Add getUserData method here
  // Your code here
}

Hint

Use this.http.get with an options object containing headers and params.

4

Add return type and complete the service

Add the return type Observable<any> to the getUserData method. Import Observable from rxjs. This completes the Angular service for fetching user data with headers and params.

Angular

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class UserService {
  constructor(private http: HttpClient) { }

  headers = new HttpHeaders().set('Authorization', 'Bearer token123');
  params = new HttpParams().set('userId', '42');

  // Add return type Observable to getUserData
  getUserData() {
    return this.http.get('https://api.example.com/users', { headers: this.headers, params: this.params });
  }
}

Hint

Import Observable and add : Observable<any> after the method name.

Practice

1. What is the main purpose of setting headers in an Angular HTTP request?

easy

A. To change the URL of the request

B. To add extra information like authentication tokens or content type

C. To modify the HTTP method (GET, POST, etc.)

D. To handle the response data format

Solution

1. Step 1: Understand what headers do

   Headers carry extra info like tokens or content type in HTTP requests.

2. Step 2: Compare options

   Only To add extra information like authentication tokens or content type correctly describes headers' purpose; others describe different concepts.

3. Final Answer:

   To add extra information like authentication tokens or content type -> Option B

4. Quick Check:

   Headers add info = A [OK]

Hint: Headers carry extra info like tokens, not URL or method [OK]

Common Mistakes:

• Confusing headers with URL parameters
• Thinking headers change HTTP method
• Assuming headers handle response data

2. Which of the following is the correct way to add a header named Authorization with value Bearer token123 using Angular's HttpHeaders?

easy

A. new HttpHeaders().set('Authorization', 'Bearer token123')

B. new HttpHeaders('Authorization', 'Bearer token123')

C. HttpHeaders.append('Authorization', 'Bearer token123')

D. HttpHeaders.add('Authorization', 'Bearer token123')

Solution

1. Step 1: Recall HttpHeaders usage

   HttpHeaders is immutable; use set method to add headers.

2. Step 2: Check each option

   Only new HttpHeaders().set('Authorization', 'Bearer token123') uses new HttpHeaders().set() correctly; others are invalid syntax or methods.

3. Final Answer:

   new HttpHeaders().set('Authorization', 'Bearer token123') -> Option A

4. Quick Check:

   Use set() on new HttpHeaders() = B [OK]

Hint: Use new HttpHeaders().set() to add headers [OK]

Common Mistakes:

• Trying to pass headers directly to constructor
• Using non-existent methods like append or add
• Not creating a new HttpHeaders instance first

3. Given the code below, what will be the final URL requested?

const params = new HttpParams().set('page', '2').set('sort', 'name');
this.http.get('/api/items', { params }).subscribe();

medium

A. /api/items

B. /api/items?sort=name&page=2

C. /api/items?page=2

D. /api/items?page=2&sort=name

Solution

1. Step 1: Understand HttpParams chaining

   Each set returns a new HttpParams with added param; chaining adds both params.

2. Step 2: Determine param order

   Params appear in order set: page=2 then sort=name.

3. Final Answer:

   /api/items?page=2&sort=name -> Option D

4. Quick Check:

   Params chained = URL with both params in order [OK]

Hint: Chained set() adds params in order to URL [OK]

Common Mistakes:

• Assuming only last set param remains
• Ignoring param order in URL
• Forgetting to pass params in request options

4. Identify the error in this Angular HTTP request code:

const headers = new HttpHeaders();
headers.set('Content-Type', 'application/json');
this.http.post('/api/data', body, { headers }).subscribe();

medium

A. Headers must be plain object, not HttpHeaders instance

B. Missing import for HttpHeaders

C. HttpHeaders is immutable; set() does not change original headers

D. post() method requires params object

Solution

1. Step 1: Understand HttpHeaders immutability

   HttpHeaders methods like set return new instances; original is unchanged.

2. Step 2: Analyze code behavior

   Headers remain empty because set result is not assigned back.

3. Final Answer:

   HttpHeaders is immutable; set() does not change original headers -> Option C

4. Quick Check:

   HttpHeaders immutable = assign set() result [OK]

Hint: Assign set() result to headers variable [OK]

Common Mistakes:

• Not assigning set() result back
• Assuming headers object changes in place
• Confusing HttpHeaders with plain objects

5. You want to send a GET request with headers { 'Authorization': 'Bearer abc123' } and query params { 'filter': 'active', 'limit': '10' }. Which code correctly sets both headers and params in Angular?

hard

A. const headers = new HttpHeaders({ Authorization: 'Bearer abc123' });
const params = new HttpParams({ fromObject: { filter: 'active', limit: '10' } });
this.http.get('/api/users', { headers, params }).subscribe();

B. const headers = new HttpHeaders('Authorization', 'Bearer abc123');
const params = { filter: 'active', limit: '10' };
this.http.get('/api/users', { headers, params }).subscribe();

C. const headers = new HttpHeaders();
headers.set('Authorization', 'Bearer abc123');
const params = new HttpParams().set('filter', 'active').set('limit', '10');
this.http.get('/api/users', { headers, params }).subscribe();

D. const headers = new HttpHeaders().add('Authorization', 'Bearer abc123');
const params = new HttpParams().add('filter', 'active').add('limit', '10');
this.http.get('/api/users', { headers, params }).subscribe();

Solution

1. Step 1: Check header creation

   HttpHeaders constructor accepts a plain object like { Authorization: 'Bearer abc123' } for initial headers.

2. Step 2: Check params creation

   HttpParams constructor accepts { fromObject: { filter: 'active', limit: '10' } } to set multiple params at once.

3. Step 3: Verify request call

   Both headers and params are passed correctly in the request options { headers, params }.

4. Final Answer:

   Use HttpHeaders({ Authorization: 'Bearer abc123' }) and HttpParams({ fromObject: { filter: 'active', limit: '10' } }) -> Option A

5. Quick Check:

   Use constructors with objects for headers and params = C [OK]

Hint: Use HttpHeaders({}) and HttpParams({fromObject:{}}) for multiple values [OK]

Common Mistakes:

• Wrong constructor arguments or plain objects without proper instances
• Not assigning set() result due to immutability
• Using non-existent methods like add()