Angular Debounced Search with Fake API (RxJS)

Challenge summary

Implement an Angular debounced search using RxJS. Use debounceTime + distinctUntilChanged + switchMap to cancel stale requests, and model loading, error, and empty states so the UI feels like a real search box.

What you'll practice

• Use a standalone Angular component as the root component.
• Render a search input where the user can type a query.
• Do NOT call the fake API on every keystroke; debounce input so the search runs 500ms after the user stops typing.
• Perform a fake async search call (e.g. in-memory array) that returns results based on the query text.
• Show a loading state while the debounced search request is in flight.

What Premium unlocks

Premium unlocks the runnable workspace, behavioral checks, implementation walkthrough, and edge-case discussion.