HTTP Interceptors in Angular

HTTP Interceptors in Angular — a practical guide to Angular HTTP interceptors with clear examples you can reuse in real projects.

Angular Tutorial Series (54/119). Prefer one article? Read the complete Angular tutorial.

Short description

Functional interceptors are the modern HttpClient API.

Interceptor idea

export const authInterceptor: HttpInterceptorFn = (req, next) => {
  const token = inject(AuthService).token;
  const authReq = token
    ? req.clone({ setHeaders: { Authorization: `Bearer ${token}` } })
    : req;
  return next(authReq);
};