docs: Add usage information to HttpInterceptorFn (#51236)

Simple doc addendum

PR Close #51236

packages/common/http/src/interceptor.ts

@@ -33,6 +33,7 @@ import {HttpEvent} from './response';
  * @publicApi
  *
  * @see [HTTP Guide](guide/http-intercept-requests-and-responses)
+ * @see {@link HttpInterceptorFn}
  *
  * @usageNotes
  *
@@ -85,8 +86,35 @@ export type HttpHandlerFn = (req: HttpRequest<unknown>) => Observable<HttpEvent<
  * request) is provided. Most interceptors will delegate to this function, but that is not required
  * (see `HttpHandlerFn` for more details).
  *
- * `HttpInterceptorFn`s have access to `inject()` via the `EnvironmentInjector` from which they were
- * configured.
+ * `HttpInterceptorFn`s are executed in an [injection context](/guide/dependency-injection-context).
+ * They have access to `inject()` via the `EnvironmentInjector` from which they were configured.
+ *
+ * @see [HTTP Guide](guide/http-intercept-requests-and-responses)
+ * @see {@link withInterceptors}
+ *
+ * @usageNotes
+ * Here is a noop interceptor that passes the request through without modifying it:
+ * ```typescript
+ * export const noopInterceptor: HttpInterceptorFn = (req: HttpRequest<unknown>, next:
+ * HttpHandlerFn) => {
+ *   return next(modifiedReq);
+ * };
+ * ```
+ *
+ * If you want to alter a request, clone it first and modify the clone before passing it to the
+ * `next()` handler function.
+ *
+ * Here is a basic interceptor that adds a bearer token to the headers
+ * ```typescript
+ * export const authenticationInterceptor: HttpInterceptorFn = (req: HttpRequest<unknown>, next:
+ * HttpHandlerFn) => {
+ *    const userToken = 'MY_TOKEN'; const modifiedReq = req.clone({
+ *      headers: req.headers.set('Authorization', `Bearer ${userToken}`),
+ *    });
+ *
+ *    return next(modifiedReq);
+ * };
+ * ```
  */
 export type HttpInterceptorFn = (req: HttpRequest<unknown>, next: HttpHandlerFn) =>
     Observable<HttpEvent<unknown>>;