Interceptors in Angular - Adding custom headers in all http request.

Intercepting requests and responses

From Angualr Docs

"With interception, you declare interceptors that inspect and transform HTTP requests from your application to a server. The same interceptors can also inspect and transform a server's responses on their way back to the application. Multiple interceptors form a forward-and-backward chain of request/response handlers. Interceptors can perform a variety of implicit tasks, from authentication to logging, in a routine, standard way, for every HTTP request/response. Without interception, developers would have to implement these tasks explicitly for each HttpClient method call."

Multiple interceptors

Example : Adding custom headers in all http request.

Example code on github
Run the code in stackblitz

File Structure:

Code:

<app-comments></app-comments>

view raw app.component.html hosted with ❤ by GitHub

	import { NgModule } from '@angular/core';
	import { BrowserModule } from '@angular/platform-browser';
	import { FormsModule } from '@angular/forms';

	import { AppComponent } from './app.component';
	import { CommentsComponent } from './components/comments/comments.component';
	import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
	import { HeaderInterceptors } from './interceptors/header.interceptors';

	@NgModule({
	imports: [BrowserModule, FormsModule, HttpClientModule],
	declarations: [AppComponent, CommentsComponent],
	bootstrap: [AppComponent],
	providers: [
	{ provide: HTTP_INTERCEPTORS, useClass: HeaderInterceptors, multi: true }
	]
	})
	export class AppModule {}

view raw app.module.ts hosted with ❤ by GitHub

	<div class="list-group">
	<a href="#" class="list-group-item list-group-item-action" aria-current="true" *ngFor="let comment of comments">
	<div class="d-flex w-100 justify-content-between">
	<h5 class="mb-1">{{comment.name}}</h5>
	<small>{{comment.id}}</small>
	</div>
	<p class="mb-1">{{comment.body}}</p>
	<small>{{comment.email}}</small>
	</a>
	</div>

view raw comments.component.html hosted with ❤ by GitHub

	import { Component, OnInit } from '@angular/core';
	import { Comments } from '../../models/comments';
	import { JsonPlaceHolderService } from '../../services/jsonplaceholder.service';

	@Component({
	selector: 'app-comments',
	templateUrl: 'comments.component.html'
	})
	export class CommentsComponent implements OnInit {
	comments: Comments[];

	constructor(private jsonPlaceHolderService: JsonPlaceHolderService) {}
	ngOnInit(): void {
	this.jsonPlaceHolderService.getComments().subscribe(data => {
	console.log(data);
	this.comments = data;
	});
	}
	}

view raw comments.component.ts hosted with ❤ by GitHub

	export class Comments {
	postId: number;
	id: number;
	email: string;
	name: string;
	body: string;
	}

view raw comments.ts hosted with ❤ by GitHub

	import {
	HttpHandler,
	HttpInterceptor,
	HttpRequest
	} from '@angular/common/http';

	export class HeaderInterceptors implements HttpInterceptor {
	intercept(req: HttpRequest<any>, next: HttpHandler) {
	const clone = req.clone({
	setHeaders: {
	'x-header-key': 'x-header-value'
	}
	});

	return next.handle(clone);
	}
	}

view raw header.interceptors.ts hosted with ❤ by GitHub

	<!doctype html>
	<html lang="en">
	<head>
	<!-- Required meta tags -->
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<!-- Bootstrap CSS -->
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

	<title>Hello, world!</title>
	</head>
	<body>

	<my-app></my-app>

	<!-- Option 1: Bootstrap Bundle with Popper -->
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>


	</body>
	</html>

view raw index.html hosted with ❤ by GitHub

	import { HttpClient } from '@angular/common/http';
	import { Injectable } from '@angular/core';
	import { Comments } from '../models/comments';

	@Injectable({
	providedIn: 'root'
	})
	export class JsonPlaceHolderService {
	url: string = 'https://jsonplaceholder.typicode.com/';
	constructor(private httpClient: HttpClient) {}

	getComments() {
	return this.httpClient.get<Comments[]>(this.url + 'comments');
	}
	}

view raw jsonplaceholder.service.ts hosted with ❤ by GitHub

Output:

The header will be added in all http request.

murugan kannan

Search This Blog