# Table of Contents - [Angular Primitives](#angular-primitives) - [Angular Primitives](#angular-primitives) - [Angular Primitives](#angular-primitives) - [Angular Primitives](#angular-primitives) - [Angular Primitives](#angular-primitives) - [Angular Primitives](#angular-primitives) - [Angular Primitives](#angular-primitives) - [Angular Primitives](#angular-primitives) - [Angular Primitives](#angular-primitives) - [Angular Primitives](#angular-primitives) - [Angular Primitives](#angular-primitives) - [Angular Primitives](#angular-primitives) - [Angular Primitives](#angular-primitives) - [Angular Primitives](#angular-primitives) - [Angular Primitives](#angular-primitives) - [Angular Primitives](#angular-primitives) - [Angular Primitives](#angular-primitives) - [Angular Primitives](#angular-primitives) - [Angular Primitives](#angular-primitives) - [Angular Primitives](#angular-primitives) - [Angular Primitives](#angular-primitives) - [Angular Primitives](#angular-primitives) - [Angular Primitives](#angular-primitives) - [Angular Primitives](#angular-primitives) - [Angular Primitives](#angular-primitives) - [Angular Primitives](#angular-primitives) - [Angular Primitives](#angular-primitives) - [Angular Primitives](#angular-primitives) - [Angular Primitives](#angular-primitives) - [Angular Primitives](#angular-primitives) - [Angular Primitives](#angular-primitives) - [Angular Primitives](#angular-primitives) - [Angular Primitives](#angular-primitives) - [Angular Primitives](#angular-primitives) - [Angular Primitives](#angular-primitives) - [Angular Primitives](#angular-primitives) - [Angular Primitives](#angular-primitives) - [Angular Primitives](#angular-primitives) - [Angular Primitives](#angular-primitives) - [Angular Primitives](#angular-primitives) - [Angular Primitives](#angular-primitives) - [Angular Primitives](#angular-primitives) - [Angular Primitives](#angular-primitives) - [Angular Primitives](#angular-primitives) - [Angular Primitives](#angular-primitives) - [Angular Primitives](#angular-primitives) - [Angular Primitives](#angular-primitives) - [Angular Primitives](#angular-primitives) - [Angular Primitives](#angular-primitives) - [Angular Primitives](#angular-primitives) - [Angular Primitives](#angular-primitives) - [Angular Primitives](#angular-primitives) - [Angular Primitives](#angular-primitives) - [Angular Primitives](#angular-primitives) - [Angular Primitives](#angular-primitives) - [Angular Primitives](#angular-primitives) - [Angular Primitives](#angular-primitives) - [Angular Primitives](#angular-primitives) - [Angular Primitives](#angular-primitives) - [Angular Primitives](#angular-primitives) - [Angular Primitives](#angular-primitives) - [Angular Primitives](#angular-primitives) - [Angular Primitives](#angular-primitives) - [Angular Primitives](#angular-primitives) - [Angular Primitives](#angular-primitives) - [Angular Primitives](#angular-primitives) - [Angular Primitives](#angular-primitives) - [Angular Primitives](#angular-primitives) - [Angular Primitives](#angular-primitives) - [Angular Primitives](#angular-primitives) - [Angular Primitives](#angular-primitives) - [Angular Primitives](#angular-primitives) - [Angular Primitives](#angular-primitives) - [Angular Primitives](#angular-primitives) - [Angular Primitives](#angular-primitives) - [Angular Primitives](#angular-primitives) - [Angular Primitives](#angular-primitives) - [Angular Primitives](#angular-primitives) - [Angular Primitives](#angular-primitives) - [Angular Primitives](#angular-primitives) - [Angular Primitives](#angular-primitives) - [Angular Primitives](#angular-primitives) - [Angular Primitives](#angular-primitives) - [Angular Primitives](#angular-primitives) - [Angular Primitives](#angular-primitives) - [Angular Primitives](#angular-primitives) - [Angular Primitives](#angular-primitives) - [Angular Primitives](#angular-primitives) --- # Angular Primitives Getting Started --------------- * [Introduction](/getting-started/introduction) * [Get Started](/getting-started/get-started) * [Styling](/getting-started/styling) * [Usage](/getting-started/usage) Primitives ---------- * [Accordion](/primitives/accordion) * [Avatar](/primitives/avatar) * [Button](/primitives/button) * [Checkbox](/primitives/checkbox) * [Date Picker](/primitives/date-picker) * [Dialog](/primitives/dialog) * [File Upload](/primitives/file-upload) * [Form Field](/primitives/form-field) * [Icons](/primitives/icons) * [Input](/primitives/input) * [Listbox](/primitives/listbox) * [Menu](/primitives/menu) * [Pagination](/primitives/pagination) * [Popover](/primitives/popover) * [Progress](/primitives/progress) * [Radio](/primitives/radio) * [Resize](/primitives/resize) * [Roving Focus](/primitives/roving-focus) * [Search](/primitives/search) * [Select](/primitives/select) * [Separator](/primitives/separator) * [Slider](/primitives/slider) * [Switch](/primitives/switch) * [Tabs](/primitives/tabs) * [Textarea](/primitives/textarea) * [Toast](/primitives/toast) * [Toggle Group](/primitives/toggle-group) * [Toggle](/primitives/toggle) * [Toolbar](/primitives/toolbar) * [Tooltip](/primitives/tooltip) Interactions ------------ * [Focus Visible](/interactions/focus-visible) * [Focus](/interactions/focus) * [Hover](/interactions/hover) * [Move](/interactions/move) * [Press](/interactions/press) Utilities --------- * [Autofill](/utilities/autofill) * [Date Adapter](/utilities/date-adapter) * [Focus Trap](/utilities/focus-trap) * [Visually Hidden](/utilities/visually-hidden) Getting Started Introduction ============ Angular Primitives is a low-level headless UI component library with a focus on accessibility, customization, and developer experience. Whether you're building a robust design system from scratch or looking to enhance your existing one, our primitives are here to support you every step of the way. Key Features ------------ 1. **Accessibility First:** We believe that all users should have equal access to information and functionality. Our primitives are crafted with accessibility best practices, ensuring that your applications are inclusive and usable by everyone. 2. **Customization Made Easy:** We understand the importance of maintaining a consistent look and feel across your applications. With Angular Primitives, we don't provide any styles, you provide your own to seamlessly blend with your brand's identity and visual guidelines. 3. **Developer Experience:** We know developers value simplicity and efficiency. Our library is designed to be intuitive and straightforward, making it a breeze for you to integrate and work with our primitives in your Angular projects. We follow the best practices and standards to ensure the highest quality code and documentation. Versioning ---------- Angular Primitives follow [Semantic Versioning](https://semver.org/) . As a result you can expect the following: * **Patch releases** contain bug fixes and minor improvements. * **Minor releases** contain new features and improvements. * **Major releases** contain breaking changes. We release a new major version each time Angular releases a new major version. This ensures that Angular Primitives is always up-to-date with the latest Angular features and best practices. Compatibility ------------- Angular Primitives versions are compatible with the following Angular versions: | Angular Primitives | Angular | | --- | --- | | 0.1.0 - 0.18.0 | 18.0.x | | 0.19.0+ | 19.0.x | ### Version Support Policy Starting from v1.0.0, Angular Primitives will support the two latest major Angular versions. For example, when Angular 21 is released, Angular Primitives will support Angular 20 and 21. New major versions will be supported upon release (typically every six months), ensuring compatibility with the latest Angular features while allowing you to upgrade independently. Community --------- If you would like to stay up-to-date with the latest news and updates, or have any questions, feedback, or suggestions, we invite you to join our community on [Discord](https://discord.gg/NTdjc5r3gC) . Acknowledgements ---------------- Angular Primitives would not have been possible without inspiration from many of the great libraries that came before it. We would like to thank the following projects for their contributions to the open-source community: * [Angular CDK](https://material.angular.io/cdk) * [Radix UI](https://radix-ui.com/) * [Headless UI](https://headlessui.com/) * [React Aria](https://react-spectrum.adobe.com/react-aria/) Support ------- If you have any questions, feedback, or need help, feel free to reach out to us on [GitHub](https://github.com/ng-primitives/ng-primitives) . We're always happy to help and improve our library based on your feedback. If you're interested in contributing to Angular Primitives, please check out our [Contributing Guide](https://github.com/ng-primitives/ng-primitives/blob/main/CONTRIBUTING.md) . If you would like to support Angular Primitives to help us maintain and improve the library, please consider [sponsoring us](https://github.com/sponsors/ng-primitives) . Your support is greatly appreciated! On this page ------------ Copyright © 2025 Angular Primitives --- # Angular Primitives Getting Started --------------- * [Introduction](/getting-started/introduction) * [Get Started](/getting-started/get-started) * [Styling](/getting-started/styling) * [Usage](/getting-started/usage) Primitives ---------- * [Accordion](/primitives/accordion) * [Avatar](/primitives/avatar) * [Button](/primitives/button) * [Checkbox](/primitives/checkbox) * [Date Picker](/primitives/date-picker) * [Dialog](/primitives/dialog) * [File Upload](/primitives/file-upload) * [Form Field](/primitives/form-field) * [Icons](/primitives/icons) * [Input](/primitives/input) * [Listbox](/primitives/listbox) * [Menu](/primitives/menu) * [Pagination](/primitives/pagination) * [Popover](/primitives/popover) * [Progress](/primitives/progress) * [Radio](/primitives/radio) * [Resize](/primitives/resize) * [Roving Focus](/primitives/roving-focus) * [Search](/primitives/search) * [Select](/primitives/select) * [Separator](/primitives/separator) * [Slider](/primitives/slider) * [Switch](/primitives/switch) * [Tabs](/primitives/tabs) * [Textarea](/primitives/textarea) * [Toast](/primitives/toast) * [Toggle Group](/primitives/toggle-group) * [Toggle](/primitives/toggle) * [Toolbar](/primitives/toolbar) * [Tooltip](/primitives/tooltip) Interactions ------------ * [Focus Visible](/interactions/focus-visible) * [Focus](/interactions/focus) * [Hover](/interactions/hover) * [Move](/interactions/move) * [Press](/interactions/press) Utilities --------- * [Autofill](/utilities/autofill) * [Date Adapter](/utilities/date-adapter) * [Focus Trap](/utilities/focus-trap) * [Visually Hidden](/utilities/visually-hidden) Utilities Visually Hidden =============== Hide an element visually while keeping it present in the DOM. This is particularly useful for accessibility purposes, ensuring that screen readers and other assistive technologies can still interact with the hidden content. Import ------ Import the VisuallyHidden primitives from `ng-primitives/a11y`. import { NgpVisuallyHidden } from 'ng-primitives/a11y'; Usage ----- Assemble the visually-hidden directives in your template.
API Reference ------------- The following directives are available to import from the `ng-primitives/a11y` package: ### NgpVisuallyHidden Hide an element visually while keeping it present in the DOM. * Selector: `[ngpVisuallyHidden]` * Exported As: `ngpVisuallyHidden` Accessibility ------------- This directive can be useful for hiding content that is still important for screen readers and other assistive technologies. On this page ------------ Copyright © 2025 Angular Primitives --- # Angular Primitives Getting Started --------------- * [Introduction](/getting-started/introduction) * [Get Started](/getting-started/get-started) * [Styling](/getting-started/styling) * [Usage](/getting-started/usage) Primitives ---------- * [Accordion](/primitives/accordion) * [Avatar](/primitives/avatar) * [Button](/primitives/button) * [Checkbox](/primitives/checkbox) * [Date Picker](/primitives/date-picker) * [Dialog](/primitives/dialog) * [File Upload](/primitives/file-upload) * [Form Field](/primitives/form-field) * [Icons](/primitives/icons) * [Input](/primitives/input) * [Listbox](/primitives/listbox) * [Menu](/primitives/menu) * [Pagination](/primitives/pagination) * [Popover](/primitives/popover) * [Progress](/primitives/progress) * [Radio](/primitives/radio) * [Resize](/primitives/resize) * [Roving Focus](/primitives/roving-focus) * [Search](/primitives/search) * [Select](/primitives/select) * [Separator](/primitives/separator) * [Slider](/primitives/slider) * [Switch](/primitives/switch) * [Tabs](/primitives/tabs) * [Textarea](/primitives/textarea) * [Toast](/primitives/toast) * [Toggle Group](/primitives/toggle-group) * [Toggle](/primitives/toggle) * [Toolbar](/primitives/toolbar) * [Tooltip](/primitives/tooltip) Interactions ------------ * [Focus Visible](/interactions/focus-visible) * [Focus](/interactions/focus) * [Hover](/interactions/hover) * [Move](/interactions/move) * [Press](/interactions/press) Utilities --------- * [Autofill](/utilities/autofill) * [Date Adapter](/utilities/date-adapter) * [Focus Trap](/utilities/focus-trap) * [Visually Hidden](/utilities/visually-hidden) Primitives Tooltip ======= Display additional information on hover. Import ------ Import the Tooltip primitives from `ng-primitives/tooltip`. import { NgpTooltip } from 'ng-primitives/tooltip'; Usage ----- Assemble the tooltip directives in your template.
Tooltip content
 API Reference ------------- The following directives are available to import from the `ng-primitives/tooltip` package: ### NgpTooltip Apply the `ngpTooltip` directive to an element that represents the tooltip. This typically would be a `div` inside an `ng-template`. * Selector: `[ngpTooltip]` * Exported As: `ngpTooltip` ### NgpTooltipTrigger Apply the `ngpTooltipTrigger` directive to an element that triggers the tooltip to show. * Selector: `[ngpTooltipTrigger]` * Exported As: `ngpTooltipTrigger` Define the content of the tooltip. This should be reference to an \`ng-template\`. Define the open state. Event emitted when the state changes. Define the offset from the trigger element. Define the disabled state. Define the placement of the tooltip. Define the delay before the tooltip shows. Define the delay before the tooltip hides. Define if the tooltip should flip when it reaches the edge of the viewport. Define the container element for the tooltip. This is the document body by default. #### Data Attributes | Attribute | Description | | --- | --- | | `data-open` | Applied when the popover is open. | | `data-disabled` | Applied when the tooltip is disabled. | Global Configuration -------------------- You can configure the default options for all tooltips in your application by using the `provideTooltipConfig` function in a providers array. import { provideTooltipConfig } from 'ng-primitives/tooltip'; bootstrapApplication(AppComponent, { providers: [\ provideTooltipConfig({\ offset: 4,\ placement: 'top',\ showDelay: 0,\ hideDelay: 0,\ flip: true,\ container: document.body,\ }),\ ], }); ### NgpTooltipConfig Define the offset from the trigger element. Define the placement of the tooltip. Define the delay before the tooltip shows. Define the delay before the tooltip hides. Define if the tooltip should flip when it reaches the edge of the viewport. Define the container element for the tooltip. This is the document body by default. On this page ------------ Copyright © 2025 Angular Primitives --- # Angular Primitives Getting Started --------------- * [Introduction](/getting-started/introduction) * [Get Started](/getting-started/get-started) * [Styling](/getting-started/styling) * [Usage](/getting-started/usage) Primitives ---------- * [Accordion](/primitives/accordion) * [Avatar](/primitives/avatar) * [Button](/primitives/button) * [Checkbox](/primitives/checkbox) * [Date Picker](/primitives/date-picker) * [Dialog](/primitives/dialog) * [File Upload](/primitives/file-upload) * [Form Field](/primitives/form-field) * [Icons](/primitives/icons) * [Input](/primitives/input) * [Listbox](/primitives/listbox) * [Menu](/primitives/menu) * [Pagination](/primitives/pagination) * [Popover](/primitives/popover) * [Progress](/primitives/progress) * [Radio](/primitives/radio) * [Resize](/primitives/resize) * [Roving Focus](/primitives/roving-focus) * [Search](/primitives/search) * [Select](/primitives/select) * [Separator](/primitives/separator) * [Slider](/primitives/slider) * [Switch](/primitives/switch) * [Tabs](/primitives/tabs) * [Textarea](/primitives/textarea) * [Toast](/primitives/toast) * [Toggle Group](/primitives/toggle-group) * [Toggle](/primitives/toggle) * [Toolbar](/primitives/toolbar) * [Tooltip](/primitives/tooltip) Interactions ------------ * [Focus Visible](/interactions/focus-visible) * [Focus](/interactions/focus) * [Hover](/interactions/hover) * [Move](/interactions/move) * [Press](/interactions/press) Utilities --------- * [Autofill](/utilities/autofill) * [Date Adapter](/utilities/date-adapter) * [Focus Trap](/utilities/focus-trap) * [Visually Hidden](/utilities/visually-hidden) Primitives Toolbar ======= The Toolbar primitive is a container for grouping related controls. Import ------ Import the Toolbar primitives from `ng-primitives/toolbar`. import { NgpToolbar } from 'ng-primitives/toolbar'; Usage ----- Assemble the toolbar directives in your template.
