Creates a debounced effect that triggers a callback after a signal's value has stabilized for the specified duration.

Uses Angular's toObservable and toSignal with RxJS debounceTime for proper debouncing. This approach is cleaner than manual setTimeout management and integrates well with Angular's signal-based reactivity.

Presentation

function createDebouncedEffect(
  source: Signal<T>,
  callback: (value: T) => void,
  options: { ms?: number | undefined; injector: Injector },
): Signal<T | undefined>;

Returns

Signal<T | undefined> -

A signal that emits the debounced value (can be ignored if only side effects are needed)

Parameters

Name	Type	Description
source	`Signal<T>`	The source signal to watch for changes
callback	`(value: T) => void`	Function to call with the debounced value
options	`{ ms?: number \| undefined; injector: Injector; }`	Configuration options

Example usage

// In a component or service
const searchInput = signal('');

createDebouncedEffect(
  searchInput,
  (value) => console.log('Debounced search:', value),
  { ms: 300, injector: this.injector }
);