Angular Academy · Lesson

Functional Interceptors

Intercept requests with functional interceptors.

Functional Interceptors is a free Angular Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Angular Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

What is an interceptor

An HTTP interceptor sits between your app and the network. Every request and response passes through it, so you can add headers, log, transform, retry, or handle errors in one central place.

HttpInterceptorFn

Modern Angular uses functional interceptors: a HttpInterceptorFn receives the request and a next handler, and returns an observable of HTTP events.

import { HttpInterceptorFn } from '@angular/common/http';

export const loggingInterceptor: HttpInterceptorFn = (req, next) => {
  console.log('request to', req.url);
  return next(req);
};

Registering with withInterceptors

Provide interceptors via provideHttpClient(withInterceptors([...])) in your app config.

import { provideHttpClient, withInterceptors } from '@angular/common/http';

export const appConfig = {
  providers: [
    provideHttpClient(withInterceptors([loggingInterceptor]))
  ]
};

The next handler

Call next(req) to pass the request along the chain. Whatever you return becomes the request flow; not calling next means the request never fires.

Requests are immutable

HttpRequest is immutable. To change it you must clone() with your modifications and pass the clone to next.

export const interceptor: HttpInterceptorFn = (req, next) => {
  const cloned = req.clone({ setHeaders: { 'X-App': 'demo' } });
  return next(cloned);
};

Chaining multiple interceptors

Interceptors run in the order listed. Each wraps the next, so the array forms a pipeline: the first sees the request first and the response last.

withInterceptors([authInterceptor, loggingInterceptor, errorInterceptor])
// auth runs first on the way out

Using inject() inside interceptors

Functional interceptors run in an injection context, so you can inject() services directly.

import { inject } from '@angular/core';

export const authInterceptor: HttpInterceptorFn = (req, next) => {
  const token = inject(AuthService).token();
  return next(req); // use token to modify req
};

Inspecting the response

Tap into the returned stream to observe responses, e.g. for timing or logging.

import { tap } from 'rxjs';

export const timingInterceptor: HttpInterceptorFn = (req, next) => {
  const start = Date.now();
  return next(req).pipe(
    tap(() => console.log(req.url, Date.now() - start, 'ms'))
  );
};

Conditional interception

You can branch on the request URL or method to apply logic selectively.

export const apiOnly: HttpInterceptorFn = (req, next) => {
  if (!req.url.startsWith('/api')) return next(req);
  const cloned = req.clone({ setHeaders: { 'X-Api': '1' } });
  return next(cloned);
};

Functional vs class interceptors

Functional interceptors replace the older class-based HttpInterceptor. They are simpler, tree-shakable, easy to test, and registered without DI tokens.

DI-based interceptors interop

If you must use legacy class interceptors, withInterceptorsFromDi() bridges them. Prefer functional ones for new code.

provideHttpClient(
  withInterceptors([authInterceptor]),
  withInterceptorsFromDi()
)

Quick Check

Test your understanding of functional interceptors.

Recap: Functional Interceptors

Interceptors centralize cross-cutting HTTP logic.

HttpInterceptorFn: (req, next) => Observable.
Register with withInterceptors([...]).
Clone requests to modify them; call next to continue.
Use inject() for services.

Next: adding auth headers.

Frequently asked questions

Is the “Functional Interceptors” lesson free?

Yes — the full text of “Functional Interceptors” is free to read here on the web, and the Angular Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Angular Academy course, upgrade to CoddyKit PRO.

What will I learn in “Functional Interceptors”?

Intercept requests with functional interceptors. You practise Angular Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Angular Academy?

No prior experience is required. Angular Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Functional Interceptors” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Angular Academy lesson?

Yes. Every Angular Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to Angular Academy