API Reference ------------- The following directives are available to import from the `ng-primitives/toolbar` package: ### NgpToolbar * Selector: `[ngpToolbar]` * Exported As: `ngpToolbar` The orientation of the toolbar. #### Data Attributes The following data attributes are applied to the `ngpToolbar` directive: | Attribute | Description | Value | | --- | --- | --- | | `data-orientation` | The orientation of the toolbar. | `horizontal` \| `vertical` | Accessibility ------------- Adheres to the [WAI-ARIA Toolbar Design Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/toolbar) . ### Keyboard Interaction * Tab - Moves focus to the first interactive element in the toolbar. * Arrow Down - Moves focus to the next interactive element (vertical orientation). * Arrow Up - Moves focus to the previous interactive element (vertical orientation). * Arrow Right - Moves focus to the next interactive element (horizontal orientation). * Arrow Left - Moves focus to the previous interactive element (horizontal orientation). * Home - Moves focus to the first interactive element in the toolbar. * End - Moves focus to the last interactive element in the toolbar. On this page ------------ Copyright © 2025 Angular Primitives --- # Angular Primitives Getting Started --------------- * [Introduction](/getting-started/introduction) * [Get Started](/getting-started/get-started) * [Styling](/getting-started/styling) * [Usage](/getting-started/usage) Primitives ---------- * [Accordion](/primitives/accordion) * [Avatar](/primitives/avatar) * [Button](/primitives/button) * [Checkbox](/primitives/checkbox) * [Date Picker](/primitives/date-picker) * [Dialog](/primitives/dialog) * [File Upload](/primitives/file-upload) * [Form Field](/primitives/form-field) * [Icons](/primitives/icons) * [Input](/primitives/input) * [Listbox](/primitives/listbox) * [Menu](/primitives/menu) * [Pagination](/primitives/pagination) * [Popover](/primitives/popover) * [Progress](/primitives/progress) * [Radio](/primitives/radio) * [Resize](/primitives/resize) * [Roving Focus](/primitives/roving-focus) * [Search](/primitives/search) * [Select](/primitives/select) * [Separator](/primitives/separator) * [Slider](/primitives/slider) * [Switch](/primitives/switch) * [Tabs](/primitives/tabs) * [Textarea](/primitives/textarea) * [Toast](/primitives/toast) * [Toggle Group](/primitives/toggle-group) * [Toggle](/primitives/toggle) * [Toolbar](/primitives/toolbar) * [Tooltip](/primitives/tooltip) Interactions ------------ * [Focus Visible](/interactions/focus-visible) * [Focus](/interactions/focus) * [Hover](/interactions/hover) * [Move](/interactions/move) * [Press](/interactions/press) Utilities --------- * [Autofill](/utilities/autofill) * [Date Adapter](/utilities/date-adapter) * [Focus Trap](/utilities/focus-trap) * [Visually Hidden](/utilities/visually-hidden) Utilities Focus Trap ========== The Focus Trap utility is a directive that traps focus within a specified element. This is useful for modals, dropdowns, and other components that require focus to be contained within a specific area. Import ------ Import the FocusTrap primitives from `ng-primitives/focus-trap`. import { NgpFocusTrap } from 'ng-primitives/focus-trap'; Usage ----- Assemble the focus-trap directives in your template.
API Reference ------------- The following directives are available to import from the `ng-primitives/focus-trap` package: ### NgpFocusTrap The `NgpFocusTrap` directive traps focus within the host element. * Selector: `[ngpFocusTrap]` * Exported As: `ngpFocusTrap` Disables the focus trap. #### Data Attributes | Attribute | Description | | --- | --- | | `data-focus-trap` | Applied when focus is trapped. | Accessibility ------------- Adheres to the [WAI-ARIA design pattern](https://www.w3.org/TR/UNDERSTANDING-WCAG20/keyboard-operation-trapping.html) . On this page ------------ Copyright © 2025 Angular Primitives --- # Angular Primitives Getting Started --------------- * [Introduction](/getting-started/introduction) * [Get Started](/getting-started/get-started) * [Styling](/getting-started/styling) * [Usage](/getting-started/usage) Primitives ---------- * [Accordion](/primitives/accordion) * [Avatar](/primitives/avatar) * [Button](/primitives/button) * [Checkbox](/primitives/checkbox) * [Date Picker](/primitives/date-picker) * [Dialog](/primitives/dialog) * [File Upload](/primitives/file-upload) * [Form Field](/primitives/form-field) * [Icons](/primitives/icons) * [Input](/primitives/input) * [Listbox](/primitives/listbox) * [Menu](/primitives/menu) * [Pagination](/primitives/pagination) * [Popover](/primitives/popover) * [Progress](/primitives/progress) * [Radio](/primitives/radio) * [Resize](/primitives/resize) * [Roving Focus](/primitives/roving-focus) * [Search](/primitives/search) * [Select](/primitives/select) * [Separator](/primitives/separator) * [Slider](/primitives/slider) * [Switch](/primitives/switch) * [Tabs](/primitives/tabs) * [Textarea](/primitives/textarea) * [Toast](/primitives/toast) * [Toggle Group](/primitives/toggle-group) * [Toggle](/primitives/toggle) * [Toolbar](/primitives/toolbar) * [Tooltip](/primitives/tooltip) Interactions ------------ * [Focus Visible](/interactions/focus-visible) * [Focus](/interactions/focus) * [Hover](/interactions/hover) * [Move](/interactions/move) * [Press](/interactions/press) Utilities --------- * [Autofill](/utilities/autofill) * [Date Adapter](/utilities/date-adapter) * [Focus Trap](/utilities/focus-trap) * [Visually Hidden](/utilities/visually-hidden) Utilities Date Adapter ============ The Date Adapter is an abstraction layer that allows components to use date objects from any date library, ensuring compatibility and easy integration. Import ------ Import the DateAdapter from `ng-primitives/date-time`. import { NgpLuxonDateAdapter } from 'ng-primitives/date-time-lucon'; import { NgpDateAdapter, NgpNativeDateAdapter } from 'ng-primitives/date-time-luxon'; Usage ----- Angular Primitives ships with two date adapters out of the box: `NgpNativeDateAdapter` and `NgpLuxonDateAdapter`. The `NgpNativeDateAdapter` uses the native JavaScript `Date` object, while the `NgpLuxonDateAdapter` uses the Luxon date library. To use a date adapter, you need to provide it to Angular's dependency injection system. This can be done once at the root of your application or at a component/module level. bootstrapApplication(AppComponent, { providers: [provideDateAdapter(NgpLuxonDateAdapter)], }); If no date adapter is provided, the `NgpNativeDateAdapter` will be used by default. Should you need to use a different date library, you can create your own date adapter by implementing the `NgpDateAdapter` interface. Should you wish to use the adapter in a component, you can inject it into a component. import { Component } from '@angular/core'; import { DateTime } from 'luxon'; import { injectDateAdapter } from 'ng-primitives/date-time'; @Component({ selector: 'app-root', template: ` ... `, }) export class AppComponent { private readonly dateAdapter = injectDateAdapter(); } API Reference ------------- All date adapters must implement the `NgpDateAdapter` interface. interface NgpDateAdapter { /** * Create a new date time object. */ create(values: NgpDateUnits): T; /** * Create a new date with the current date and time. */ now(): T; /** * Set the year of the date time object based on a duration. */ set(date: T, values: NgpDateUnits): T; /** * Add a duration to the date time object. */ add(date: T, duration: NgpDuration): T; /** * Subtract a duration from the date time object. */ subtract(date: T, duration: NgpDuration): T; /** * Compare two date time objects. */ compare(a: T, b: T): number; /** * Determine if two date time objects are equal. */ isEqual(a: T, b: T): boolean; /** * Determine if a date time object is before another. */ isBefore(a: T, b: T): boolean; /** * Determine if a date time object is after another. */ isAfter(a: T, b: T): boolean; /** * Determine if two date objects are on the same day. */ isSameDay(a: T, b: T): boolean; /** * Determine if two date objects are on the same month. */ isSameMonth(a: T, b: T): boolean; /** * Determine if two date objects are on the same year. */ isSameYear(a: T, b: T): boolean; /** * Get the year. */ getYear(date: T): number; /** * Get the month. */ getMonth(date: T): number; /** * Get the date. */ getDate(date: T): number; /** * Get the day. */ getDay(date: T): number; /** * Get the hours. */ getHours(date: T): number; /** * Get the minutes. */ getMinutes(date: T): number; /** * Get the seconds. */ getSeconds(date: T): number; /** * Get the milliseconds. */ getMilliseconds(date: T): number; /** * Get the first day of the month. */ startOfMonth(date: T): T; /** * Get the last day of the month. */ endOfMonth(date: T): T; /** * Get the start of the day. */ startOfDay(date: T): T; /** * Get the end of the day. */ endOfDay(date: T): T; } On this page ------------ Copyright © 2025 Angular Primitives --- # Angular Primitives Getting Started --------------- * [Introduction](/getting-started/introduction) * [Get Started](/getting-started/get-started) * [Styling](/getting-started/styling) * [Usage](/getting-started/usage) Primitives ---------- * [Accordion](/primitives/accordion) * [Avatar](/primitives/avatar) * [Button](/primitives/button) * [Checkbox](/primitives/checkbox) * [Date Picker](/primitives/date-picker) * [Dialog](/primitives/dialog) * [File Upload](/primitives/file-upload) * [Form Field](/primitives/form-field) * [Icons](/primitives/icons) * [Input](/primitives/input) * [Listbox](/primitives/listbox) * [Menu](/primitives/menu) * [Pagination](/primitives/pagination) * [Popover](/primitives/popover) * [Progress](/primitives/progress) * [Radio](/primitives/radio) * [Resize](/primitives/resize) * [Roving Focus](/primitives/roving-focus) * [Search](/primitives/search) * [Select](/primitives/select) * [Separator](/primitives/separator) * [Slider](/primitives/slider) * [Switch](/primitives/switch) * [Tabs](/primitives/tabs) * [Textarea](/primitives/textarea) * [Toast](/primitives/toast) * [Toggle Group](/primitives/toggle-group) * [Toggle](/primitives/toggle) * [Toolbar](/primitives/toolbar) * [Tooltip](/primitives/tooltip) Interactions ------------ * [Focus Visible](/interactions/focus-visible) * [Focus](/interactions/focus) * [Hover](/interactions/hover) * [Move](/interactions/move) * [Press](/interactions/press) Utilities --------- * [Autofill](/utilities/autofill) * [Date Adapter](/utilities/date-adapter) * [Focus Trap](/utilities/focus-trap) * [Visually Hidden](/utilities/visually-hidden) Primitives Slider ====== Select a value within a range. Import ------ Import the Slider primitives from `ng-primitives/slider`. import { NgpSlider, NgpSliderTrack, NgpSliderRange, NgpSliderThumb } from 'ng-primitives/slider'; Usage ----- Assemble the slider directives in your template.
Reusable Component ------------------ Create a reusable component that uses the slider directives. Schematics ---------- Generate a reusable slider component using the Angular CLI. ng g ng-primitives:primitive slider ### 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 Slider primitives. ### Slider Form Field The slider automatically integrates with the form field primitives. API Reference ------------- The following directives are available to import from the `ng-primitives/slider` package: ### NgpSlider Apply the `ngpSlider` directive to an element that represents the slider and contains the track, range, and thumb. * Selector: `[ngpSlider]` * Exported As: `ngpSlider` * Host Directives: [NgpFormControl](/primitives/form-field) Define the selected value. Define the minimum value. Define the maximum value. Define the step value. Define the orientation. #### Data Attributes The following data attributes are available to style the slider: | Attribute | Description | Value | | --- | --- | --- | | `data-disabled` | Applied when the slider is disabled. | `-` | | `data-orientation` | The orientation of the slider. | `horizontal` \| `vertical` | ### NgpSliderTrack Apply the `ngpSliderTrack` directive to an element that represents the track of the slider. * Selector: `[ngpSliderTrack]` * Exported As: `ngpSliderTrack` #### Data Attributes The following data attributes are available to style the slider track: | Attribute | Description | Value | | --- | --- | --- | | `data-disabled` | Applied when the slider is disabled. | `-` | | `data-orientation` | The orientation of the slider. | `horizontal` \| `vertical` | ### NgpSliderRange Apply the `ngpSliderRange` directive to an element that represents the range of the slider. * Selector: `[ngpSliderRange]` * Exported As: `ngpSliderRange` #### Data Attributes The following data attributes are available to style the slider range: | Attribute | Description | Value | | --- | --- | --- | | `data-disabled` | Applied when the slider is disabled. | `-` | | `data-orientation` | The orientation of the slider. | `horizontal` \| `vertical` | ### NgpSliderThumb Apply the `ngpSliderThumb` directive to an element that represents the thumb of the slider. * Selector: `[ngpSliderThumb]` * Exported As: `ngpSliderThumb` * Host Directives: [NgpHover](/interactions/hover) , [NgpFocusVisible](/interactions/focus-visible) , [NgpPress](/interactions/press) #### Data Attributes The following data attributes are available to style the thumb: | Attribute | Description | Value | | --- | --- | --- | | `data-orientation` | The orientation of the slider. | `horizontal` \| `vertical` | | `data-disabled` | Applied when the slider is disabled. | `-` | | `data-hover` | Applied when the slider thumb is hovered. | `-` | | `data-focus-visible` | Applied when the slider thumb is focused. | `-` | | `data-press` | Applied when the slider thumb is pressed. | `-` | Accessibility ------------- Adheres to the [Slider WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/slider-multithumb) . ### Keyboard Interactions * Left Arrow or Down Arrow: Decrease the value by the step. * Right Arrow or Up Arrow: Increase the value by the step. * Left Arrow or Down Arrow + Shift: Decrease the value by the step by a larger amount. * Right Arrow or Up Arrow + Shift: Increase the value by the step by a larger amount. * Home: Set the value to the minimum. * End: Set the value to the maximum. On this page ------------ Copyright © 2025 Angular Primitives --- # Angular Primitives Getting Started --------------- * [Introduction](/getting-started/introduction) * [Get Started](/getting-started/get-started) * [Styling](/getting-started/styling) * [Usage](/getting-started/usage) Primitives ---------- * [Accordion](/primitives/accordion) * [Avatar](/primitives/avatar) * [Button](/primitives/button) * [Checkbox](/primitives/checkbox) * [Date Picker](/primitives/date-picker) * [Dialog](/primitives/dialog) * [File Upload](/primitives/file-upload) * [Form Field](/primitives/form-field) * [Icons](/primitives/icons) * [Input](/primitives/input) * [Listbox](/primitives/listbox) * [Menu](/primitives/menu) * [Pagination](/primitives/pagination) * [Popover](/primitives/popover) * [Progress](/primitives/progress) * [Radio](/primitives/radio) * [Resize](/primitives/resize) * [Roving Focus](/primitives/roving-focus) * [Search](/primitives/search) * [Select](/primitives/select) * [Separator](/primitives/separator) * [Slider](/primitives/slider) * [Switch](/primitives/switch) * [Tabs](/primitives/tabs) * [Textarea](/primitives/textarea) * [Toast](/primitives/toast) * [Toggle Group](/primitives/toggle-group) * [Toggle](/primitives/toggle) * [Toolbar](/primitives/toolbar) * [Tooltip](/primitives/tooltip) Interactions ------------ * [Focus Visible](/interactions/focus-visible) * [Focus](/interactions/focus) * [Hover](/interactions/hover) * [Move](/interactions/move) * [Press](/interactions/press) Utilities --------- * [Autofill](/utilities/autofill) * [Date Adapter](/utilities/date-adapter) * [Focus Trap](/utilities/focus-trap) * [Visually Hidden](/utilities/visually-hidden) Primitives Toggle ====== Toggle a button on and off. Import ------ Import the Toggle primitives from `ng-primitives/toggle`. import { NgpToggle } from 'ng-primitives/toggle'; Usage ----- Assemble the toggle directives in your template. Reusable Component ------------------ Create a reusable component that uses the toggle directives. Schematics ---------- Generate a reusable toggle component using the Angular CLI. ng g ng-primitives:primitive toggle ### 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`. API Reference ------------- The following directives are available to import from the `ng-primitives/toggle` package: ### NgpToggle Apply the `ngpToggle` directive to an element to manage the toggle state. This must be applied to a `button` element. * Selector: `[ngpToggle]` * Exported As: `ngpToggle` Define the selected state. Define the disabled state. Event emitted when the selected state changes. #### Data Attributes The following data attributes are applied to the `ngpToggle` directive: | Attribute | Description | | --- | --- | | `data-selected` | Applied when the toggle is selected. | | `data-disabled` | Applied when the toggle is disabled. | Accessibility ------------- ### Keyboard Interaction * Space: Toggles the selected state. * Enter: Toggles the selected state. On this page ------------ Copyright © 2025 Angular Primitives --- # Angular Primitives Getting Started --------------- * [Introduction](/getting-started/introduction) * [Get Started](/getting-started/get-started) * [Styling](/getting-started/styling) * [Usage](/getting-started/usage) Primitives ---------- * [Accordion](/primitives/accordion) * [Avatar](/primitives/avatar) * [Button](/primitives/button) * [Checkbox](/primitives/checkbox) * [Date Picker](/primitives/date-picker) * [Dialog](/primitives/dialog) * [File Upload](/primitives/file-upload) * [Form Field](/primitives/form-field) * [Icons](/primitives/icons) * [Input](/primitives/input) * [Listbox](/primitives/listbox) * [Menu](/primitives/menu) * [Pagination](/primitives/pagination) * [Popover](/primitives/popover) * [Progress](/primitives/progress) * [Radio](/primitives/radio) * [Resize](/primitives/resize) * [Roving Focus](/primitives/roving-focus) * [Search](/primitives/search) * [Select](/primitives/select) * [Separator](/primitives/separator) * [Slider](/primitives/slider) * [Switch](/primitives/switch) * [Tabs](/primitives/tabs) * [Textarea](/primitives/textarea) * [Toast](/primitives/toast) * [Toggle Group](/primitives/toggle-group) * [Toggle](/primitives/toggle) * [Toolbar](/primitives/toolbar) * [Tooltip](/primitives/tooltip) Interactions ------------ * [Focus Visible](/interactions/focus-visible) * [Focus](/interactions/focus) * [Hover](/interactions/hover) * [Move](/interactions/move) * [Press](/interactions/press) Utilities --------- * [Autofill](/utilities/autofill) * [Date Adapter](/utilities/date-adapter) * [Focus Trap](/utilities/focus-trap) * [Visually Hidden](/utilities/visually-hidden) Primitives Toast ===== A toast is a non-modal, unobtrusive window element used to display brief, auto-expiring messages to the user. Import ------ Import the Toast primitives from `ng-primitives/toast`. import { NgpToast } from 'ng-primitives/toast'; Usage ----- Assemble the toast directives in your template.
...
 To show a toast, call the `show` method on the `ngpToast` directive. API Reference ------------- The following directives are available to import from the `ng-primitives/toast` package: The duration in milliseconds that the toast will be visible. The position of the toast. The gravity of the toast. This will determine the location the toast will slide in and out. Whether the toast should stop the timer when hovered over. Once the mouse leaves the toast, the timer will restart. The \`aria-live\` attribute value for the toast. This will determine how the toast will be read by screen readers. ### NgpToast * Selector: `[ngpToast]` * Exported As: `ngpToast` #### Data Attributes The following data attributes are applied to the first child of the `ngpToast` ng-template: | Attribute | Description | Value | | --- | --- | --- | | `data-toast` | The visible state of the toast. | `visible` \| `hidden` | | `data-position` | The position of the toast. | `start` \| `center` \| `end` | | `data-gravity` | The gravity of the toast. | `top` \| `bottom` | Global Configuration -------------------- You can configure the default options for all toasts in your application by using the `provideToastConfig` function in a providers array. import { provideToastConfig } from 'ng-primitives/toast'; bootstrapApplication(AppComponent, { providers: [\ provideToastConfig({\ duration: 5000,\ position: 'center',\ gravity: 'top',\ stopOnHover: false,\ ariaLive: 'assertive',\ gap: 16,\ }),\ ], }); ### NgpToastConfig The duration in milliseconds that the toast will be visible. The position of the toast. The gravity of the toast. This will determine the location the toast will slide in and out. Whether the toast should stop the timer when hovered over. Once the mouse leaves the toast, the timer will restart. The \`aria-live\` attribute value for the toast. This will determine how the toast will be read by screen readers. The gap between each toast. On this page ------------ Copyright © 2025 Angular Primitives --- # Angular Primitives Getting Started --------------- * [Introduction](/getting-started/introduction) * [Get Started](/getting-started/get-started) * [Styling](/getting-started/styling) * [Usage](/getting-started/usage) Primitives ---------- * [Accordion](/primitives/accordion) * [Avatar](/primitives/avatar) * [Button](/primitives/button) * [Checkbox](/primitives/checkbox) * [Date Picker](/primitives/date-picker) * [Dialog](/primitives/dialog) * [File Upload](/primitives/file-upload) * [Form Field](/primitives/form-field) * [Icons](/primitives/icons) * [Input](/primitives/input) * [Listbox](/primitives/listbox) * [Menu](/primitives/menu) * [Pagination](/primitives/pagination) * [Popover](/primitives/popover) * [Progress](/primitives/progress) * [Radio](/primitives/radio) * [Resize](/primitives/resize) * [Roving Focus](/primitives/roving-focus) * [Search](/primitives/search) * [Select](/primitives/select) * [Separator](/primitives/separator) * [Slider](/primitives/slider) * [Switch](/primitives/switch) * [Tabs](/primitives/tabs) * [Textarea](/primitives/textarea) * [Toast](/primitives/toast) * [Toggle Group](/primitives/toggle-group) * [Toggle](/primitives/toggle) * [Toolbar](/primitives/toolbar) * [Tooltip](/primitives/tooltip) Interactions ------------ * [Focus Visible](/interactions/focus-visible) * [Focus](/interactions/focus) * [Hover](/interactions/hover) * [Move](/interactions/move) * [Press](/interactions/press) Utilities --------- * [Autofill](/utilities/autofill) * [Date Adapter](/utilities/date-adapter) * [Focus Trap](/utilities/focus-trap) * [Visually Hidden](/utilities/visually-hidden) Primitives Textarea ======== The textarea primitive can be used to enhance the accessibility of a textarea element and provide consistent interaction handling for hover, focus and press states. Import ------ Import the Textarea primitives from `ng-primitives/textarea`. import { NgpTextarea } from 'ng-primitives/textarea'; Usage ----- Assemble the textarea directives in your template. Reusable Component ------------------ Create an textarea component that uses the `NgpTextarea` directive. Schematics ---------- Generate a reusable textarea component using the Angular CLI. ng g ng-primitives:primitive textarea ### 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 Textarea primitive. ### Textarea Form Field The textarea automatically integrates with the form field primitives. API Reference ------------- The following directives are available to import from the `ng-primitives/textarea` package: ### NgpTextarea * Selector: `[ngpTextarea]` * Exported As: `ngpTextarea` * Host Directives: [NgpFormControl](/primitives/form-field) , [NgpHover](/interactions/hover) , [NgpFocus](/interactions/focus) , [NgpPress](/interactions/press) #### Data Attributes The following data attributes are applied to the `ngpTextarea` directive: | Attribute | Description | | --- | --- | | `data-hover` | Applied when the element is hovered. | | `data-focus` | Applied when the element is focused. | | `data-disabled` | Applied when the element is disabled. | On this page ------------ Copyright © 2025 Angular Primitives --- # Angular Primitives Getting Started --------------- * [Introduction](/getting-started/introduction) * [Get Started](/getting-started/get-started) * [Styling](/getting-started/styling) * [Usage](/getting-started/usage) Primitives ---------- * [Accordion](/primitives/accordion) * [Avatar](/primitives/avatar) * [Button](/primitives/button) * [Checkbox](/primitives/checkbox) * [Date Picker](/primitives/date-picker) * [Dialog](/primitives/dialog) * [File Upload](/primitives/file-upload) * [Form Field](/primitives/form-field) * [Icons](/primitives/icons) * [Input](/primitives/input) * [Listbox](/primitives/listbox) * [Menu](/primitives/menu) * [Pagination](/primitives/pagination) * [Popover](/primitives/popover) * [Progress](/primitives/progress) * [Radio](/primitives/radio) * [Resize](/primitives/resize) * [Roving Focus](/primitives/roving-focus) * [Search](/primitives/search) * [Select](/primitives/select) * [Separator](/primitives/separator) * [Slider](/primitives/slider) * [Switch](/primitives/switch) * [Tabs](/primitives/tabs) * [Textarea](/primitives/textarea) * [Toast](/primitives/toast) * [Toggle Group](/primitives/toggle-group) * [Toggle](/primitives/toggle) * [Toolbar](/primitives/toolbar) * [Tooltip](/primitives/tooltip) Interactions ------------ * [Focus Visible](/interactions/focus-visible) * [Focus](/interactions/focus) * [Hover](/interactions/hover) * [Move](/interactions/move) * [Press](/interactions/press) Utilities --------- * [Autofill](/utilities/autofill) * [Date Adapter](/utilities/date-adapter) * [Focus Trap](/utilities/focus-trap) * [Visually Hidden](/utilities/visually-hidden) Primitives Switch ====== Perform state toggling. Import ------ Import the Switch primitives from `ng-primitives/switch`. import { NgpSwitch, NgpSwitchThumb } from 'ng-primitives/switch'; Usage ----- Assemble the switch directives in your template. Reusable Component ------------------ Create a reusable component that uses the switch directives. Schematics ---------- Generate a reusable switch component using the Angular CLI. ng g ng-primitives:primitive switch ### 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 Switch primitives. ### Switch Form Field The switch automatically integrates with the form field primitives. API Reference ------------- The following directives are available to import from the `ng-primitives/switch` package: ### NgpSwitch Apply the `ngpSwitch` directive to an element to manage the checked state. * Selector: `[ngpSwitch]` * Exported As: `ngpSwitch` * Host Directives: [NgpFormControl](/primitives/form-field) , [NgpHover](/interactions/hover) , [NgpFocusVisible](/interactions/focus-visible) , [NgpPress](/interactions/press) Define the checked state. Define the disabled state. Event emitted when the state changes. #### Data Attributes The following data attributes are applied to the `ngpSwitch` directive: | Attribute | Description | | --- | --- | | `data-checked` | Applied when the switch is checked. | | `data-disabled` | Applied when the switch is disabled. | | `data-hover` | Applied when the switch is hovered. | | `data-focus-visible` | Applied when the switch is focused. | | `data-press` | Applied when the switch is pressed. | ### NgpSwitchThumb Apply the `ngpSwitchThumb` directive to an element within a switch to represent the thumb. * Selector: `[ngpSwitchThumb]` * Exported As: `ngpSwitchThumb` * Host Directives: [NgpHover](/interactions/hover) , [NgpFocusVisible](/interactions/focus-visible) , [NgpPress](/interactions/press) #### Data Attributes The following data attributes are available to style the thumb: | Attribute | Description | | --- | --- | | `data-checked` | Applied when the switch is checked. | | `data-disabled` | Applied when the switch is disabled. | | `data-hover` | Applied when the switch thumb is hovered. | | `data-focus-visible` | Applied when the switch thumb is focused. | | `data-press` | Applied when the switch thumb is pressed. | Accessibility ------------- Adheres to the [WAI-ARIA switch design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/switch/) . ### Keyboard Interactions * Space - Toggle the switch state. * Enter - Toggle the switch state. On this page ------------ Copyright © 2025 Angular Primitives --- # Angular Primitives Getting Started --------------- * [Introduction](/getting-started/introduction) * [Get Started](/getting-started/get-started) * [Styling](/getting-started/styling) * [Usage](/getting-started/usage) Primitives ---------- * [Accordion](/primitives/accordion) * [Avatar](/primitives/avatar) * [Button](/primitives/button) * [Checkbox](/primitives/checkbox) * [Date Picker](/primitives/date-picker) * [Dialog](/primitives/dialog) * [File Upload](/primitives/file-upload) * [Form Field](/primitives/form-field) * [Icons](/primitives/icons) * [Input](/primitives/input) * [Listbox](/primitives/listbox) * [Menu](/primitives/menu) * [Pagination](/primitives/pagination) * [Popover](/primitives/popover) * [Progress](/primitives/progress) * [Radio](/primitives/radio) * [Resize](/primitives/resize) * [Roving Focus](/primitives/roving-focus) * [Search](/primitives/search) * [Select](/primitives/select) * [Separator](/primitives/separator) * [Slider](/primitives/slider) * [Switch](/primitives/switch) * [Tabs](/primitives/tabs) * [Textarea](/primitives/textarea) * [Toast](/primitives/toast) * [Toggle Group](/primitives/toggle-group) * [Toggle](/primitives/toggle) * [Toolbar](/primitives/toolbar) * [Tooltip](/primitives/tooltip) Interactions ------------ * [Focus Visible](/interactions/focus-visible) * [Focus](/interactions/focus) * [Hover](/interactions/hover) * [Move](/interactions/move) * [Press](/interactions/press) Utilities --------- * [Autofill](/utilities/autofill) * [Date Adapter](/utilities/date-adapter) * [Focus Trap](/utilities/focus-trap) * [Visually Hidden](/utilities/visually-hidden) Primitives Toggle Group ============ The toggle group primitive is a collection of toggle buttons that can be used to select one or more options. Import ------ Import the ToggleGroup primitives from `ng-primitives/toggle-group`. import { NgpToggleGroup, NgpToggleGroupItem } from 'ng-primitives/toggle-group'; Usage ----- Assemble the toggle-group directives in your template.
Reusable Component ------------------ Create a reusable component that uses the toggle group directives. Schematics ---------- Generate a reusable toggle group component using the Angular CLI. ng g ng-primitives:primitive toggle-group ### 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 Toggle Group primitives. ### Multiple Selection The toggle group can be configured to allow multiple selections by setting the `ngpToggleGroupType` input to `multiple`. API Reference ------------- The following directives are available to import from the `ng-primitives/toggle-group` package: ### NgpToggleGroup * Selector: `[ngpToggleGroup]` * Exported As: `ngpToggleGroup` The orientation of the toggle group. he selected value(s) of the toggle group. The type of the toggle group, whether only one item can be selected or multiple. Whether the toggle group is disabled. #### Data Attributes The following data attributes are available to style the toggle group: | Attribute | Description | Value | | --- | --- | --- | | `data-disabled` | Applied when the toggle group is disabled. | `-` | | `data-orientation` | The orientation of the toggle group. | `horizontal` \| `vertical` | | `data-type` | The type of the toggle group. | `single` \| `multiple` | ### NgpToggleGroupItem * Selector: `[ngpToggleGroupItem]` * Exported As: `ngpToggleGroupItem` The value of the toggle group item. Whether the toggle group item is disabled. #### Data Attributes The following data attributes are available to style the toggle group item: | Attribute | Description | Value | | --- | --- | --- | | `data-disabled` | Applied when the toggle group item is disabled. | `-` | | `data-selected` | Applied when the toggle group item is selected. | `-` | Global Configuration -------------------- You can configure the default options for all toggle-groups in your application by using the `provideToggleGroupConfig` function in a providers array. import { provideToggleGroupConfig } from 'ng-primitives/toggle-group'; bootstrapApplication(AppComponent, { providers: [\ provideToggleGroupConfig({\ orientation: 'vertical',\ type: 'multiple',\ }),\ ], }); ### NgpToggleGroupConfig The default orientation of the toggle group. The default type of the toggle group. ### Keyboard Interaction * Tab - Moves focus to the first toggle group item in the toolbar. * Arrow Down - Moves focus to the next toggle group item (vertical orientation). * Arrow Up - Moves focus to the previous toggle group item (vertical orientation). * Arrow Right - Moves focus to the next toggle group item (horizontal orientation). * Arrow Left - Moves focus to the previous toggle group item (horizontal orientation). * Home - Moves focus to the first toggle group item. * End - Moves focus to the last toggle group item. On this page ------------ Copyright © 2025 Angular Primitives --- # Angular Primitives Getting Started --------------- * [Introduction](/getting-started/introduction) * [Get Started](/getting-started/get-started) * [Styling](/getting-started/styling) * [Usage](/getting-started/usage) Primitives ---------- * [Accordion](/primitives/accordion) * [Avatar](/primitives/avatar) * [Button](/primitives/button) * [Checkbox](/primitives/checkbox) * [Date Picker](/primitives/date-picker) * [Dialog](/primitives/dialog) * [File Upload](/primitives/file-upload) * [Form Field](/primitives/form-field) * [Icons](/primitives/icons) * [Input](/primitives/input) * [Listbox](/primitives/listbox) * [Menu](/primitives/menu) * [Pagination](/primitives/pagination) * [Popover](/primitives/popover) * [Progress](/primitives/progress) * [Radio](/primitives/radio) * [Resize](/primitives/resize) * [Roving Focus](/primitives/roving-focus) * [Search](/primitives/search) * [Select](/primitives/select) * [Separator](/primitives/separator) * [Slider](/primitives/slider) * [Switch](/primitives/switch) * [Tabs](/primitives/tabs) * [Textarea](/primitives/textarea) * [Toast](/primitives/toast) * [Toggle Group](/primitives/toggle-group) * [Toggle](/primitives/toggle) * [Toolbar](/primitives/toolbar) * [Tooltip](/primitives/tooltip) Interactions ------------ * [Focus Visible](/interactions/focus-visible) * [Focus](/interactions/focus) * [Hover](/interactions/hover) * [Move](/interactions/move) * [Press](/interactions/press) Utilities --------- * [Autofill](/utilities/autofill) * [Date Adapter](/utilities/date-adapter) * [Focus Trap](/utilities/focus-trap) * [Visually Hidden](/utilities/visually-hidden) Primitives Tabs ==== Dynamically show and hide content based on an active tab. Import ------ Import the Tabs primitives from `ng-primitives/tabs`. import { NgpTabset, NgpTabList, NgpTabButton, NgpTabPanel } from 'ng-primitives/tabs'; Usage ----- Assemble the tabs directives in your template.
Tab 1 content
Tab 2 content
Tab 3 content
Reusable Component ------------------ Create reusable components that uses the tab directives. Schematics ---------- Generate a reusable tab components using the Angular CLI. ng g ng-primitives:primitive tabs ### 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`. API Reference ------------- The following directives are available to import from the `ng-primitives/tabs` package: ### NgpTabset Apply the `ngpTabset` directive to an element to manage the tabs. * Selector: `[ngpTabset]` * Exported As: `ngpTabset` * Host Directives: [NgpRovingFocusGroup](/primitives/roving-focus) Define the selected tab. Define the orientation of the tabs. Define whether the tab should activate on focus. #### Data Attributes The following data attributes are applied to the `ngpTabset` directive: | Attribute | Description | Value | | --- | --- | --- | | `data-orientation` | The orientation of the tabs. | `horizontal` \| `vertical` | ### NgpTabList Apply the `ngpTabList` directive to an element that represents the list of tab buttons. * Selector: `[ngpTabList]` * Exported As: `ngpTabList` #### Data Attributes The following data attributes are applied to the `ngpTabList` directive: | Attribute | Description | Value | | --- | --- | --- | | `data-orientation` | The orientation of the tabs. | `horizontal` \| `vertical` | ### NgpTabButton Apply the `ngpTabButton` directive to an element within a tab list to represent a tab button. This directive should be applied to a button element. * Selector: `[ngpTabButton]` * Exported As: `ngpTabButton` * Host Directives: [NgpRovingFocusItem](/primitives/roving-focus) , [NgpHover](/interactions/hover) , [NgpFocusVisible](/interactions/focus-visible) , [NgpPress](/interactions/press) Define the value of the tab. Define whether the tab button is disabled. #### Data Attributes The following data attributes are applied to the `ngpTabButton` directive: | Attribute | Description | Value | | --- | --- | --- | | `data-orientation` | The orientation of the tabs. | `horizontal` \| `vertical` | | `data-active` | Applied when the tab is active. | `-` | | `data-disabled` | Applied when the tab is disabled. | `-` | | `data-hover` | Applied when the tab is hovered. | `-` | | `data-focus-visible` | Applied when the tab is focused. | `-` | | `data-press` | Applied when the tab is pressed. | `-` | ### NgpTabPanel Apply the `ngpTabPanel` directive to an element that represents the content of a tab. * Selector: `[ngpTabPanel]` * Exported As: `ngpTabPanel` Define the value of the tab. #### Data Attributes The following data attributes are applied to the `ngpTabPanel` directive: | Attribute | Description | Value | | --- | --- | --- | | `data-active` | Applied when the tab is active. | `-` | | `data-orientation` | The orientation of the tabs. | `horizontal` \| `vertical` | Global Configuration -------------------- You can configure the default options for all tabs in your application by using the `provideTabsConfig` function in a providers array. import { provideTabsConfig } from 'ng-primitives/tabs'; bootstrapApplication(AppComponent, { providers: [\ provideTabsConfig({\ orientation: 'horizontal',\ activateOnFocus: false,\ wrap: false,\ }),\ ], }); ### NgpTabsConfig The following options are available to configure the default tab options: Define the default orientation of the tabs. Define whether the tab should activate on focus. Define whether the tabs should wrap around the tab list. Accessibility ------------- Adheres to the [Tabs WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tabs) . ### Keyboard Interactions * ArrowLeft: Move focus to the previous tab (horizontal orientation). * ArrowRight: Move focus to the next tab (horizontal orientation). * ArrowUp: Move focus to the previous tab (vertical orientation). * ArrowDown: Move focus to the next tab (vertical orientation). * Home: Move focus to the first tab. * End: Move focus to the last tab. On this page ------------ Copyright © 2025 Angular Primitives --- # Angular Primitives Getting Started --------------- * [Introduction](/getting-started/introduction) * [Get Started](/getting-started/get-started) * [Styling](/getting-started/styling) * [Usage](/getting-started/usage) Primitives ---------- * [Accordion](/primitives/accordion) * [Avatar](/primitives/avatar) * [Button](/primitives/button) * [Checkbox](/primitives/checkbox) * [Date Picker](/primitives/date-picker) * [Dialog](/primitives/dialog) * [File Upload](/primitives/file-upload) * [Form Field](/primitives/form-field) * [Icons](/primitives/icons) * [Input](/primitives/input) * [Listbox](/primitives/listbox) * [Menu](/primitives/menu) * [Pagination](/primitives/pagination) * [Popover](/primitives/popover) * [Progress](/primitives/progress) * [Radio](/primitives/radio) * [Resize](/primitives/resize) * [Roving Focus](/primitives/roving-focus) * [Search](/primitives/search) * [Select](/primitives/select) * [Separator](/primitives/separator) * [Slider](/primitives/slider) * [Switch](/primitives/switch) * [Tabs](/primitives/tabs) * [Textarea](/primitives/textarea) * [Toast](/primitives/toast) * [Toggle Group](/primitives/toggle-group) * [Toggle](/primitives/toggle) * [Toolbar](/primitives/toolbar) * [Tooltip](/primitives/tooltip) Interactions ------------ * [Focus Visible](/interactions/focus-visible) * [Focus](/interactions/focus) * [Hover](/interactions/hover) * [Move](/interactions/move) * [Press](/interactions/press) Utilities --------- * [Autofill](/utilities/autofill) * [Date Adapter](/utilities/date-adapter) * [Focus Trap](/utilities/focus-trap) * [Visually Hidden](/utilities/visually-hidden) Utilities Autofill ======== Detect autofill events on input elements. This can be useful for styling or behavior changes when the browser autofills an input. Floating labels are a common use case for this directive. Import ------ Import the Autofill primitives from `ng-primitives/autofill`. import { NgpAutofill } from 'ng-primitives/autofill'; Usage ----- Assemble the autofill directives in your template. API Reference ------------- The following directives are available to import from the `ng-primitives/autofill` package: ### NgpAutofill * Selector: `[ngpAutofill]` * Exported As: `ngpAutofill` Event emitted when the autofill state changes. #### Data Attributes The following data attributes are applied to the `ngpAutofill` directive: | Attribute | Description | | --- | --- | | `data-autofill` | Applied when the element is autofilled. | On this page ------------ Copyright © 2025 Angular Primitives --- # Angular Primitives Getting Started --------------- * [Introduction](/getting-started/introduction) * [Get Started](/getting-started/get-started) * [Styling](/getting-started/styling) * [Usage](/getting-started/usage) Primitives ---------- * [Accordion](/primitives/accordion) * [Avatar](/primitives/avatar) * [Button](/primitives/button) * [Checkbox](/primitives/checkbox) * [Date Picker](/primitives/date-picker) * [Dialog](/primitives/dialog) * [File Upload](/primitives/file-upload) * [Form Field](/primitives/form-field) * [Icons](/primitives/icons) * [Input](/primitives/input) * [Listbox](/primitives/listbox) * [Menu](/primitives/menu) * [Pagination](/primitives/pagination) * [Popover](/primitives/popover) * [Progress](/primitives/progress) * [Radio](/primitives/radio) * [Resize](/primitives/resize) * [Roving Focus](/primitives/roving-focus) * [Search](/primitives/search) * [Select](/primitives/select) * [Separator](/primitives/separator) * [Slider](/primitives/slider) * [Switch](/primitives/switch) * [Tabs](/primitives/tabs) * [Textarea](/primitives/textarea) * [Toast](/primitives/toast) * [Toggle Group](/primitives/toggle-group) * [Toggle](/primitives/toggle) * [Toolbar](/primitives/toolbar) * [Tooltip](/primitives/tooltip) Interactions ------------ * [Focus Visible](/interactions/focus-visible) * [Focus](/interactions/focus) * [Hover](/interactions/hover) * [Move](/interactions/move) * [Press](/interactions/press) Utilities --------- * [Autofill](/utilities/autofill) * [Date Adapter](/utilities/date-adapter) * [Focus Trap](/utilities/focus-trap) * [Visually Hidden](/utilities/visually-hidden) Primitives Separator ========= The separator primitive allow you to semantically separate content either horizontally or vertically. Import ------ Import the Separator primitives from `ng-primitives/separator`. import { NgpSeparator } from 'ng-primitives/separator'; Usage ----- Assemble the separator directives in your template.
Reusable Component ------------------ Create a reusable component that uses the `NgpSeparator` directive. Schematics ---------- Generate a reusable separator component using the Angular CLI. ng g ng-primitives:primitive separator ### 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`. API Reference ------------- The following directives are available to import from the `ng-primitives/separator` package: ### NgpSeparator * Selector: `[ngpSeparator]` * Exported As: `ngpSeparator` The orientation of the separator. #### Data Attributes | Attribute | Description | | --- | --- | | `data-orientation` | The orientation of the separator. | Global Configuration -------------------- You can configure the default options for all separators in your application by using the `provideSeparatorConfig` function in a providers array. import { provideSeparatorConfig } from 'ng-primitives/tabs'; bootstrapApplication(AppComponent, { providers: [\ provideSeparatorConfig({\ orientation: 'horizontal',\ }),\ ], }); ### NgpSeparatorConfig The following options are available to configure the default tab options: Define the default orientation of the separator. Accessibility Adheres to the [WAI-ARIA Separator Design Pattern](https://www.w3.org/TR/wai-aria-1.2/#separator) . On this page ------------ Copyright © 2025 Angular Primitives --- # Angular Primitives Getting Started --------------- * [Introduction](/getting-started/introduction) * [Get Started](/getting-started/get-started) * [Styling](/getting-started/styling) * [Usage](/getting-started/usage) Primitives ---------- * [Accordion](/primitives/accordion) * [Avatar](/primitives/avatar) * [Button](/primitives/button) * [Checkbox](/primitives/checkbox) * [Date Picker](/primitives/date-picker) * [Dialog](/primitives/dialog) * [File Upload](/primitives/file-upload) * [Form Field](/primitives/form-field) * [Icons](/primitives/icons) * [Input](/primitives/input) * [Listbox](/primitives/listbox) * [Menu](/primitives/menu) * [Pagination](/primitives/pagination) * [Popover](/primitives/popover) * [Progress](/primitives/progress) * [Radio](/primitives/radio) * [Resize](/primitives/resize) * [Roving Focus](/primitives/roving-focus) * [Search](/primitives/search) * [Select](/primitives/select) * [Separator](/primitives/separator) * [Slider](/primitives/slider) * [Switch](/primitives/switch) * [Tabs](/primitives/tabs) * [Textarea](/primitives/textarea) * [Toast](/primitives/toast) * [Toggle Group](/primitives/toggle-group) * [Toggle](/primitives/toggle) * [Toolbar](/primitives/toolbar) * [Tooltip](/primitives/tooltip) Interactions ------------ * [Focus Visible](/interactions/focus-visible) * [Focus](/interactions/focus) * [Hover](/interactions/hover) * [Move](/interactions/move) * [Press](/interactions/press) Utilities --------- * [Autofill](/utilities/autofill) * [Date Adapter](/utilities/date-adapter) * [Focus Trap](/utilities/focus-trap) * [Visually Hidden](/utilities/visually-hidden) Primitives Select ====== A select is a form control that allows users to select options from a list. This primitive enhances the native select element with improved accessibility and interaction handling for hover and focus. Import ------ Import the Select primitives from `ng-primitives/select`. import { NgpSelect } from 'ng-primitives/select'; Usage ----- Assemble the select directives in your template. Examples -------- Here are some additional examples of how to use the Select primitives. ### Select Form Field The select automatically integrates with the form field primitives. API Reference ------------- The following directives are available to import from the `ng-primitives/select` package: ### NgpSelect Apply the `ngpSelect` directive to a select element that you want to enhance. * Selector: `[ngpSelect]` * Exported As: `ngpSelect` * Host Directives: [NgpFormControl](/primitives/form-field) , [NgpHover](/interactions/hover) , [NgpFocusVisible](/interactions/focus-visible) , [NgpPress](/interactions/press) Define the disabled state. #### 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. | On this page ------------ Copyright © 2025 Angular Primitives --- # Angular Primitives Getting Started --------------- * [Introduction](/getting-started/introduction) * [Get Started](/getting-started/get-started) * [Styling](/getting-started/styling) * [Usage](/getting-started/usage) Primitives ---------- * [Accordion](/primitives/accordion) * [Avatar](/primitives/avatar) * [Button](/primitives/button) * [Checkbox](/primitives/checkbox) * [Date Picker](/primitives/date-picker) * [Dialog](/primitives/dialog) * [File Upload](/primitives/file-upload) * [Form Field](/primitives/form-field) * [Icons](/primitives/icons) * [Input](/primitives/input) * [Listbox](/primitives/listbox) * [Menu](/primitives/menu) * [Pagination](/primitives/pagination) * [Popover](/primitives/popover) * [Progress](/primitives/progress) * [Radio](/primitives/radio) * [Resize](/primitives/resize) * [Roving Focus](/primitives/roving-focus) * [Search](/primitives/search) * [Select](/primitives/select) * [Separator](/primitives/separator) * [Slider](/primitives/slider) * [Switch](/primitives/switch) * [Tabs](/primitives/tabs) * [Textarea](/primitives/textarea) * [Toast](/primitives/toast) * [Toggle Group](/primitives/toggle-group) * [Toggle](/primitives/toggle) * [Toolbar](/primitives/toolbar) * [Tooltip](/primitives/tooltip) Interactions ------------ * [Focus Visible](/interactions/focus-visible) * [Focus](/interactions/focus) * [Hover](/interactions/hover) * [Move](/interactions/move) * [Press](/interactions/press) Utilities --------- * [Autofill](/utilities/autofill) * [Date Adapter](/utilities/date-adapter) * [Focus Trap](/utilities/focus-trap) * [Visually Hidden](/utilities/visually-hidden) Primitives The search primitive is a form control that allows users to enter a search query and clear the input. Import ------ Import the Search primitives from `ng-primitives/search`. import { NgpSearch, NgpSearchClear } from 'ng-primitives/search'; Usage ----- Assemble the search directives in your template.
API Reference ------------- The following directives are available to import from the `ng-primitives/search` package: ### NgpSearch The `NgpSearch` directive is a container for the search field components. * Selector: `[ngpSearch]` * Exported As: `ngpSearch` #### Data Attributes | Attribute | Description | | --- | --- | | `data-empty` | Applied when the input is empty. | ### NgpSearchClear The `NgpSearchClear` directive is can be added to a button to clear the search field on click. * Selector: `[ngpSearchClear]` * Exported As: `ngpSearchClear` | Attribute | Description | | --- | --- | | `data-empty` | Applied when the search field is empty. | Accessibility ------------- Adheres to the [Search WAI-ARIA design pattern](https://www.w3.org/TR/wai-aria-1.2/#searchbox) . ### Keyboard Interaction * Esc - Clears the search field. On this page ------------ Copyright © 2025 Angular Primitives --- # Angular Primitives Getting Started --------------- * [Introduction](/getting-started/introduction) * [Get Started](/getting-started/get-started) * [Styling](/getting-started/styling) * [Usage](/getting-started/usage) Primitives ---------- * [Accordion](/primitives/accordion) * [Avatar](/primitives/avatar) * [Button](/primitives/button) * [Checkbox](/primitives/checkbox) * [Date Picker](/primitives/date-picker) * [Dialog](/primitives/dialog) * [File Upload](/primitives/file-upload) * [Form Field](/primitives/form-field) * [Icons](/primitives/icons) * [Input](/primitives/input) * [Listbox](/primitives/listbox) * [Menu](/primitives/menu) * [Pagination](/primitives/pagination) * [Popover](/primitives/popover) * [Progress](/primitives/progress) * [Radio](/primitives/radio) * [Resize](/primitives/resize) * [Roving Focus](/primitives/roving-focus) * [Search](/primitives/search) * [Select](/primitives/select) * [Separator](/primitives/separator) * [Slider](/primitives/slider) * [Switch](/primitives/switch) * [Tabs](/primitives/tabs) * [Textarea](/primitives/textarea) * [Toast](/primitives/toast) * [Toggle Group](/primitives/toggle-group) * [Toggle](/primitives/toggle) * [Toolbar](/primitives/toolbar) * [Tooltip](/primitives/tooltip) Interactions ------------ * [Focus Visible](/interactions/focus-visible) * [Focus](/interactions/focus) * [Hover](/interactions/hover) * [Move](/interactions/move) * [Press](/interactions/press) Utilities --------- * [Autofill](/utilities/autofill) * [Date Adapter](/utilities/date-adapter) * [Focus Trap](/utilities/focus-trap) * [Visually Hidden](/utilities/visually-hidden) Primitives Progress ======== Display an indicator representing the progress of a task. Import ------ Import the Progress primitives from `ng-primitives/progress`. import { NgpProgress, NgpProgressIndicator } from 'ng-primitives/progress'; Usage ----- Assemble the avatar directives in your template.
Reusable Component ------------------ Create a reusable component that uses the progress directives. Schematics ---------- Generate a reusable progress component using the Angular CLI. ng g ng-primitives:primitive progress ### 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`. API Reference ------------- The following directives are available to import from the `ng-primitives/progress` package: ### NgpProgress Apply the `ngpProgress` directive to an element that represents the progress bar. * Selector: `[ngpProgress]` * Exported As: `ngpProgress` Define the progress value. Define the progress max value. Define a function that returns the progress value label. ### NgpProgressIndicator Apply the `ngpProgressIndicator` directive to an element that represents the current progress. The width of this element can be set to the percentage of the progress value. * Selector: `[ngpProgressIndicator]` * Exported As: `ngpProgressIndicator` On this page ------------ Copyright © 2025 Angular Primitives --- # Angular Primitives Getting Started --------------- * [Introduction](/getting-started/introduction) * [Get Started](/getting-started/get-started) * [Styling](/getting-started/styling) * [Usage](/getting-started/usage) Primitives ---------- * [Accordion](/primitives/accordion) * [Avatar](/primitives/avatar) * [Button](/primitives/button) * [Checkbox](/primitives/checkbox) * [Date Picker](/primitives/date-picker) * [Dialog](/primitives/dialog) * [File Upload](/primitives/file-upload) * [Form Field](/primitives/form-field) * [Icons](/primitives/icons) * [Input](/primitives/input) * [Listbox](/primitives/listbox) * [Menu](/primitives/menu) * [Pagination](/primitives/pagination) * [Popover](/primitives/popover) * [Progress](/primitives/progress) * [Radio](/primitives/radio) * [Resize](/primitives/resize) * [Roving Focus](/primitives/roving-focus) * [Search](/primitives/search) * [Select](/primitives/select) * [Separator](/primitives/separator) * [Slider](/primitives/slider) * [Switch](/primitives/switch) * [Tabs](/primitives/tabs) * [Textarea](/primitives/textarea) * [Toast](/primitives/toast) * [Toggle Group](/primitives/toggle-group) * [Toggle](/primitives/toggle) * [Toolbar](/primitives/toolbar) * [Tooltip](/primitives/tooltip) Interactions ------------ * [Focus Visible](/interactions/focus-visible) * [Focus](/interactions/focus) * [Hover](/interactions/hover) * [Move](/interactions/move) * [Press](/interactions/press) Utilities --------- * [Autofill](/utilities/autofill) * [Date Adapter](/utilities/date-adapter) * [Focus Trap](/utilities/focus-trap) * [Visually Hidden](/utilities/visually-hidden) Primitives Resize ====== Perform actions on element resize. Import ------ Import the Resize primitive from `ng-primitives/resize`. import { NgpResize } from 'ng-primitives/resize'; Usage ----- Assemble the resize directives in your template.
API Reference ------------- The following directives are available to import from the `ng-primitives/resize` package: ### NgpResize Apply the `ngpResize` directive to an element to listen for resize events. * Selector: `[ngpResize]` * Exported As: `ngpResize` Event emitted when the element is resize. On this page ------------ Copyright © 2025 Angular Primitives --- # Angular Primitives Getting Started --------------- * [Introduction](/getting-started/introduction) * [Get Started](/getting-started/get-started) * [Styling](/getting-started/styling) * [Usage](/getting-started/usage) Primitives ---------- * [Accordion](/primitives/accordion) * [Avatar](/primitives/avatar) * [Button](/primitives/button) * [Checkbox](/primitives/checkbox) * [Date Picker](/primitives/date-picker) * [Dialog](/primitives/dialog) * [File Upload](/primitives/file-upload) * [Form Field](/primitives/form-field) * [Icons](/primitives/icons) * [Input](/primitives/input) * [Listbox](/primitives/listbox) * [Menu](/primitives/menu) * [Pagination](/primitives/pagination) * [Popover](/primitives/popover) * [Progress](/primitives/progress) * [Radio](/primitives/radio) * [Resize](/primitives/resize) * [Roving Focus](/primitives/roving-focus) * [Search](/primitives/search) * [Select](/primitives/select) * [Separator](/primitives/separator) * [Slider](/primitives/slider) * [Switch](/primitives/switch) * [Tabs](/primitives/tabs) * [Textarea](/primitives/textarea) * [Toast](/primitives/toast) * [Toggle Group](/primitives/toggle-group) * [Toggle](/primitives/toggle) * [Toolbar](/primitives/toolbar) * [Tooltip](/primitives/tooltip) Interactions ------------ * [Focus Visible](/interactions/focus-visible) * [Focus](/interactions/focus) * [Hover](/interactions/hover) * [Move](/interactions/move) * [Press](/interactions/press) Utilities --------- * [Autofill](/utilities/autofill) * [Date Adapter](/utilities/date-adapter) * [Focus Trap](/utilities/focus-trap) * [Visually Hidden](/utilities/visually-hidden) Primitives Popover ======= Display arbitrary content inside floating panels. Import ------ Import the Popover primitives from `ng-primitives/popover`. import { NgpPopover } from 'ng-primitives/popover'; Usage ----- Assemble the popover directives in your template.
Popover content
 API Reference ------------- The following directives are available to import from the `ng-primitives/popover` package: ### NgpPopover Apply the `ngpPopover` directive to an element that represents the popover. This typically would be a `div` inside an `ng-template`. * Selector: `[ngpPopover]` * Exported As: `ngpPopover` ### NgpPopoverTrigger Apply the `ngpPopoverTrigger` directive to an element that triggers the popover to show. * Selector: `[ngpPopoverTrigger]` * Exported As: `ngpPopoverTrigger` Define the content of the popover. This should be reference to an \`ng-template\`. Define the open state. Event emitted when the state changes. Define the offset from the trigger element. Define the disabled state. Define the placement of the popover. Define the delay before the popover shows. Define the delay before the popover hides. Define if the popover should flip when it reaches the edge of the viewport. Define the container element for the popover. This is the document body by default. Define whether the popover should close when clicking outside of it. Defines how the popover behaves when the window is scrolled. If set to \`reposition\`, the popover will adjust its position automatically during scrolling. Make sure the popover uses \`position: absolute\` in this mode. If set to \`block\`, scrolling will be disabled while the popover is open. In this case, the popover should use \`position: fixed\`. #### Data Attributes | Attribute | Description | | --- | --- | | `data-open` | Applied when the popover is open. | | `data-disabled` | Applied when the popover is disabled. | Global Configuration -------------------- You can configure the default options for all popovers in your application by using the `providePopoverConfig` function in a providers array. import { providePopoverConfig } from 'ng-primitives/popover'; bootstrapApplication(AppComponent, { providers: [\ providePopoverConfig({\ offset: 4,\ placement: 'top',\ showDelay: 0,\ hideDelay: 0,\ flip: true,\ container: document.body,\ closeOnOutsideClick: true,\ scrollBehavior: 'reposition',\ }),\ ], }); ### NgpPopoverConfig Define the offset from the trigger element. Define the placement of the popover. Define the delay before the popover shows. Define the delay before the popover hides. Define if the popover should flip when it reaches the edge of the viewport. Define the container element for the popover. This is the document body by default. Define whether the popover should close when clicking outside of it. Defines how the popover behaves when the window is scrolled. If set to \`reposition\`, the popover will adjust its position automatically during scrolling. Make sure the popover uses \`position: absolute\` in this mode. If set to \`block\`, scrolling will be disabled while the popover is open. In this case, the popover should use \`position: fixed\`. On this page ------------ Copyright © 2025 Angular Primitives --- # Angular Primitives Getting Started --------------- * [Introduction](/getting-started/introduction) * [Get Started](/getting-started/get-started) * [Styling](/getting-started/styling) * [Usage](/getting-started/usage) Primitives ---------- * [Accordion](/primitives/accordion) * [Avatar](/primitives/avatar) * [Button](/primitives/button) * [Checkbox](/primitives/checkbox) * [Date Picker](/primitives/date-picker) * [Dialog](/primitives/dialog) * [File Upload](/primitives/file-upload) * [Form Field](/primitives/form-field) * [Icons](/primitives/icons) * [Input](/primitives/input) * [Listbox](/primitives/listbox) * [Menu](/primitives/menu) * [Pagination](/primitives/pagination) * [Popover](/primitives/popover) * [Progress](/primitives/progress) * [Radio](/primitives/radio) * [Resize](/primitives/resize) * [Roving Focus](/primitives/roving-focus) * [Search](/primitives/search) * [Select](/primitives/select) * [Separator](/primitives/separator) * [Slider](/primitives/slider) * [Switch](/primitives/switch) * [Tabs](/primitives/tabs) * [Textarea](/primitives/textarea) * [Toast](/primitives/toast) * [Toggle Group](/primitives/toggle-group) * [Toggle](/primitives/toggle) * [Toolbar](/primitives/toolbar) * [Tooltip](/primitives/tooltip) Interactions ------------ * [Focus Visible](/interactions/focus-visible) * [Focus](/interactions/focus) * [Hover](/interactions/hover) * [Move](/interactions/move) * [Press](/interactions/press) Utilities --------- * [Autofill](/utilities/autofill) * [Date Adapter](/utilities/date-adapter) * [Focus Trap](/utilities/focus-trap) * [Visually Hidden](/utilities/visually-hidden) Primitives Roving Focus ============ Handle focus for a group of elements. Import ------ Import the Roving Focus primitives from `ng-primitives/roving-focus`. import { NgpRovingFocusGroup, NgpRovingFocusItem } from 'ng-primitives/roving-focus'; Usage ----- Assemble the roving focus directives in your template.
