Angular Academy · Lesson

Functional Interceptors

Intercept requests with functional interceptors.

Lesson 1 of 413 steps

Functional Interceptors is a free Angular Academy lesson on CoddyKit. This is lesson 1 of 4. Any 3 lessons of this learning path are free to read in full — after that, CoddyKit PRO unlocks every lesson, plus hands-on practice with a built-in code editor and a 24/7 AI tutor. It is part of the Angular Academy learning path, and your progress syncs across the web and the CoddyKit app. The Angular Academy course includes 4 lessons in total.

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.

Answer it in the interactive lesson

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.

Free to start

Learn HTML with an AI tutor — free

Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.

Courses: 38
Lessons: 144

Start learning free View the full course

Frequently Asked Questions

Is the “Functional Interceptors” lesson free?

Yes — any 3 lessons of the Angular Academy learning path, including “Functional Interceptors”, are free to read in full here on the web. After that, CoddyKit PRO unlocks every lesson, plus interactive practice with a built-in code editor and a 24/7 AI tutor. The Angular Academy course includes 4 lessons in total.

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, so you can start here or from the beginning and move at your own pace. This is lesson 1 of 4.

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