# ngu-dropdown

> An Angular select that pages through the server as you scroll: search, virtual scrolling over the whole result set, and one fetchFn instead of loading logic in every component.

Version 0.1.3. Install with `npm install ngu-dropdown`. These files are the docs site (https://ngu-dropdown.netlify.app) as Markdown, including the source of every demo.

In a project that has ngu-dropdown installed, the same files for the installed version are in `node_modules/ngu-dropdown/docs/`.

## Start here

- [Notes for AI coding agents](https://ngu-dropdown.netlify.app/AGENTS.md): the rules that matter most and how to check generated code. Paste into a project's AGENTS.md, or run `ng g ngu-dropdown:ai`.

## Getting started

- [Introduction](https://ngu-dropdown.netlify.app/introduction.md): ngu-dropdown is a select for Angular that pages through your server as people scroll and search. You write one `fetchFn`; the dropdown handles paging, search, loading states and a virtual list.
- [Installation](https://ngu-dropdown.netlify.app/installation.md): Add ngu-dropdown to an Angular CLI project.
- [AI coding agents](https://ngu-dropdown.netlify.app/ai-agents.md): Give Claude Code, Codex, Cursor or Copilot the docs of the version you installed, so they wire up fetchFn, keys and labels correctly.
- [Changelog](https://ngu-dropdown.netlify.app/changelog.md): What changed in each release.

## Guides

- [Server data](https://ngu-dropdown.netlify.app/server-data.md): What `fetchFn` receives and returns, how filters reload the list, and how saved ids get their names.
- [Static options](https://ngu-dropdown.netlify.app/static-options.md): Pass the options yourself with `[options]`. Searching and scrolling then happen in the browser, with the same virtual list as server data.
- [Selection](https://ngu-dropdown.netlify.app/selection.md): One value or several, static option lists, and options that cannot be picked.
- [Events](https://ngu-dropdown.netlify.app/events.md): What each output reports and when, focus and blur for the whole control, and the DOM events the tag passes on.
- [Forms](https://ngu-dropdown.netlify.app/forms.md): The same component works with Signal Forms, reactive forms and ngModel.
- [Templates](https://ngu-dropdown.netlify.app/templates.md): Render rows and the chosen value your own way.
- [Text and translations](https://ngu-dropdown.netlify.app/messages.md): Replace any built-in text, for the whole app or one part of it, and switch language live.
- [Theming](https://ngu-dropdown.netlify.app/theming.md): Colors, corners and shadows come from CSS variables, shared with ngu-form.
- [Accessibility](https://ngu-dropdown.netlify.app/accessibility.md): Screen readers, keyboards, zoom, forced colors and reduced motion.

## API

- [<ngu-dropdown>](https://ngu-dropdown.netlify.app/api/dropdown.md): Inputs, outputs and methods of the component.
- [Config and types](https://ngu-dropdown.netlify.app/api/types.md): `provideNguDropdownConfig` and the types `fetchFn`, `lookupFn` and the templates use.