API Reference ------------- The following directives are available to import from the `ng-primitives/roving-focus` package: ### NgpRovingFocusGroup Apply the `ngpRovingFocusGroup` directive to an element to manage focus for a group of child elements. * Selector: `[ngpRovingFocusGroup]` * Exported As: `ngpRovingFocusGroup` Define the orientation of the roving focus group. Define whether the focus should wrap around the group. Define whether the focus should move to the first or last element when pressing the Home or End key. Define whether the roving focus group is disabled. ### NgpRovingFocusItem Apply the `ngpRovingFocusItem` directive to an element within a roving focus group to automatically manage focus. * Selector: `[ngpRovingFocusItem]` * Exported As: `ngpRovingFocusItem` Define whether the roving focus item is disabled. Accessibility ------------- Adheres to the [WAI-ARIA Keyboard Interface Practices](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/) . ### Keyboard Interactions * Tab - Move focus to the first item. * ArrowLeft - Move focus to the previous item (horizontal orientation). * ArrowUp - Move focus to the previous item (vertical orientation). * ArrowRight - Move focus to the next item (horizontal orientation). * ArrowDown - Move focus to the next item (vertical orientation). * Home - Move focus to the first item. * End - Move focus to the last item. On this page ------------ Copyright © 2025 Angular Primitives --- # Angular Primitives Getting Started --------------- * [Introduction](/getting-started/introduction) * [Get Started](/getting-started/get-started) * [Styling](/getting-started/styling) * [Usage](/getting-started/usage) Primitives ---------- * [Accordion](/primitives/accordion) * [Avatar](/primitives/avatar) * [Button](/primitives/button) * [Checkbox](/primitives/checkbox) * [Date Picker](/primitives/date-picker) * [Dialog](/primitives/dialog) * [File Upload](/primitives/file-upload) * [Form Field](/primitives/form-field) * [Icons](/primitives/icons) * [Input](/primitives/input) * [Listbox](/primitives/listbox) * [Menu](/primitives/menu) * [Pagination](/primitives/pagination) * [Popover](/primitives/popover) * [Progress](/primitives/progress) * [Radio](/primitives/radio) * [Resize](/primitives/resize) * [Roving Focus](/primitives/roving-focus) * [Search](/primitives/search) * [Select](/primitives/select) * [Separator](/primitives/separator) * [Slider](/primitives/slider) * [Switch](/primitives/switch) * [Tabs](/primitives/tabs) * [Textarea](/primitives/textarea) * [Toast](/primitives/toast) * [Toggle Group](/primitives/toggle-group) * [Toggle](/primitives/toggle) * [Toolbar](/primitives/toolbar) * [Tooltip](/primitives/tooltip) Interactions ------------ * [Focus Visible](/interactions/focus-visible) * [Focus](/interactions/focus) * [Hover](/interactions/hover) * [Move](/interactions/move) * [Press](/interactions/press) Utilities --------- * [Autofill](/utilities/autofill) * [Date Adapter](/utilities/date-adapter) * [Focus Trap](/utilities/focus-trap) * [Visually Hidden](/utilities/visually-hidden) Primitives Pagination ========== The Pagination primitives provide a set of directives to create a pagination control. The pagination control is used to navigate through a set of data that is split into multiple pages. Import ------ Import the Pagination primitives from `ng-primitives/pagination`. import { NgpPagination, NgpPaginationButton, NgpPaginationFirst, NgpPaginationNext, NgpPaginationPrevious, NgpPaginationLast, } from 'ng-primitives/pagination'; Usage ----- Assemble the pagination directives in your template. Reusable Component ------------------ Create a reusable component that uses the pagination directives. Schematics ---------- Generate a reusable pagination component using the Angular CLI. ng g ng-primitives:primitive pagination ### 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`. API Reference ------------- The following directives are available to import from the `ng-primitives/pagination` package: ### NgpPagination The `NgpPagination` directive is used to create a pagination control. * Selector: `[ngpPagination]` * Exported As: `ngpPagination` The current page number. The total number of pages. Emits the new page number when the page changes. Disables the pagination control. #### Data Attributes The following data attributes are applied to the `ngpPagination` directive: | Attribute | Description | Value | | --- | --- | --- | | `data-page` | The current page number. | `number` | | `data-page-count` | The total number of pages. | `number` | | `data-disabled` | Disables the pagination control. | `boolean` | | `data-first-page` | Whether the current page is the first page. | `boolean` | | `data-last-page` | Whether the current page is the last page. | `boolean` | ### NgpPaginationButton The `NgpPaginationButton` directive is used to create a pagination button. * Selector: `[ngpPaginationButton]` * Exported As: `ngpPaginationButton` * Host Directives: [NgpButton](/primitives/button) The page number that the button navigates to. Disables the pagination button. #### Data Attributes The following data attributes are applied to the `ngpPaginationButton` directive: | Attribute | Description | Value | | --- | --- | --- | | `data-page` | The page number that the button navigates to. | `number` | | `data-selected` | Applied when the button is selected. | `-` | | `data-hover` | Applied when the button is hovered. | `-` | | `data-focus-visible` | Applied when the button is focused. | `-` | | `data-press` | Applied when the button is pressed. | `-` | | `data-disabled` | Disables the pagination button. | `-` | ### NgpPaginationFirst The `NgpPaginationFirst` directive is used to create a pagination button that navigates to the first page. * Selector: `[ngpPaginationFirst]` * Exported As: `ngpPaginationFirst` * Host Directives: [NgpButton](/primitives/button) Disables the pagination button. #### Data Attributes The following data attributes are applied to the `ngpPaginationFirst` directive: | Attribute | Description | | --- | --- | | `data-first-page` | Applied when the current page is the first page. | | `data-hover` | Applied when the button is hovered. | | `data-focus-visible` | Applied when the button is focused. | | `data-press` | Applied when the button is pressed. | | `data-disabled` | Applied when the button is disabled. | ### NgpPaginationPrevious The `NgpPaginationPrevious` directive is used to create a pagination button that navigates to the previous page. * Selector: `[ngpPaginationPrevious]` * Exported As: `ngpPaginationPrevious` * Host Directives: [NgpButton](/primitives/button) Disables the pagination button. #### Data Attributes The following data attributes are applied to the `ngpPaginationPrevious` directive: | Attribute | Description | | --- | --- | | `data-first-page` | Applied when the current page is the first page. | | `data-hover` | Applied when the button is hovered. | | `data-focus-visible` | Applied when the button is focused. | | `data-press` | Applied when the button is pressed. | | `data-disabled` | Applied when the button is disabled. | ### NgpPaginationNext The `NgpPaginationNext` directive is used to create a pagination button that navigates to the next page. * Selector: `[ngpPaginationNext]` * Exported As: `ngpPaginationNext` * Host Directives: [NgpButton](/primitives/button) Disables the pagination button. #### Data Attributes The following data attributes are applied to the `ngpPaginationNext` directive: | Attribute | Description | | --- | --- | | `data-last-page` | Applied when the current page is the last page. | | `data-hover` | Applied when the button is hovered. | | `data-focus-visible` | Applied when the button is focused. | | `data-press` | Applied when the button is pressed. | | `data-disabled` | Applied when the button is disabled. | ### NgpPaginationLast The `NgpPaginationLast` directive is used to create a pagination button that navigates to the last page. * Selector: `[ngpPaginationLast]` * Exported As: `ngpPaginationLast` * Host Directives: [NgpButton](/primitives/button) Disables the pagination button. #### Data Attributes The following data attributes are applied to the `ngpPaginationLast` directive: | Attribute | Description | | --- | --- | | `data-last-page` | Applied when the current page is the last page. | | `data-hover` | Applied when the button is hovered. | | `data-focus-visible` | Applied when the button is focused. | | `data-press` | Applied when the button is pressed. | | `data-disabled` | Applied when the button is disabled. | On this page ------------ Copyright © 2025 Angular Primitives --- # Angular Primitives Getting Started --------------- * [Introduction](/getting-started/introduction) * [Get Started](/getting-started/get-started) * [Styling](/getting-started/styling) * [Usage](/getting-started/usage) Primitives ---------- * [Accordion](/primitives/accordion) * [Avatar](/primitives/avatar) * [Button](/primitives/button) * [Checkbox](/primitives/checkbox) * [Date Picker](/primitives/date-picker) * [Dialog](/primitives/dialog) * [File Upload](/primitives/file-upload) * [Form Field](/primitives/form-field) * [Icons](/primitives/icons) * [Input](/primitives/input) * [Listbox](/primitives/listbox) * [Menu](/primitives/menu) * [Pagination](/primitives/pagination) * [Popover](/primitives/popover) * [Progress](/primitives/progress) * [Radio](/primitives/radio) * [Resize](/primitives/resize) * [Roving Focus](/primitives/roving-focus) * [Search](/primitives/search) * [Select](/primitives/select) * [Separator](/primitives/separator) * [Slider](/primitives/slider) * [Switch](/primitives/switch) * [Tabs](/primitives/tabs) * [Textarea](/primitives/textarea) * [Toast](/primitives/toast) * [Toggle Group](/primitives/toggle-group) * [Toggle](/primitives/toggle) * [Toolbar](/primitives/toolbar) * [Tooltip](/primitives/tooltip) Interactions ------------ * [Focus Visible](/interactions/focus-visible) * [Focus](/interactions/focus) * [Hover](/interactions/hover) * [Move](/interactions/move) * [Press](/interactions/press) Utilities --------- * [Autofill](/utilities/autofill) * [Date Adapter](/utilities/date-adapter) * [Focus Trap](/utilities/focus-trap) * [Visually Hidden](/utilities/visually-hidden) Primitives Icons ===== Enhance your application by providing a visually appealing and intuitive way to represent actions, statuses, and features. Icons improve user experience, aid in navigation, and help convey information quickly. We also maintain the popular [Angular Icons library](https://ng-icons.github.io/ng-icons) which gives you access to over 50,000 icons from popular icon libraries like Font Awesome, Material Design, Heroicons and more. Import ------ The `NgIcon` component is used to render icons in your application. To use icons, you need to import the `NgIcon` directive from `@ng-icons/core`. Icons must be registered using the `provideIcons` function. The icons you want to use must be individually imported from their respective packages. import { NgIcon, provideIcons } from '@ng-icons/core'; import { featherAirplay } from '@ng-icons/feather-icons'; import { heroUsers } from '@ng-icons/heroicons/outline'; @Component({ selector: 'app-root', template: ` `, imports: [NgIcon], viewProviders: [provideIcons({ featherAirplay, heroUsers })], }) export class AppComponent {} View the full list of available icons in the [Angular Icons documentation](https://ng-icons.github.io/ng-icons/#/browse-icons) . On this page ------------ Copyright © 2025 Angular Primitives --- # Angular Primitives Getting Started --------------- * [Introduction](/getting-started/introduction) * [Get Started](/getting-started/get-started) * [Styling](/getting-started/styling) * [Usage](/getting-started/usage) Primitives ---------- * [Accordion](/primitives/accordion) * [Avatar](/primitives/avatar) * [Button](/primitives/button) * [Checkbox](/primitives/checkbox) * [Date Picker](/primitives/date-picker) * [Dialog](/primitives/dialog) * [File Upload](/primitives/file-upload) * [Form Field](/primitives/form-field) * [Icons](/primitives/icons) * [Input](/primitives/input) * [Listbox](/primitives/listbox) * [Menu](/primitives/menu) * [Pagination](/primitives/pagination) * [Popover](/primitives/popover) * [Progress](/primitives/progress) * [Radio](/primitives/radio) * [Resize](/primitives/resize) * [Roving Focus](/primitives/roving-focus) * [Search](/primitives/search) * [Select](/primitives/select) * [Separator](/primitives/separator) * [Slider](/primitives/slider) * [Switch](/primitives/switch) * [Tabs](/primitives/tabs) * [Textarea](/primitives/textarea) * [Toast](/primitives/toast) * [Toggle Group](/primitives/toggle-group) * [Toggle](/primitives/toggle) * [Toolbar](/primitives/toolbar) * [Tooltip](/primitives/tooltip) Interactions ------------ * [Focus Visible](/interactions/focus-visible) * [Focus](/interactions/focus) * [Hover](/interactions/hover) * [Move](/interactions/move) * [Press](/interactions/press) Utilities --------- * [Autofill](/utilities/autofill) * [Date Adapter](/utilities/date-adapter) * [Focus Trap](/utilities/focus-trap) * [Visually Hidden](/utilities/visually-hidden) Primitives Listbox ======= A listbox presents a set of choices and lets users select one or multiple options. It can be paired with the `NgpPopover` directive to create a dropdown listbox. Import ------ Import the Listbox primitives from `ng-primitives/listbox`. import { NgpListbox } from 'ng-primitives/listbox'; Usage ----- Assemble the listbox directives in your template.
Option 1
Option 2
Option 3
Reusable Component ------------------ Create a reusable component that uses the listbox directives. Schematics ---------- Generate a reusable listbox component using the Angular CLI. ng g ng-primitives:primitive listbox ### 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 -------- ### Single-Select Listbox The listbox can be configured to allow a single selection. ### Multi-Select Listbox The listbox can be configured to allow multiple selections. ### Listbox with Sections The listbox can be configured to have sections and headers. API Reference ------------- The following directives are available to import from the `ng-primitives/listbox` package: ### NgpListbox * Selector: `[ngpListbox]` * Exported As: `ngpListbox` The selection mode of the listbox. Can be either \`single\` or \`multiple\`. The selected value(s) of the listbox. Whether the listbox is disabled. A function to compare two values of the listbox. The function should return \`true\` if the values are equal. This is useful when the listbox options are objects. #### Data Attributes The following data attributes are applied to the `ngpListbox` directive: | Attribute | Description | | --- | --- | | `data-focus-visible` | Applied to the listbox when focused via the keyboard. | ### NgpListboxOption * Selector: `[ngpListboxOption]` * Exported As: `ngpListboxOption` The value of the option. Whether the option is disabled. #### Data Attributes The following data attributes are applied to the `ngpListboxOption` directive: | Attribute | Description | | --- | --- | | `data-hover` | Applied to the listbox option when hovered. | | `data-focus` | Applied to the listbox option when focused. | | `data-focus-visible` | Applied to the listbox option when focused via the keyboard. | | `data-disabled` | Applied to the listbox option when disabled. | | `data-active` | Applied to the listbox option when it is the active descendant. | | `data-disabled` | Applied to the listbox option when it is disabled. | | `data-selected` | Applied to the listbox option when it is selected. | ### NgpListboxSection * Selector: `[ngpListboxSection]` * Exported As: `ngpListboxSection` ### NgpListboxTrigger * Selector: `[ngpListboxTrigger]` * Exported As: `ngpListboxTrigger` Augments the popover trigger with listbox-specific behavior, such as opening the listbox when the arrow keys are pressed. Accessibility ------------- Adheres to the [WAI-ARIA Listbox Design Pattern](https://www.w3.org/TR/wai-aria-practices-1.1/#Listbox) . ### Keyboard Interactions * Arrow Down - Move focus to the next option. * Arrow Up - Move focus to the previous option. * Home - Move focus to the first option. * End - Move focus to the last option. * Space - Select the focused option. * Enter - Select the focused option. * Escape - Close the listbox. On this page ------------ Copyright © 2025 Angular Primitives --- # Angular Primitives Getting Started --------------- * [Introduction](/getting-started/introduction) * [Get Started](/getting-started/get-started) * [Styling](/getting-started/styling) * [Usage](/getting-started/usage) Primitives ---------- * [Accordion](/primitives/accordion) * [Avatar](/primitives/avatar) * [Button](/primitives/button) * [Checkbox](/primitives/checkbox) * [Date Picker](/primitives/date-picker) * [Dialog](/primitives/dialog) * [File Upload](/primitives/file-upload) * [Form Field](/primitives/form-field) * [Icons](/primitives/icons) * [Input](/primitives/input) * [Listbox](/primitives/listbox) * [Menu](/primitives/menu) * [Pagination](/primitives/pagination) * [Popover](/primitives/popover) * [Progress](/primitives/progress) * [Radio](/primitives/radio) * [Resize](/primitives/resize) * [Roving Focus](/primitives/roving-focus) * [Search](/primitives/search) * [Select](/primitives/select) * [Separator](/primitives/separator) * [Slider](/primitives/slider) * [Switch](/primitives/switch) * [Tabs](/primitives/tabs) * [Textarea](/primitives/textarea) * [Toast](/primitives/toast) * [Toggle Group](/primitives/toggle-group) * [Toggle](/primitives/toggle) * [Toolbar](/primitives/toolbar) * [Tooltip](/primitives/tooltip) Interactions ------------ * [Focus Visible](/interactions/focus-visible) * [Focus](/interactions/focus) * [Hover](/interactions/hover) * [Move](/interactions/move) * [Press](/interactions/press) Utilities --------- * [Autofill](/utilities/autofill) * [Date Adapter](/utilities/date-adapter) * [Focus Trap](/utilities/focus-trap) * [Visually Hidden](/utilities/visually-hidden) Primitives Radio ===== Selection within a group. Import ------ Import the Radio primitives from `ng-primitives/radio`. import { NgpRadioGroup, NgpRadioItem, NgpRadioIndicator } from 'ng-primitives/radio'; Usage ----- Assemble the radio directives in your template.
Reusable Component ------------------ Create a reusable component that uses the radio directives. Schematics ---------- Generate a reusable radio component using the Angular CLI. ng g ng-primitives:primitive radio ### 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`. API Reference ------------- The following directives are available to import from the `ng-primitives/radio` package: ### NgpRadioGroup Apply the `ngpRadioGroup` directive to an element that represents the group of radio items. * Selector: `[ngpRadioGroup]` * Exported As: `ngpRadioGroup` * Host Directives: [NgpRovingFocusGroup](/primitives/roving-focus) , [NgpFormControl](/primitives/form-field) Define the selected value. Define the disabled state. Define the orientation. Event emitted when the selection changes. ### NgpRadioItem Apply the `ngpRadioItem` directive to an element that represents a radio item. This would typically be a `button` element. * Selector: `[ngpRadioItem]` * Exported As: `ngpRadioItem` * Host Directives: [NgpRovingFocusItem](/primitives/roving-focus) , [NgpHover](/interactions/hover) , [NgpFocusVisible](/interactions/focus-visible) , [NgpPress](/interactions/press) Define the value of this item. Define the disabled state. #### Data Attributes The following data attributes are applied to the `ngpRadioGroup` directive: | Attribute | Description | Value | | --- | --- | --- | | `data-orientation` | The orientation of the radio group. | `vertical` \| `horizontal` | | `data-disabled` | Applied when the radio group is disabled. | `-` | #### Data Attributes The following data attributes are applied to the `ngpRadioItem` directive: | Attribute | Description | | --- | --- | | `data-checked` | Applied when the radio item is checked. | | `data-disabled` | Applied when the radio item is disabled. | | `data-hover` | Applied when the radio item is hovered. | | `data-focus-visible` | Applied when the radio item is focused. | | `data-press` | Applied when the radio item is pressed. | ### NgpRadioIndicator Apply the `ngpRadioIndicator` directive to an element that represents the radio indicator (i.e. the dot). * Selector: `[ngpRadioIndicator]` * Exported As: `ngpRadioIndicator` * Host Directives: [NgpHover](/interactions/hover) , [NgpPress](/interactions/press) #### Data Attributes The following data attributes are applied to the `ngpRadioItem` directive: | Attribute | Description | | --- | --- | | `data-checked` | Applied when the radio item is checked. | | `data-disabled` | Applied when the radio item is disabled. | | `data-hover` | Applied when the radio item is hovered. | | `data-press` | Applied when the radio item is pressed. | Accessibility ------------- Adheres to the [Radio Group WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/radio) . ### Keyboard Interaction * Tab - Moves focus to the first radio button. * Arrow Down - Moves focus to the next radio button (vertical orientation). * Arrow Up - Moves focus to the previous radio button (vertical orientation). * Arrow Right - Moves focus to the next radio button (horizontal orientation). * Arrow Left - Moves focus to the previous radio button (horizontal orientation). * Space - Selects the focused radio button if not already selected. On this page ------------ Copyright © 2025 Angular Primitives --- # Angular Primitives Getting Started --------------- * [Introduction](/getting-started/introduction) * [Get Started](/getting-started/get-started) * [Styling](/getting-started/styling) * [Usage](/getting-started/usage) Primitives ---------- * [Accordion](/primitives/accordion) * [Avatar](/primitives/avatar) * [Button](/primitives/button) * [Checkbox](/primitives/checkbox) * [Date Picker](/primitives/date-picker) * [Dialog](/primitives/dialog) * [File Upload](/primitives/file-upload) * [Form Field](/primitives/form-field) * [Icons](/primitives/icons) * [Input](/primitives/input) * [Listbox](/primitives/listbox) * [Menu](/primitives/menu) * [Pagination](/primitives/pagination) * [Popover](/primitives/popover) * [Progress](/primitives/progress) * [Radio](/primitives/radio) * [Resize](/primitives/resize) * [Roving Focus](/primitives/roving-focus) * [Search](/primitives/search) * [Select](/primitives/select) * [Separator](/primitives/separator) * [Slider](/primitives/slider) * [Switch](/primitives/switch) * [Tabs](/primitives/tabs) * [Textarea](/primitives/textarea) * [Toast](/primitives/toast) * [Toggle Group](/primitives/toggle-group) * [Toggle](/primitives/toggle) * [Toolbar](/primitives/toolbar) * [Tooltip](/primitives/tooltip) Interactions ------------ * [Focus Visible](/interactions/focus-visible) * [Focus](/interactions/focus) * [Hover](/interactions/hover) * [Move](/interactions/move) * [Press](/interactions/press) Utilities --------- * [Autofill](/utilities/autofill) * [Date Adapter](/utilities/date-adapter) * [Focus Trap](/utilities/focus-trap) * [Visually Hidden](/utilities/visually-hidden) Primitives Menu ==== A menu is a list of options or commands presented to the user in a dropdown list. Import ------ Import the Menu primitives from `ng-primitives/menu`. import { NgpMenu, NgpMenuItem, NgpMenuTrigger, NgpSubmenuTrigger } from 'ng-primitives/menu'; Usage ----- Assemble the menu directives in your template.
Item 1
Item 2
Item 3
 Examples -------- Here are some additional examples of how to use the Menu primitives. ### Submenu The menu can contain submenus, which are nested menus that can be opened by hovering on a menu item. API Reference ------------- The following directives are available to import from the `ng-primitives/menu` package: ### NgpMenuTrigger The `NgpMenuTrigger` directive allows you to turn an element into a menu trigger. * Selector: `[ngpMenuTrigger]` * Exported As: `ngpMenuTrigger` The menu template to display when the trigger is activated. #### Data Attributes The following data attributes are available on the `NgpMenuTrigger` directive: | Attribute | Description | | --- | --- | | `data-open` | Applied when the menu is open. | ### NgpMenu The `NgpMenu` is a container for menu items. * Selector: `[ngpMenu]` * Exported As: `ngpMenu` ### NgpMenuItem The `NgpMenuItem` directive represents a menu item. * Selector: `[ngpMenuItem]` * Exported As: `ngpMenuItem` * Host Directives: [NgpHover](/interactions/hover) , [NgpFocusVisible](/interactions/focus-visible) , [NgpPress](/interactions/press) Define if the menu item is disabled. #### Data Attributes The following data attributes are available on the `NgpMenuItem` directive: | Attribute | Description | | --- | --- | | `data-disabled` | Applied when the item is disabled. | On this page ------------ Copyright © 2025 Angular Primitives --- # Angular Primitives Getting Started --------------- * [Introduction](/getting-started/introduction) * [Get Started](/getting-started/get-started) * [Styling](/getting-started/styling) * [Usage](/getting-started/usage) Primitives ---------- * [Accordion](/primitives/accordion) * [Avatar](/primitives/avatar) * [Button](/primitives/button) * [Checkbox](/primitives/checkbox) * [Date Picker](/primitives/date-picker) * [Dialog](/primitives/dialog) * [File Upload](/primitives/file-upload) * [Form Field](/primitives/form-field) * [Icons](/primitives/icons) * [Input](/primitives/input) * [Listbox](/primitives/listbox) * [Menu](/primitives/menu) * [Pagination](/primitives/pagination) * [Popover](/primitives/popover) * [Progress](/primitives/progress) * [Radio](/primitives/radio) * [Resize](/primitives/resize) * [Roving Focus](/primitives/roving-focus) * [Search](/primitives/search) * [Select](/primitives/select) * [Separator](/primitives/separator) * [Slider](/primitives/slider) * [Switch](/primitives/switch) * [Tabs](/primitives/tabs) * [Textarea](/primitives/textarea) * [Toast](/primitives/toast) * [Toggle Group](/primitives/toggle-group) * [Toggle](/primitives/toggle) * [Toolbar](/primitives/toolbar) * [Tooltip](/primitives/tooltip) Interactions ------------ * [Focus Visible](/interactions/focus-visible) * [Focus](/interactions/focus) * [Hover](/interactions/hover) * [Move](/interactions/move) * [Press](/interactions/press) Utilities --------- * [Autofill](/utilities/autofill) * [Date Adapter](/utilities/date-adapter) * [Focus Trap](/utilities/focus-trap) * [Visually Hidden](/utilities/visually-hidden) Primitives Form Field ========== Import ------ Import the FormField primitives from `ng-primitives/form-field`. import { NgpFormField, NgpLabel, NgpDescription, NgpError, NgpFormControl, } from 'ng-primitives/form-field'; Usage ----- Assemble the form-field directives in your template.

Description

Error

Reusable Component ------------------ Create a reusable component that uses the `NgpFormField` directive. Schematics ---------- Generate a reusable form-field component using the Angular CLI. ng g ng-primitives:primitive form-field ### 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`. API Reference ------------- The following directives are available to import from the `ng-primitives/form-field` package: ### NgpFormField The `NgpFormField` directive is a container for form field elements. Any labels, form controls, or descriptions should be placed within this directive. * Selector: `[ngpFormField]` * Exported As: `ngpFormField` #### Data Attributes | Attribute | Description | | --- | --- | | `data-invalid` | Applied when the form control is invalid. | | `data-valid` | Applied when the form control is valid. | | `data-touched` | Applied when the form control is touched. | | `data-pristine` | Applied when the form control is pristine. | | `data-dirty` | Applied when the form control is dirty. | | `data-pending` | Applied when the form control is pending. | | `data-disabled` | Applied when the form control is disabled. | ### NgpLabel The `NgpLabel` directive is used to mark a label element within a form field. Preferably, there should use an HTML `