Angular’s New debounced() Signal Explained

Every 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 Rx