Angular’s New debounced() Signal Explained

E very Angular developer has faced it, an input that spams the backend with every single keystroke. The classic solution involves pulling in RxJS and using debounceTime , but it requires converting signals to observables and thinking in streams. As of Angular v22, there’s a new, cleaner way. The new experimental debounced() signal primitive lets you solve this problem in a more declarative, signal-native way. This post walks through the old way and then refactors it to the new, showing you exactly how to simplify your async data-fetching logic. The Problem: Too Many API Requests Let's start with a simple product search app: It looks fine on the surface, but the real story is in the Network tab: As you type a search term you can see a new HTTP request firing for each character typed. In a real-world application, this is a ton of unnecessary load on your backend and can create a jumpy, unpleasant user experience. This is the classic problem we need to solve. The Old Way: Debouncing with