Autocomplete Search Bar (Standalone Component)

Challenge summary

As the user types, show a dropdown of suggestions filtered from a dataset. Framework focus: Angular templates + standalone components, @Input/@Output, and RxJS/async pipe patterns.

What you'll practice

• Use a standalone Angular component as the root component.
• Show a dropdown of suggestions filtered by the current query (case-insensitive, substring match).
• Support mouse selection (mousedown on a suggestion sets the input value and closes dropdown).
• Support keyboard navigation: ArrowDown/ArrowUp moves active option, Enter selects, Escape closes.
• If query is empty/whitespace, dropdown is closed and no suggestions are shown.

What Premium unlocks

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