Select

A select is a form control that allows users to select options from a list.

Import

Import the Select primitives from ng-primitives/select.

import {
  NgpSelect,
  NgpSelectDropdown,
  NgpSelectPortal,
  NgpSelectOption,
} from 'ng-primitives/select';

Usage

Assemble the select directives in your template.

<div ngpSelect>
  <div *ngpSelectPortal ngpSelectDropdown>
    <div ngpSelectOptionValue="option-1" ngpSelectOption>One</div>
    <div ngpSelectOptionValue="option-2" ngpSelectOption>Two</div>
    <div ngpSelectOptionValue="option-3" ngpSelectOption>Three</div>
  </div>
</div>

Reusable Component

Create a reusable component that uses the NgpSelect directive.

Schematics

Generate a reusable select component using the Angular CLI.

ng g ng-primitives:primitive select

Options

• path: The path at which to create the component file.
• prefix: The prefix to apply to the generated component selector.
• componentSuffix: The suffix to apply to the generated component class name.
• fileSuffix: The suffix to apply to the generated component file name. Defaults to component.
• exampleStyles: Whether to include example styles in the generated component file. Defaults to true.

Examples

Here are some additional examples of how to use the Select primitives.

Select Form Field

The select can be used within a form field for better integration with form controls.

Native Select

The native select is a simple wrapper around the native select element.

Native Select Form Field

The select automatically integrates with the form field primitives.

Select with Custom Container

The select component can be rendered inside a custom container. You can open DevTools and inspect the DOM to see it mounted within this container.

Virtualized Large Lists

When dealing with large datasets (thousands of items), you can use TanStack Virtual or other virtualization libraries to efficiently render only the visible options, improving performance:

Custom Option Behavior

Options without a value do not perform any selection by default. You can use this to implement custom behavior, such as clearing the selection. These options are still included in keyboard navigation.

API Reference

The following directives are available to import from the ng-primitives/select package:

NgpSelect

NgpSelectDropdown

NgpSelectPortal

NgpSelectOption

NgpNativeSelect

Data Attributes

Attribute	Description
data-hover	Applied when the element is hovered.
data-focus-visible	Applied when the element is focused.
data-disabled	Applied when the element is disabled.