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
}

Need a 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
}

Need a 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
}

Need a 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 });
  }
}

Need a hint?

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