# PrimeNG Documentation Generated: 2026-07-01 --- # Guide Pages # Installation Setting up PrimeNG in an Angular CLI project. ## Download- PrimeNG is available for download on the npm registry . ## Examples- An example starter with Angular CLI is available at GitHub . ## Nextsteps- Welcome to the Prime UI Ecosystem! Once you have PrimeNG up and running, we recommend exploring the following resources to gain a deeper understanding of the library. Global configuration Customization of styles Getting support ## Provider- Add providePrimeNG to the list of providers in your app.config.ts and use the theme property to configure a theme such as Aura. ```typescript import { ApplicationConfig } from '@angular/core'; import { providePrimeNG } from 'primeng/config'; import Aura from '@primeuix/themes/aura'; export const appConfig: ApplicationConfig = { providers: [ providePrimeNG({ theme: { preset: Aura } }) ] }; ``` ## Theme- Configure PrimeNG to use a theme like Aura. ```typescript import { ApplicationConfig } from '@angular/core'; import { provideAnimationsAsync } from '@angular/platform-browser/animations/async'; import { providePrimeNG } from 'primeng/config'; import Aura from '@primeuix/themes/aura'; export const appConfig: ApplicationConfig = { providers: [ provideAnimationsAsync(), providePrimeNG({ theme: Aura }) ] }; ``` ## Verify- Verify your setup by adding a component such as Button. Each component can be imported and registered individually so that you only include what you use for bundle optimization. Import path is available in the documentation of the corresponding component. ## Videos Angular CLI is the recommended way to build Angular applications with PrimeNG. --- # Configuration Application wide configuration for PrimeNG. ## Csp- The nonce value to use on dynamically generated style elements in core. ```typescript providePrimeNG({ csp: { nonce: '...' } }) ``` ## Dynamic- Inject the PrimeNG to your application to update the initial configuration at runtime. ```typescript import { Component, OnInit } from '@angular/core'; import { PrimeNG } from 'primeng/config'; @Component({ selector: 'app-root', templateUrl: './app.component.html' }) export class AppComponent implements OnInit { constructor(private primeng: PrimeNG) {} ngOnInit() { this.primeng.ripple.set(true); } } ``` ## Filtermode- Default filter modes to display on DataTable filter menus. ```typescript import { PrimeNGConfig } from 'primeng/api'; @Component({ selector: 'app-root', templateUrl: './app.component.html' }) export class AppComponent implements OnInit { constructor(private primengConfig: PrimeNGConfig) {} ngOnInit() { primengConfig.filterMatchModeOptions = { text: [FilterMatchMode.STARTS_WITH, FilterMatchMode.CONTAINS, FilterMatchMode.NOT_CONTAINS, FilterMatchMode.ENDS_WITH, FilterMatchMode.EQUALS, FilterMatchMode.NOT_EQUALS], numeric: [FilterMatchMode.EQUALS, FilterMatchMode.NOT_EQUALS, FilterMatchMode.LESS_THAN, FilterMatchMode.LESS_THAN_OR_EQUAL_TO, FilterMatchMode.GREATER_THAN, FilterMatchMode.GREATER_THAN_OR_EQUAL_TO], date: [FilterMatchMode.DATE_IS, FilterMatchMode.DATE_IS_NOT, FilterMatchMode.DATE_BEFORE, FilterMatchMode.DATE_AFTER] }; } } ``` ## Inputvariant- Input fields come in two styles, default is outlined with borders around the field whereas filled alternative adds a background color to the field. A theme such as Material may add more additional design changes per each variant. ## Api Locale Options ## Repository Ready to use settings for locales are available at the community supported PrimeLocale repository. We'd appreciate if you could contribute to this repository with pull requests and share it with the rest of the community. ## Runtime The translations can be changed dynamically at runtime, here is an example with ngx-translate. ```typescript import { Component, OnInit } from '@angular/core'; import { PrimeNG } from 'primeng/config'; import { TranslateService } from '@ngx-translate/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html' }) export class AppComponent implements OnInit { constructor(private config: PrimeNG, private translateService: TranslateService) {} ngOnInit() { this.translateService.setDefaultLang('en'); } translate(lang: string) { this.translateService.use(lang); this.translateService.get('primeng').subscribe(res => this.primeng.setTranslation(res)); } } ``` ## Translation A translation is specified using the translation property during initialization. ```typescript providePrimeNG({ translation: { accept: 'Aceptar', reject: 'Rechazar', //translations } }) ``` ## Overlayappendto- Defines the default location of the overlays; self refers to the host element and body targets the document body. Defaults to self . ## Provider- The initial configuration is defined by the providePrimeNG provider during application startup. ```typescript import { ApplicationConfig } from '@angular/core'; import { provideAnimationsAsync } from '@angular/platform-browser/animations/async'; import { providePrimeNG } from 'primeng/config'; export const appConfig: ApplicationConfig = { providers: [ provideAnimationsAsync(), providePrimeNG({ /* options */ }) ] }; ``` ## Ripple- Ripple is an optional animation for the supported components such as buttons. It is disabled by default. ```typescript providePrimeNG({ ripple: true }) ``` ## Theme- PrimeNG provides 4 predefined themes out of the box; Aura, Material, Lara and Nora. See the theming documentation for details. ```typescript import { ApplicationConfig } from '@angular/core'; import { provideAnimationsAsync } from '@angular/platform-browser/animations/async'; import { providePrimeNG } from 'primeng/config'; import Aura from '@primeuix/themes/aura'; export const appConfig: ApplicationConfig = { providers: [ provideAnimationsAsync(), providePrimeNG({ theme: { preset: Aura, options: { prefix: 'p', darkModeSelector: 'system', cssLayer: false } } }) ] }; ``` ## Zindex- ZIndexes are managed automatically to make sure layering of overlay components work seamlessly when combining multiple components. Still there may be cases where you'd like to configure the configure default values such as a custom layout where header section is fixed. In a case like this, dropdown needs to be displayed below the application header but a modal dialog should be displayed above. PrimeNG configuration offers the zIndex property to customize the default values for components categories. Default values are described below and can be customized when setting up PrimeNG. ```typescript import { PrimeNGConfig } from 'primeng/api'; @Component({ selector: 'app-root', templateUrl: './app.component.html' }) export class AppComponent implements OnInit { constructor(private primengConfig: PrimeNGConfig) {} ngOnInit() { this.primengConfig.zIndex = { modal: 1100, // dialog, sidebar overlay: 1000, // dropdown, overlaypanel menu: 1000, // overlay menus tooltip: 1100 // tooltip }; } } ``` --- # Styled Mode Choose from a variety of pre-styled themes or develop your own. ## Architecture- PrimeNG is a design agnostic library so unlike some other UI libraries it does not enforce a certain styling such as material design. Styling is decoupled from the components using the themes instead. A theme consists of two parts; base and preset . The base is the style rules with CSS variables as placeholders whereas the preset is a set of design tokens to feed a base by mapping the tokens to CSS variables. A base may be configured with different presets, currently Aura, Material, Lara and Nora are the available built-in options. The core of the styled mode architecture is based on a concept named design token , a preset defines the token configuration in 3 tiers; primitive , semantic and component . Primitive Tokens Primitive tokens have no context, a color palette is a good example for a primitive token such as blue-50 to blue-900 . A token named blue-500 may be used as the primary color, the background of a message however on its own, the name of the token does not indicate context. Usually they are utilized by the semantic tokens. Semantic Tokens Semantic tokens define content and their names indicate where they are utilized, a well known example of a semantic token is the primary.color . Semantic tokens map to primitive tokens or other semantic tokens. The colorScheme token group is a special variable to define tokens based on the color scheme active in the application, this allows defining different tokens based on the color scheme like dark mode. Component Tokens Component tokens are isolated tokens per component such as inputtext.background or button.color that map to the semantic tokens. As an example, button.background component token maps to the primary.color semantic token which maps to the green.500 primitive token. Best Practices Use primitive tokens when defining the core color palette and semantic tokens to specify the common design elements such as focus ring, primary colors and surfaces. Components tokens should only be used when customizing a specific component. By defining your own design tokens as a custom preset, you'll be able to define your own style without touching CSS. Overriding the PrimeNG components using style classes is not a best practice and should be the last resort, design tokens are the suggested approach. ## Bootstrap- Bootstrap has a reboot utility to reset the CSS of the standard elements. If you are including this utility, you may give it a layer while importing it. ## Colors- Color palette of a preset is defined by the primitive design token group. You can access colors using CSS variables or the $dt utility. @for (color of colors; track color) { {{ color }} @for (shade of shades; track shade) { {{ shade }} } } ## Colorscheme- A token can be defined per color scheme using light and dark properties of the colorScheme property. Each token can have specific values based on the current color scheme. Common Pitfall When customizing an existing preset, your token overrides may be ignored if you don't properly account for color scheme variations. If the original preset defines a token using the colorScheme property, but your customization only provides a direct value, your override will be ignored because the colorScheme property takes precedence over direct values and the system will continue using the preset's scheme-specific values. When customizing tokens that are not defined with colorScheme in the original preset, your customizations will be applied successfully regardless of how you structure them; whether direct or under colorScheme. Best Practices Check how tokens are defined in the preset before customizing from the source . Always maintain the same structure (direct value or colorScheme) as the original preset. Consider both light and dark mode values when overriding scheme-dependent tokens. This approach ensures your customizations will be applied correctly regardless of the user's selected color scheme. ## Component- The design tokens of a specific component is defined at components layer. Overriding components tokens is not the recommended approach if you are building your own style, building your own preset should be preferred instead. This configuration is global and applies to all card components, in case you need to customize a particular component on a page locally, view the Scoped CSS section for an example. ## Darkmode- PrimeNG uses the system as the default darkModeSelector in theme configuration. If you have a dark mode switch in your application, set the darkModeSelector to the selector you utilize such as .my-app-dark so that PrimeNG can fit in seamlessly with your color scheme. Following is a very basic example implementation of a dark mode switch, you may extend it further by involving prefers-color-scheme to retrieve it from the system initially and use localStorage to make it stateful. See this article for more information. In case you prefer to use dark mode all the time, apply the darkModeSelector initially and never change it. It is also possible to disable dark mode completely using false or none as the value of the selector. ## Definepreset- The definePreset utility is used to customize an existing preset during the PrimeNG setup. The first parameter is the preset to customize and the second is the design tokens to override. ## Dt- The $dt function returns the information about a token like the full path and value. This would be useful if you need to access tokens programmatically. ## Extend- The theming system can be extended by adding custom design tokens and additional styles. This feature provides a high degree of customization, allowing you to adjust styles according to your needs, as you are not limited to the default tokens. The example preset configuration adds a new accent button with custom button.accent.color and button.accent.inverse.color tokens. It is also possible to add tokens globally to share them within the components. ## Focusring- Focus ring defines the outline width, style, color and offset. Let's use a thicker ring with the primary color for the outline. ## Font- There is no design for fonts as UI components inherit their font settings from the application. ## Forms- The design tokens of the form input components are derived from the form.field token group. This customization example changes border color to primary on hover. Any component that depends on this semantic token such as dropdown.hover.border.color and textarea.hover.border.color would receive the change. ## Libraries- Example layer configuration for the popular CSS libraries. ## Noir- The noir mode is the nickname of a variant that uses surface tones as the primary and requires and additional colorScheme configuration to implement. A sample preset configuration with black and white variants as the primary color; ## Options- The options property defines the how the CSS would be generated from the design tokens of the preset. prefix The prefix of the CSS variables, defaults to p . For instance, the primary.color design token would be var(--p-primary-color) . darkModeSelector The CSS rule to encapsulate the CSS variables of the dark mode, the default is the system to generate {{ '@' }}media (prefers-color-scheme: dark) . If you need to make the dark mode toggleable based on the user selection define a class selector such as .app-dark and toggle this class at the document root. See the dark mode toggle section for an example. cssLayer Defines whether the styles should be defined inside a CSS layer by default or not. A CSS layer would be handy to declare a custom cascade layer for easier customization if necessary. The default is false . ## Palette- Returns shades and tints of a given color from 50 to 950 as an array. ## Presets- Aura, Material, Lara and Nora are the available built-in options, created to demonstrate the power of the design-agnostic theming. Aura is PrimeTek's own vision, Material follows Google Material Design v2, Lara is based on Bootstrap and Nora is inspired by enterprise applications. Visit the source code to learn more about the structure of presets. You may use them out of the box with modifications or utilize them as reference in case you need to build your own presets from scratch. ## Primary- The primary defines the main color palette, default value maps to the emerald primitive token. Let's setup to use indigo instead. ## Reset- In case PrimeNG components have visual issues in your application, a Reset CSS may be the culprit. CSS layers would be an efficient solution that involves enabling the PrimeNG layer, wrapping the Reset CSS in another layer and defining the layer order. This way, your Reset CSS does not get in the way of PrimeNG components. ## Scale- PrimeNG UI component use rem units, 1rem equals to the font size of the html element which is 16px by default. Use the root font-size to adjust the size of the components globally. This website uses 14px as the base so it may differ from your application if your base font size is different. ## Scopedtokens- Design tokens can be scoped to a certain component using the dt property. In this example, first switch uses the global tokens whereas second one overrides the global with its own tokens. This approach is recommended over the ::ng-deep as it offers a cleaner API while avoiding the hassle of CSS rule overrides. ## Specificity- The @layer is a standard CSS feature to define cascade layers for a customizable order of precedence. If you need to become more familiar with layers, visit the documentation at MDN to begin with. The cssLayer is disabled by default, when it is enabled at theme configuration, PrimeNG wraps the built-in style classes under the primeng cascade layer to make the library styles easy to override. CSS in your app without a layer has the highest CSS specificity, so you'll be able to override styles regardless of the location or how strong a class is written. ## Surface- The color scheme palette that varies between light and dark modes is specified with the surface tokens. Example below uses zinc for light mode and slategray for dark mode. With this setting, light mode, would have a grayscale tone and dark mode would include bluish tone. ## Theme- The theme property is used to customize the initial theme. ```typescript import { ApplicationConfig } from '@angular/core'; import { providePrimeNG } from 'primeng/config'; import Aura from '@primeuix/themes/aura'; export const appConfig: ApplicationConfig = { providers: [ providePrimeNG({ theme: { preset: Aura } }) ] }; ``` ## Updatepreset- Merges the provided tokens to the current preset, an example would be changing the primary color palette dynamically. ## Updateprimarypalette- Updates the primary colors, this is a shorthand to do the same update using updatePreset . ## Updatesurfacepalette- Updates the surface colors, this is a shorthand to do the same update using updatePreset . ## Usepreset- Replaces the current presets entirely, common use case is changing the preset dynamically at runtime. --- # Unstyled Mode Theming PrimeNG with alternative styling approaches. ## Architecture- The term unstyled is used to define an alternative styling approach instead of the default theming with design tokens. In unstyled mode the css variables of the design tokens and the css rule sets that utilize them are not included. Here is an example of an Unstyled Select, the core functionality and accessibility is provided whereas styling is not included. ## Example- Unstyled components require styling using your preferred approach. We recommend using Tailwind CSS with PassThrough attributes, a combination that works seamlessly together. The tailwindcss-primeui even provides special variants such as p-outlined: , p-vertical for the PrimeNG components. The example below demonstrates how to style a button component with Tailwind CSS using PassThrough attributes. Before you begin, refer to the pass through section in the button documentation to familiarize yourself with the component's internal structure and PassThrough attributes. In this example, we'll target the root , label and icon elements to apply custom styles. ## Global- A global configuration can be created at application level to avoid repetition via the global pt option so that the styles can be shared from a single location. A particular component can still override a global configuration with its own pt property. ```typescript import { ApplicationConfig } from '@angular/core'; export const appConfig: ApplicationConfig = { providers: [ providePrimeNG({ unstyled: true, pt: { button: { root: 'bg-teal-500 hover:bg-teal-700 active:bg-teal-900 cursor-pointer py-2 px-4 rounded-full border-0 flex gap-2', label: 'text-white font-bold text-lg', icon: 'text-white text-xl!' } } }) ] }; ``` ## Setup- Unstyled mode is enabled for the whole suite by enabling unstyled option during PrimeNG installation. Alternatively even in the default styled mode, a particular component can still be used as unstyled by adding the unstyled prop of the component. ## Voltui- Tailwind CSS is perfect fit for the unstyled mode, PrimeTek has even initiated a new UI library called Volt UI based on the unstyled PrimeVue and Tailwind CSS v4. Volt follows the code ownership model where the components are located in the application codebase rather than node_modules. All components within Volt are essentially wrapped versions of the unstyled equivalents, with an added layer of theming through Tailwind CSS v4. This approach, along with the templating features, offers complete control over the theming and presentation. Volt will also be available for PrimeReact. In the future, PrimeTek may bring Volt to Angular via PrimeNG if there is significant community demand. Currently, Volt-Vue can serve as a reference when styling your unstyled PrimeNG components with Tailwind CSS. --- # Icons PrimeIcons is the default icon library of PrimeNG with over 250 open source icons. ## Basic- PrimeIcons use the pi pi-{icon} syntax such as pi pi-check . A standalone icon can be displayed using an element such as i or span ## Color- Icon color is defined with the color property which is inherited from parent by default. ## Constants- Constants API is available to reference icons easily when used programmatically. ```typescript import { Component } from '@angular/core'; import { PrimeIcons, MenuItem } from 'primeng/api'; @Component({ selector: 'prime-icons-constants-demo', templateUrl: './prime-icons-constants-demo.html' }) export class PrimeIconsConstantsDemo { items: MenuItem[]; ngOnInit() { this.items = [ { label: 'New', icon: PrimeIcons.PLUS, }, { label: 'Delete', icon: PrimeIcons.TRASH } ]; } } ``` ## Download- PrimeIcons is available at npm, run the following command to download it to your project. ## Figma- PrimeIcons library is now available on Figma Community . By adding them as a library, you can easily use these icons in your designs. ## List- Here is the full list of PrimeIcons. More icons will be added periodically and you may also request new icons at the issue tracker. ## Size- Size of an icon is controlled with the font-size property of the element. ## Spin- Special pi-spin class applies infinite rotation to an icon. --- # Custom Icons Use custom icons with PrimeNG components. ## Fontawesome- Font Awesome is a popular icon library with a wide range of icons. ## Image- Any type of image can be used as an icon. ## Material- Material icons is the official icon library based on Google Material Design. ## Svg- Inline SVGs are embedded inside the dom. --- # Pass Through Pass Through Props allow direct access to the underlying elements for complete customization. ## Basic- Each component has a special pt property to define an object with keys corresponding to the available DOM elements. Each value can either be a string, an object or a function that returns a string or an object to define the arbitrary properties to apply to the element such as styling, aria, data-* or custom attributes. If the value is a string or a function that returns a string, it is considered as a class definition and added to the class attribute of the element. Every component documentation has a dedicated section to document the available section names exposed via PT. ## Global- PassThrough object can also be defined at a global level to apply all components in an application using the providePrimeNG provider. For example, with the configuration here all panel headers have the bg-primary style class and all autocomplete components have a fixed width. These settings can be overridden by a particular component as components pt property has higher precedence over global pt by default. ## Instance- In cases where you need to access the UI Component instance, define a component passthrough type that exposes the component instance or a function that receives a PassThroughContext as parameter. ## Introduction- In traditional 3rd party UI libraries, users are limited to the API provided by component author. This API commonly consists of inputs, outputs, and content projection. Whenever a requirement emerges for a new customization option in the API, the component author needs to develop and publish it with a new release. Vision of PrimeTek is "Your Components, Not Ours" . The pass through feature is a key element to implement this vision by exposing the component internals in order to apply arbitrary attributes and listeners to the DOM elements. The primary advantage of this approach is that it frees you from being restricted by the main component API. We recommend considering the pass-through feature whenever you need to tailor a component that lacks a built-in feature for your specific requirement. Each component has a special pt property to define an object with keys corresponding to the available DOM elements. A value of a key can either be a string, an object or a function to define the arbitrary properties such as styling, aria, data-* or custom attributes for the element. If the value is a string or a function that returns a string, it serves as a shorthand for a style class definition. Every component documentation has a dedicated segment to document the available section names in the interactive PT Viewer. Panel Example In this example, a Panel is customized with various options through pt . The styling is overriden with Tailwind CSS and header receives custom attributes along with a click event. The attributes passed to the header are not available in the component API, thanks to PassThrough feature, this is no longer an issue as you are not limited to the component api. Note that, you may avoid the ! based overrides in Tailwind classes if you setup CSS Layers with PrimeNG. Visit the Override section at Tailwind integration for examples. ## Lifecycle- Lifecycle hooks of components are exposed as pass through using the hooks property so that callback functions can be registered. Available callbacks are onBeforeInit , onInit , onChanges , onDoCheck , onAfterContentInit , onAfterContentChecked , onAfterViewInit , onAfterViewChecked and onDestroy . Refer to the Angular documentation for detailed information about lifecycle hooks. ## Pcprefix- A UI component may also use other UI components, in this case section names are prefixed with pc (Prime Component) to denote the PrimeNG component begin used. This distinguishes components from standard DOM elements and indicating the necessity for a nested structure. For example, the badge section is identified as pcBadge because the button component incorporates the badge component internally. ## Ptoptions- The ⁠ptOptions property determines how a component's local PassThrough configuration merges with the global PT configuration, as demonstrated in the following examples using both global and component-level settings. The mergeSections defines whether the sections from the main configuration gets added and the mergeProps controls whether to override or merge the defined props. Defaults are true for mergeSections and false for mergeProps . Global Configuration mergeSections: true, mergeProps: false (default) mergeSections: true, mergeProps: true mergeSections: false, mergeProps: true mergeSections: false, mergeProps: false --- # Tailwind CSS Integration between PrimeNG and Tailwind CSS. ## Animations- The plugin also adds extended animation utilities that can be used with the styleclass and animateonscroll directives. ```typescript import { Component, OnInit } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { SelectModule } from 'primeng/select'; @Component({ template: `

Animations

Class Property
animate-fadein fadein 0.15s linear
animate-fadeout fadeout 0.15s linear
animate-slidedown slidedown 0.45s ease-in-out
animate-slideup slideup 0.45s cubic-bezier(0, 1, 0, 1)
animate-scalein scalein 0.15s linear
animate-fadeinleft fadeinleft 0.15s linear
animate-fadeoutleft fadeoutleft 0.15s linear
animate-fadeinright fadeinright 0.15s linear
animate-fadeoutright fadeoutright 0.15s linear
animate-fadeinup fadeinup 0.15s linear
animate-fadeoutup fadeoutup 0.15s linear
animate-fadeindown fadeindown 0.15s linear
animate-fadeoutup fadeoutup 0.15s linear
animate-width width 0.15s linear
animate-flip flip 0.15s linear
animate-flipup flipup 0.15s linear
animate-flipleft fadein 0.15s linear
animate-flipright flipright 0.15s linear
animate-zoomin zoomin 0.15s linear
animate-zoomindown zoomindown 0.15s linear
animate-zoominleft zoominleft 0.15s linear
animate-zoominright zoominright 0.15s linear
animate-zoominup zoominup 0.15s linear

Animation Duration

Class Property
animate-duration-0 animation-duration: 0s
animate-duration-75 animation-duration: 75ms
animate-duration-100 animation-duration: 100ms
animate-duration-200 animation-duration: 200ms
animate-duration-300 animation-duration: 300ms
animate-duration-400 animation-duration: 400ms
animate-duration-500 animation-duration: 500ms
animate-duration-700 animation-duration: 700ms
animate-duration-1000 animation-duration: 1000ms
animate-duration-2000 animation-duration: 2000ms
animate-duration-3000 animation-duration: 300ms

Animation Delay

Class Property
animate-delay-none animation-duration: 0s
animate-delay-75 animation-delay: 75ms
animate-delay-100 animation-delay: 100ms
animate-delay-150 animation-delay: 150ms
animate-delay-200 animation-delay: 200ms
animate-delay-300 animation-delay: 300ms
animate-delay-400 animation-delay: 400ms
animate-delay-500 animation-delay: 500ms
animate-delay-700 animation-delay: 700ms
animate-delay-1000 animation-delay: 1000ms

Iteration Count

Class Property
animate-infinite animation-iteration-count: infinite
animate-once animation-iteration-count: 1
animate-twice animation-iteration-count: 2

Direction

Class Property
animate-normal animation-direction: normal
animate-reverse animation-direction: reverse
animate-alternate animation-direction: alternate
animate-alternate-reverse animation-direction: alternate-reverse

Timing Function

Class Property
animate-ease-linear animation-timing-function: linear
animate-ease-in animation-timing-function: cubic-bezier(0.4, 0, 1, 1)
animate-ease-out animation-timing-function: cubic-bezier(0, 0, 0.2, 1)
animate-ease-in-out animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1)

Fill Mode

Class Property
animate-fill-none animation-fill-mode: normal
animate-fill-forwards animation-fill-mode: forwards
animate-fill-backwards animation-fill-mode: backwards
animate-fill-both animation-fill-mode: both

Play State

Class Property
animate-running animation-play-state: running
animate-paused animation-play-state: paused

Backface Visibility State

Class Property
backface-visible backface-visibility: visible
backface-hidden backface-visibility: hidden
`, standalone: true, imports: [SelectModule, FormsModule] }) export class TailwindAnimationsDemo implements OnInit { animation: any = null; ngOnInit() { this.animations = [ 'fadein', 'fadeout', 'slideup', 'scalein', 'fadeinleft', 'fadeoutleft', 'fadeinright', 'fadeoutright', 'fadeinup', 'fadeoutup', 'width', 'flipup', 'flipleft', 'flipright', 'zoomin', 'zoomindown', 'zoominleft', 'zoominright', 'zoominup' ]; } } ``` ## Colorpalette- PrimeNG color palette as utility classes. ```typescript import { Component } from '@angular/core'; @Component({ template: `
primary
highlight
box
`, standalone: true, imports: [] }) export class TailwindColorPaletteDemo { shades: number[] = [0, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950]; colors: string[] = ['primary', 'surface']; } ``` ## Darkmode- In styled mode, PrimeNG uses the system as the default darkModeSelector in theme configuration. If you have a dark mode switch in your application, ensure that darkModeSelector is aligned with the Tailwind dark variant for seamless integration. Note that, this particular configuration isn't required if you're utilizing the default system color scheme. Suppose that, the darkModeSelector is set as my-app-dark in PrimeNG. Tailwind v4 Add a custom variant for dark with a custom selector. Tailwind v3 Use the plugins option in your Tailwind config file to configure the plugin. ## Extensions- The plugin extends the default configuration with a new set of utilities. All variants and breakpoints are supported e.g. dark:sm:hover:bg-primary . Color Palette Class Property primary-[50-950] Primary color palette. surface-[0-950] Surface color palette. primary Default primary color. primary-contrast Default primary contrast color. primary-emphasis Default primary emphasis color. border-surface Default primary emphasis color. bg-emphasis Emphasis background e.g. hovered element. bg-highlight Highlight background. bg-highlight-emphasis Highlight background with emphasis. rounded-border Border radius. text-color Text color with emphasis. text-color-emphasis Default primary emphasis color. text-muted-color Secondary text color. text-muted-color-emphasis Secondary text color with emphasis. ## Form- Using Tailwind utilities for the responsive layout of a form with PrimeNG components. ```typescript import { Component, OnInit } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { DatePickerModule } from 'primeng/datepicker'; import { SelectModule } from 'primeng/select'; import { InputTextModule } from 'primeng/inputtext'; import { Country } from '@/domain/customer'; @Component({ template: `
@if (selectedCountry) {
{{ selectedCountry.name }}
}
{{ country.name }}
`, standalone: true, imports: [DatePickerModule, SelectModule, InputTextModule, FormsModule] }) export class TailwindFormDemo implements OnInit { countries: any[] | undefined; selectedCountry: string | undefined; ngOnInit() { this.countries = [ { name: 'Australia', code: 'AU' }, { name: 'Brazil', code: 'BR' }, { name: 'China', code: 'CN' }, { name: 'Egypt', code: 'EG' }, { name: 'France', code: 'FR' }, { name: 'Germany', code: 'DE' }, { name: 'India', code: 'IN' }, { name: 'Japan', code: 'JP' }, { name: 'Spain', code: 'ES' }, { name: 'United States', code: 'US' } ]; } } ``` ## Headless- A headless PrimeNG dialog with a custom UI. ```typescript import { Component } from '@angular/core'; import { ButtonModule } from 'primeng/button'; import { DialogModule } from 'primeng/dialog'; import { InputTextModule } from 'primeng/inputtext'; @Component({ template: `
`, standalone: true, imports: [ButtonModule, DialogModule, InputTextModule] }) export class TailwindHeadlessDemo { visible: boolean = false; showDialog() { this.visible = true; } closeDialog() { this.visible = false; } } ``` ## Override- Tailwind utilities may not be able to override the default styling of components due to css specificity, there are two possible solutions; Import and CSS Layer. Important Use the ! as a prefix to enforce the styling. This is not the recommend approach, and should be used as last resort to avoid adding unnecessary style classes to your bundle. Tailwind v4 Tailwind v3 CSS Layer CSS Layer provides control over the css specificity so that Tailwind utilities can safely override components. Tailwind v4 Ensure primeng layer is after theme and base , but before the other Tailwind layers such as utilities . No change in the CSS configuration is required. Tailwind v3 The primeng layer should be between base and utilities. Tailwind v3 does not use native layer so needs to be defined with CSS. ## Overview- Tailwind CSS is a popular CSS framework based on a utility-first design. The core provides flexible CSS classes with predefined CSS rules to build your own UI elements. For example, instead of an opinionated btn class as in Bootstrap, Tailwind offers primitive classes like bg-blue-500 , rounded and p-4 to apply a button. A set of reusable classes can also be grouped as a Tailwind CSS component and there are even a couple of libraries that take this approach to build components specifically for Tailwind. Tailwind is an outstanding CSS library, however it lacks a true comprehensive UI suite when combined with Angular, this is where PrimeNG comes in by providing a wide range of highly accessible and feature rich UI component library. The core of PrimeNG does not depend on Tailwind CSS. ## Plugin- The tailwindcss-primeui is an official plugin by PrimeTek to provide first class integration between a Prime UI library like PrimeNG and Tailwind CSS. It is designed to work both in styled and unstyled modes. In styled mode, for instance the semantic colors such as primary and surfaces are provided as Tailwind utilities e.g. bg-primary , text-surface-500 , text-muted-color . If you haven't already done so, start by integrating Tailwind into your project. Detailed steps for this process can be found in the Tailwind documentation . After successfully installing Tailwind, proceed with the installation of the PrimeUI plugin. This single npm package comes with two libraries: the CSS version is compatible with Tailwind v4, while the JS version is designed for Tailwind v3. Tailwind v4 In the CSS file that contains the tailwindcss import, add the tailwindcss-primeui import as well. For a comprehensive starter guide, review the primeng-quickstart-tailwind repository which demonstrates the integration. Tailwind v3 Use the plugins option in your Tailwind config file to configure the plugin. --- # LLMs.txt LLM-optimized documentation endpoints for PrimeNG components. ## Llmsfulltxt- The llms-full.txt file is a complete list of all the pages in the PrimeNG documentation. It is used to help AI models understand the entire documentation set. ## Llmstxt- The llms.txt file is an industry standard that helps AI models better understand and navigate the PrimeNG documentation. It lists key pages in a structured format, making it easier for LLMs to retrieve relevant information. ## Markdownextension- Add a .md to a page's URL to display a Markdown version of that page. --- # MCP Server Model Context Protocol (MCP) server for PrimeNG component library. ## Claudecode- Add the PrimeNG MCP server using the CLI. After adding, start a new session and use /mcp to verify the connection. ## Cursor- Create .cursor/mcp.json in your project or ~/.cursor/mcp.json for global configuration. ```typescript { "mcpServers": { "primeng": { "command": "npx", "args": ["-y", "@primeng/mcp"] } } } ``` ## Exampleprompts- Once installed, try asking your AI assistant: ```typescript "Show me how to use the Table component with sorting and filtering" "What props does the Button component have?" "How do I customize the Dialog component styling with Pass Through?" "Compare the Select and Listbox components" "What's the best component for a date picker?" "How do I migrate from PrimeNG v20 to v21?" ``` ## Introduction- Model Context Protocol (MCP) is an open standard that enables AI models to connect with external tools and data sources . The PrimeNG MCP server provides AI assistants with comprehensive access to: Component documentation including props , events , templates , and methods Theming and styling with Pass Through and design tokens Code examples and usage patterns Migration guides for version upgrades Installation and configuration guides ## Openaicodex- Add the PrimeNG MCP server using the CLI or edit ~/.codex/config.toml directly. ## Tools- Component Information Tools for exploring and understanding PrimeNG components. list_components : List all PrimeNG components with categories get_component : Get detailed info about a specific component search_components : Search components by name or description get_component_props : Get all props for a component get_component_events : Get all events for a component get_component_methods : Get all methods for a component get_component_slots : Get all templates for a component compare_components : Compare two components side by side Code Examples Tools for retrieving code samples and generating templates. get_usage_example : Get code examples for a component list_examples : List all available code examples get_example : Get a specific example by component and section generate_component_template : Generate a basic component template Theming & Styling Tools for customizing component appearance and styling. get_component_pt : Get Pass Through options for DOM customization get_component_tokens : Get design tokens (CSS variables) get_component_styles : Get CSS class names get_theming_guide : Get detailed theming guide get_passthrough_guide : Get Pass Through customization guide get_tailwind_guide : Get Tailwind CSS integration guide Documentation & Guides Tools for accessing PrimeNG documentation and guides. list_guides : List all guides and documentation pages get_guide : Get a specific guide by name get_configuration : Get PrimeNG configuration options get_installation : Get installation instructions get_accessibility_guide : Get accessibility guide get_accessibility_info : Get accessibility info for a component Migration Tools for upgrading between PrimeNG versions. get_migration_guide : Get migration guide overview migrate_v18_to_v19 : v18 to v19 migration guide migrate_v19_to_v20 : v19 to v20 migration guide migrate_v20_to_v21 : v20 to v21 migration guide Search & Discovery Tools for finding components based on various criteria. search_all : Search across components, guides, and props suggest_component : Suggest components based on use case find_by_prop : Find components with a specific prop find_by_event : Find components that emit a specific event find_components_with_feature : Find components supporting a feature get_related_components : Find related components ## Vscode- Create .vscode/mcp.json in your project or ~/Library/Application Support/Code/User/mcp.json for global configuration. ```typescript { "servers": { "primeng": { "command": "npx", "args": ["-y", "@primeng/mcp"] } } } ``` ## Windsurf- Edit ~/.codeium/windsurf/mcp_config.json to add the PrimeNG MCP server. ```typescript { "mcpServers": { "primeng": { "command": "npx", "args": ["-y", "@primeng/mcp"] } } } ``` ## Zed- Add to your Zed settings at ~/.config/zed/settings.json (Linux) or ~/Library/Application Support/Zed/settings.json (macOS). ```typescript { "context_servers": { "primeng": { "command": { "path": "npx", "args": ["-y", "@primeng/mcp"] } } } } ``` --- # Accessibility PrimeNG has WCAG 2.1 AA level compliance. ## Colors- Colors on a web page should aim a contrast ratio of at least 4.5:1 and consider a selection of colors that do not cause vibration. Good Contrast Color contrast between the background and the foreground content should be sufficient enough to ensure readability. Example below displays two cases with good and bad samples. GOOD BAD Vibration Color vibration is leads to an illusion of motion due to choosing colors that have low visibility against each other. Color combinations need to be picked with caution to avoid vibration. VIBRATE Dark Mode Highly saturated colors should be avoided when used within a dark design scheme as they cause eye strain. Instead desaturated colors should be preferred. Indigo 500 Indigo 200 ## Formcontrols- Native form elements should be preferred instead of elements that are meant for other purposes like presentation. As an example, button below is rendered as a form control by the browser, can receive focus via tabbing and can be used with space key as well to trigger. On the other hand, a fancy css based button using a div has no keyboard or screen reader support. tabindex is required to make a div element accessible in addition to use a keydown to bring the keyboard support back. To avoid the overload and implementing functionality that is already provided by the browser, native form controls should be preferred. Relations Form components must be related to another element that describes what the form element is used for. This is usually achieved with the label element. ## Introduction- According to the World Health Organization, 15% of the world population has a disability to some degree. As a result, accessibility features in any context such as a ramp for wheelchair users or a multimedia with captions are crucial to ensure content can be consumed by anyone. Disabilities Types of disabilities are diverse so you need to know your audience well and how they interact with the content created. There four main categories; Visual Impairments Blindness, low-level vision or color blindness are the common types of visual impairments. Screen magnifiers and the color blind mode are usually built-in features of the browsers whereas for people who rely on screen readers, page developers are required to make sure content is readable by the readers. Popular readers are NVDA , JAWS and ChromeVox . Hearing Impairments Deafness or hearing loss refers to the inability to hear sounds totally or partially. People with hearing impairments use assistive devices however it may not be enough when interacting with a web page. Common implementation is providing textual alternatives, transcripts and captions for content with audio. Mobility Impairments People with mobility impairments have disabilities related to movement due to loss of a limb, paralysis or other varying reasons. Assistive technologies like a head pointer is a device to interact with a screen whereas keyboard or a trackpad remain as solutions for people who are not able to utilize a mouse. Cognitive Impairments Cognitive impairments have a wider range that includes people with learning disabilities, depression and dyslexia. A well designed content also leads to better user experience for people without disabilities so designing for cognitive impairments result in better design for any user. ## Semantichtml- HTML offers various element to organize content on a web page that screen readers are aware of. Preferring Semantic HTML for good semantics provide out of the box support for reader which is not possible when regular div elements with classes are used. Consider the following example that do not mean too much for readers. Same layout can be achieved using the semantic elements with screen reader support built-in. ## Waiaria- ARIA refers to "Accessible Rich Internet Applications" is a suite to fill the gap where semantic HTML is inadequate. These cases are mainly related to rich UI components/widgets. Although browser support for rich UI components such as a datepicker or colorpicker has been improved over the past years many web developers still utilize UI components derived from standard HTML elements created by them or by other projects like PrimeNG. These types of components must provide keyboard and screen reader support, the latter case is where the WAI-ARIA is utilized. ARIA consists of roles, properties and attributes. Roles define what the element is mainly used for e.g. checkbox , dialog , tablist whereas States and Properties define the metadata of the element like aria-checked , aria-disabled . Consider the following case of a native checkbox. It has built-in keyboard and screen reader support. A fancy checkbox with css animations might look more appealing but accessibility might be lacking. Checkbox below may display a checked font icon with animations however it is not tabbable, cannot be checked with space key and cannot be read by a reader. One alternative is using ARIA roles for readers and use javascript for keyboard support. Notice the usage of aria-labelledby as a replacement of the label tag with for. However the best practice is combining semantic HTML for accessibility while keeping the design for UX. This approach involves hiding a native checkbox for accessibility and using javascript events to update its state. Notice the usage of p-sr-only that hides the elements from the user but not from the screen reader. A working sample is the PrimeNG checkbox that is tabbable, keyboard accessible and is compliant with a screen reader. Instead of ARIA roles it relies on a hidden native checkbox. Remember Me ## Wcag- WCAG refers to Web Content Accessibility Guideline , a standard managed by the WAI (Web Accessibility Initiative) of W3C (World Wide Web Consortium). WCAG consists of recommendations for making the web content more accessible. PrimeNG components aim high level of WCAG compliancy in the near future. Various countries around the globe have governmental policies regarding web accessibility as well. Most well known of these are Section 508 in the US and Web Accessibility Directive of the European Union. --- # Animations Built-in CSS animations for PrimeNG components. ## Anchoredoverlays- Anchored overlays are the components that have a floating ui positioned relatively to another element such as Select, Popover. The enter and leave animations are defined with the .p-anchored-overlay-enter-active and .p-anchored-overlay-leave-active classes. ## Collapsibles- Collapsible components have a content that is toggleable including Accordion, Panel, Fieldset, Stepper and PanelMenu. The enter and leave animations are defined with the .p-collapsible-enter-active and .p-collapsible-leave-active classes. Header I Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Header II Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi. Header III Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi. ## Dialog- Overlays such as Dialog and Drawer are positioned relative to the viewport and have their own animations. Update your information. Username Email ## Disable- Individual animations can be reduced and even disabled completely using the animation duration. ## Introduction- Various PrimeNG Components utilize native CSS animations to provide an enhanced user experience. The default animations are based on the best practices recommended by the usability experts. In case you need to customize the default animations, this documentation covers the entire set of built-in animations. Animations are defined using a combination of style classes and keyframes. The ⁠ .{classname}-enter-active and ⁠ .{classname}-leave-active classes specify the animation name, duration, and easing function. You can customize animations globally by overriding the default animation classes, affecting all components. Alternatively, you can apply scoped classes to individual components to modify their animations independently. For demo purposes, this second approach is used throughout the next sections. ## Reference- List of class names of the CSS animations used by the components. Component Enter Class Leave Class Accordion .p-collapsible-enter-active .p-collapsible-leave-active AutoComplete .p-anchored-overlay-enter-active .p-anchored-overlay-leave-active CascadeSelect .p-anchored-overlay-enter-active .p-anchored-overlay-leave-active ColorPicker .p-anchored-overlay-enter-active .p-anchored-overlay-leave-active ConfirmPopup .p-anchored-overlay-enter-active .p-anchored-overlay-leave-active ContextMenu .p-anchored-overlay-enter-active .p-anchored-overlay-leave-active DatePicker .p-anchored-overlay-enter-active .p-anchored-overlay-leave-active Dialog .p-dialog-enter-active .p-dialog-leave-active Drawer .p-drawer-enter-active .p-drawer-leave-active Fieldset .p-collapsible-enter-active .p-collapsible-leave-active Galleria .p-galleria-enter-active .p-galleria-leave-active Image .p-image-original-enter-active .p-image-original-leave-active Menu .p-anchored-overlay-enter-active .p-anchored-overlay-leave-active Message .p-message-enter-active .p-message-leave-active Modal Masks .p-overlay-mask-enter-active .p-overlay-mask-leave-active MultiSelect .p-anchored-overlay-enter-active .p-anchored-overlay-leave-active Panel .p-collapsible-enter-active .p-collapsible-leave-active PanelMenu .p-collapsible-enter-active .p-collapsible-leave-active Password .p-anchored-overlay-enter-active .p-anchored-overlay-leave-active Select .p-anchored-overlay-enter-active .p-anchored-overlay-leave-active Stepper .p-collapsible-enter-active .p-collapsible-leave-active TieredMenu .p-anchored-overlay-enter-active .p-anchored-overlay-leave-active Toast .p-toast-message-enter-active .p-toast-message-leave-active TreeSelect .p-anchored-overlay-enter-active .p-anchored-overlay-leave-active --- # RTL Right-to-left support for PrimeNG components. ## Configuration- The PrimeNG components natively support Right-to-Left (RTL) text direction through a modern CSS implementation utilizing FlexBox and classes like *-inline-start and *-block-end . Consequently, no JavaScript configuration is necessary; setting the document's text direction to RTL is sufficient to enable this feature. The RTL setting can either be set using the dir attribute or with the direction style property. ## Limitations- RTL is widely supported by the UI suite except the Galleria and Carousel components. These components will be enhanced with a modern implementation in upcoming versions with built-in support for RTL. --- # Migration v19 Migration guide to PrimeNG v19. ## Breakingchanges Configuration The PrimeNGConfig has been replaced by PrimeNG and the initial configuration is now done via the providePrimeNG provider during startup. See the installation section for an example. SASS Themes The styled mode theming has been reimplemented from scratch based on an all-new architecture. The theme.css and the primeng/resources do not exist anymore, so any imports of these assets needs to be removed. If you had a custom theme for v17, the theme needs to be recreated using the new APIs. See the customization section at styled mode for details. Removed Components TriStateCheckbox | Use Checkbox with indeterminate option. DataViewLayoutOptions | Use SelectButton instead. pAnimate | Use pAnimateOnScroll instead. Removed Files Themes under the primeng/resources path, migration to new styled mode is necessary. Messages and Message Messages component is deprecated due to unnecessary role of being just a wrapper around multiple message instances and it's replaced with the new Message . Instead of message, users now need to loop through their custom array to display multiple messages to achieve same behavior. The spacing, closable and life properties of the Message have breaking changes to provide Message functionality. Default margin is removed, closable is false by default and messages do not disappear automatically. Message Interface Message interface in primeng/api is renamed as ToastMessageOptions due to name collision with the Message component. Removed Features Sidebar/Drawer size property is removed, use a responsive class utilty as replacement, demos have new examples. Removed Style Classes .p-link , use a button in link mode. .p-highlight , each component have its own class such as .p-select-option-selected . .p-fluid , use the new built-in fluid property of the supported components or the Fluid component. PrimeFlex CSS In case you are using PrimeFlex CSS library, upgrade to PrimeFlex v4 since PrimeFlex v3 is not compatible with PrimeNG v18+ ## Deprecatedcomponents Deprecated Components Components that are deprecated since their functionality is provided by other components. Chips | Use AutoComplete with multiple enabled and typeahead disabled. TabMenu | Use Tabs without panels. Steps | Use Stepper without panels. InlineMessage | Use Message component. TabView | Use the new Tabs components. Accordion | Use with the new AccordionHeader and AccordionContent components. Messages | Use with the new Message component. pDefer | Use Angular defer instead. ## Migrationoverview At PrimeTek, we have been developing UI component libraries since 2008. The web continues to undergo technological advancements, and as a result, we have to modernize and update our libraries to stay relevant. PrimeNG v18 is the next-generation version that fully embraces modern Web APIs and removes technical debt like the legacy-styled mode. Every component has been reviewed and enhanced. The most notable feature is the new styled mode implementation. Previous iterations use SASS at an external repo called PrimeNG-sass-theme which requires compilation of a theme.css a file. This file had to be included in the application and need to be swapped at runtime for basic tasks like dark mode or primary color changes. In v18, styled mode is now part of the core, SASS is not used at all, and a new design token based architecture that fully utilizes CSS variables has been created. The new API is modern and superior to the legacy styled mode. Names of some of the components have been changed to more common alternatives for example, Popover replaced OverlayPanel and InputSwitch is now called ToggleSwitch . Each component has been reviewed for a consistent naming between CSS class names and sections. An example would be the option element of a Select component that uses p-select-option for the class name. Components have been utilized more within other components, for instance Dialog close button is not actually a PrimeNG button so that closeButtonProps can be used to enable the features of button like outlined, raised and more. ## Renamedcomponents Renamed Components Old names are deprecated but still functional, migrate to new import paths instead e.g. primeng/calendar becomes primeng/datepicker . Calendar -> DatePicker . Dropdown -> Select . InputSwitch -> ToggleSwitch . OverlayPanel -> Popover . Sidebar -> Drawer . --- # Migration v20 Migration guide to PrimeNG v20. ## Backwardcompatible Form Enhancements In this iteration, all form components have been reviewed and new demos for template-driven and reactive forms have been added. During this work, limitations have been identified and resolved as well. In addition, we've introduced a new property named invalid to the form components that you may use style a component as invalid. In previous versions, form components style themselves as invalid using a built-in style like the following. This style is opinionated as it is specifally for invalid and dirty states ignoring other potential UX requirements like touched/untouched or form submit. In v20, the new invalid provides full control to highlight a component a invalid. This styling change is backward compatible, meaning the opinionated ng-invalid.ng-dirty class is still included however in future versions, it will be removed. PrimeUIX Themes PrimeUIX is a shared package between all Prime libraries, this shared approach allows PrimeTek teams to share theming and the Design team who is responsible for the Figma UI Kit to work on a single design file, which is the single source of truth. Prior to v20, PrimeNG has its own fork in default styles and for the design tokens {{ '@' }}primeng/themes package is required. With v20, PrimeNG receives the styles from {{ '@' }}primeuix/styles under the hood and the design tokens as theme presets are loaded from {{ '@' }}primeuix/themes . The components need to be adjusted to fit in the PrimeUIX theming by using the host element where applicable, as a result for the components that use host element (<p-* />) as their main container, the styleClass became obselete since native class attribute is already available on the custom element. Refer to the documentation of a particular component to find out if styleClass is deprecated. All of these changes are backward compatible, {{ '@' }}primeng/themes use {{ '@' }}primeuix/themes internally, and migration is easy as replacing the dependency {{ '@' }}primeng/themes with {{ '@' }}primeuix/themes in your application. ## Breaking Our team has put in great deal of effort while updating PrimeNG, and there are no filed breaking changes in v20. ## Deprecations The following items are marked as deprecated. API Deprecated Since Replacement Removal Status @primeng/themes v20 @primeuix/themes v22 pTemplate v20 ng-template with a template reference variable v22 styleClass *(for host enabled components) v20 class v22 Global inputStyle config v20 inputVariant v22 CamelCase Selectors v20 Kebab case v22 pButton iconPos, loadingIcon, icon and label properties v20 pButtonIcon and pButtonLabel directives v22 pButton buttonProps property v20 Use button properties directly on the element v22 p-button badgeClass property v20 badgeSeverity property v22 AutoComplete minLength property v20 minQueryLength v22 OrganizationChart preserveSpace property v20 Obselete property, had no use v22 Paginator dropdownAppendTo property v20 appendTo v22 Message text and escape properties v20 Content projection v22 Password maxLength property v20 maxlength property v22 TreeSelect containerStyle/containerStyleClass properties v20 style and class v22 Table responsiveLayout property v20 Always defaults to scroll, stack mode needs custom implementation v22 TreeSelect default template v20 value template v22 pBadge directive v20 OverlayBadge component v22 clearFilterIcon template of Table v20 Obsolete, not utilized. v22 Inplace closable property. v20 Use templating with closeCallback . v22 ## Overview PrimeNG v20 is an evolution rather than a revolution compared to v18/v19 that introduced the brand new theming architecture. V20 focuses on form enhancements along with the primeuix migration for shared theming between all Prime projects including PrimeVue, PrimeReact and the upcoming projects such as PrimeUI web components. As of v20, PrimeNG has switched PrimeNG to semantic versioning, and as a result changes are iterative, with a smooth migration strategy and no breaking changes. In the future versions, same approach will be put in action and migrations will be trivial with no breaking changes. ## Removals The list of items that were deprecated in previous releases and removed in this iteration. API Deprecated Since Replacement Status in v20 Calendar v18 DatePicker Dropdown v18 Select InputSwitch v18 ToggleSwitch OverlayPanel v18 Popover Sidebar v18 Drawer Chips v18 AutoComplete in multiple mode without typehead option TabMenu v18 Tabs without panels Steps v18 Stepper without panels Messages v18 Message InlineMessage v18 Message TabView v18 Tabs Accordion activeIndex property v18 value property Accordion headerAriaLevel property v18 AccordionHeader aria-level attribute AccordionTab v18 AccordionPanel, AccordionHeader, AccordionContent AutoComplete field property v18 optionLabel property AutoComplete itemSize property v18 virtualScrollItemSize property pDefer v18 Angular deferred views pAutoFocus autofocus property v18 Default attribute directive {{ '[pAutoFocus]="true|false"' }} Badge size property v18 badgeSize property DatePicker monthNavigator, yearNavigator, yearRange, locale properties v18 Obsolete, not utilized. Dialog positionLeft, responsive, breakpoint properties v18 Obsolete, not utilized. InputMask autoFocus property v18 autofocus property. MultiSelect checkicon template v18 headercheckboxicon and itemcheckboxicon . MultiSelect/Select baseZIndex, autoZIndex, showTransitionOptions, hideTransitionOptions v14 overlayOptions property Rating onCancel event and cancelIcon template v18 Obsolete, not utilized. MultiSelect defaultLabel property v18 placeholder property. MultiSelect/Select itemSize property v18 virtualScrollItemSize property Select autoDisplayFirst property v17 Set initial value by model instead TreeSelect showTransitionOptions, hideTransitionOptions v14 overlayOptions property Panel expandIcon and collapseIcon properties v18 headericons template StyleClass enterClass/leaveClass properties v18 enterFromClass and leaveFromClass properties Table scrollDirection property 14 Obsolete, not utilized. Table responsive property 14 An horizontal scroll is displayed for smaller screens Table/TreeTable virtualRowHeight property v18 virtualScrollItemSize property Table autoLayout property v18 Table always uses autoLayout as implementation requirement Tree virtualNodeHeight property v18 virtualScrollItemSize property --- # Migration v21 Migration guide to PrimeNG v21. ## Breaking Beginning with PrimeNG v20, PrimeTek adopted a no-breaking-change policy for incremental major version updates. PrimeNG v21 maintains this policy with one exception: due to the deprecation of Angular's animations package in Angular v20.2, we have migrated to native CSS-based animations. Consequently, the showTransitionOptions and hideTransitionOptions properties that belong to the animations api are deprecated in v21 and no longer functional. v21 will not cause an error as the properties still exist, however your customizations will be ignored. If you currently use these properties for animation customization, please refer to the new animations documentation for the updated approach. Other than this case, v21 should be a drop-in replacement. If you face with any issues during upgrade, please report an issue using at GitHub. ## Deprecations The following items are marked as deprecated. API Deprecated Since Replacement Removal Status showTransitionOptions v21 Native CSS animatons v22 hideTransitionOptions v21 Native CSS animatons v22 Directive PT attribute names e.g. ptInputText v21 PT suffix at the end e.g. pInputTextPT v22 contextMenuSelectionMode v21 "joint" mode will be removed in favor of the "separate". Applies to Tree, TreeTable and Table. v22 ## Removals This version contains no API removals. For a list of APIs scheduled for removal in v22, refer to the v20 deprecations section. ## Whatsnew PrimeNG v21 represents a major advancement in PrimeTek's product vision. Key highlights of this release include: PassThrough attributes for enhanced customization. Unstyled Mode for complete styling flexibility. Modern CSS-based animations . The deprecated provideAnimationsAsync is safe to remove. Initial zoneless support for improved performance. AI-enhanced documentation for better developer experience. Notes The internal packages @primeuix/styles and @primeuix/themes should be version 2.0.2 or higher. These packages are updated automatically with a fresh install. If you encounter any issues with visuals or animations, please verify that you are using the correct versions of these packages. --- # Components # Angular Accordion Component Accordion groups a collection of contents in tabs. ## Accessibility Screen Reader Accordion header elements have a button role and use aria-controls to define the id of the content section along with aria-expanded for the visibility state. The value to read a header element defaults to the value of the header property and can be customized by defining an aria-label or aria-labelledby property. Each header has a heading role, for which the level is customized by headerAriaLevel and has a default level of 2 as per W3C specifications. Disabled accordions headers use aria-disabled and are excluded from the keybord navigation. The content uses region role, defines an id that matches the aria-controls of the header and aria-labelledby referring to the id of the header. Header Keyboard Support ## Basic Accordion is defined using AccordionPanel , AccordionHeader and AccordionContent components. Each AccordionPanel must contain a unique value property to specify the active item. **Example:** ```typescript import { Component } from '@angular/core'; import { AccordionModule } from 'primeng/accordion'; @Component({ template: `
Header I

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Header II

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.

Header III

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.

`, standalone: true, imports: [AccordionModule] }) export class AccordionBasicDemo {} ``` ## Controlled Panels can be controlled programmatically using value property as a model. **Example:** ```typescript import { Component } from '@angular/core'; import { AccordionModule } from 'primeng/accordion'; import { ButtonModule } from 'primeng/button'; @Component({ template: `
Header I

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Header II

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.

Header III

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.

`, standalone: true, imports: [AccordionModule, ButtonModule] }) export class AccordionControlledDemo { active: string = '0'; } ``` ## Disabled Enabling disabled property of an AccordionTab prevents user interaction. **Example:** ```typescript import { Component } from '@angular/core'; import { AccordionModule } from 'primeng/accordion'; @Component({ template: `
Header I

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Header II

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.

Header III

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.

Header IV
`, standalone: true, imports: [AccordionModule] }) export class AccordionDisabledDemo {} ``` ## Dynamic AccordionPanel can be generated dynamically using the standard @for block. **Example:** ```typescript import { Component } from '@angular/core'; import { AccordionModule } from 'primeng/accordion'; @Component({ template: ` @for (tab of tabs; track tab.title) { {{ tab.title }}

{{ tab.content }}

 } `, standalone: true, imports: [AccordionModule] }) export class AccordionDynamicDemo { tabs: any[] = [ { title: 'Title 1', content: 'Content 1', value: '0' }, { title: 'Title 2', content: 'Content 2', value: '1' }, { title: 'Title 3', content: 'Content 3', value: '2' } ]; } ``` ## Multiple Only one tab at a time can be active by default, enabling multiple property changes this behavior to allow multiple tabs. In this case activeIndex needs to be an array. **Example:** ```typescript import { Component } from '@angular/core'; import { AccordionModule } from 'primeng/accordion'; @Component({ template: `
Header I

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Header II

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.

Header III

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.

`, standalone: true, imports: [AccordionModule] }) export class AccordionMultipleDemo {} ``` ## Template Accordion is customized with toggleicon template. **Example:** ```typescript import { Component } from '@angular/core'; import { AccordionModule } from 'primeng/accordion'; import { AvatarModule } from 'primeng/avatar'; import { BadgeModule } from 'primeng/badge'; @Component({ template: `
@if (active) { } @else { } Amy Elsner

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

@if (active) { } @else { } Onyama Limba

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.

@if (active) { } @else { } Ioni Bowcher

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.

`, standalone: true, imports: [AccordionModule, AvatarModule, BadgeModule] }) export class AccordionTemplateDemo {} ``` ## Accordion Accordion groups a collection of contents in tabs. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | value | string \| number \| (string \| number)[] \| null \| undefined | undefined | Value of the active tab. | | multiple | boolean | false | When enabled, multiple tabs can be activated at the same time. | | expandIcon | string | - | Icon of a collapsed tab. | | collapseIcon | string | - | Icon of an expanded tab. | | selectOnFocus | boolean | false | When enabled, the focused tab is activated. | | motionOptions | MotionOptions | - | The motion options. | | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | ### Emits | Name | Parameters | Description | |------|------------|-------------| | onClose | event: AccordionTabCloseEvent | Callback to invoke when an active tab is collapsed by clicking on the header. | | onOpen | event: AccordionTabOpenEvent | Callback to invoke when a tab gets expanded. | ## Accordion Content AccordionContent is a helper component for Accordion component. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | ## Accordion Header AccordionHeader is a helper component for Accordion component. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | ### Templates | Name | Type | Description | |------|------|-------------| | toggleicon | TemplateRef | Toggle icon template. | ## Accordion Panel AccordionPanel is a helper component for Accordion component. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | value | string \| number \| (string \| number)[] \| null \| undefined | undefined | Value of the active tab. | | disabled | boolean | false | Disables the tab when enabled. | | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | ## Pass Through Options | Name | Type | Description | |------|------|-------------| | root | PassThroughOption | Used to pass attributes to the root's DOM element. | | motion | MotionOptions | Used to pass options to the motion component/directive. | ## Theming ### CSS Classes | Class | Description | |-------|-------------| | p-accordion | Class name of the root element | | p-accordioncontent | Class name of the content wrapper | | p-accordioncontent-content | Class name of the content | | p-accordionheader | Class name of the header | | p-accordionheader-toggle-icon | Class name of the toggle icon | | p-accordionpanel | Class name of the panel | ### Design Tokens | Token | CSS Variable | Description | |-------|--------------|-------------| | accordion.transition.duration | --p-accordion-transition-duration | Transition duration of root | | accordion.panel.border.width | --p-accordion-panel-border-width | Border width of panel | | accordion.panel.border.color | --p-accordion-panel-border-color | Border color of panel | | accordion.header.color | --p-accordion-header-color | Color of header | | accordion.header.hover.color | --p-accordion-header-hover-color | Hover color of header | | accordion.header.active.color | --p-accordion-header-active-color | Active color of header | | accordion.header.active.hover.color | --p-accordion-header-active-hover-color | Active hover color of header | | accordion.header.padding | --p-accordion-header-padding | Padding of header | | accordion.header.font.weight | --p-accordion-header-font-weight | Font weight of header | | accordion.header.font.size | --p-accordion-header-font-size | Font size of header | | accordion.header.border.radius | --p-accordion-header-border-radius | Border radius of header | | accordion.header.border.width | --p-accordion-header-border-width | Border width of header | | accordion.header.border.color | --p-accordion-header-border-color | Border color of header | | accordion.header.background | --p-accordion-header-background | Background of header | | accordion.header.hover.background | --p-accordion-header-hover-background | Hover background of header | | accordion.header.active.background | --p-accordion-header-active-background | Active background of header | | accordion.header.active.hover.background | --p-accordion-header-active-hover-background | Active hover background of header | | accordion.header.focus.ring.width | --p-accordion-header-focus-ring-width | Focus ring width of header | | accordion.header.focus.ring.style | --p-accordion-header-focus-ring-style | Focus ring style of header | | accordion.header.focus.ring.color | --p-accordion-header-focus-ring-color | Focus ring color of header | | accordion.header.focus.ring.offset | --p-accordion-header-focus-ring-offset | Focus ring offset of header | | accordion.header.focus.ring.shadow | --p-accordion-header-focus-ring-shadow | Focus ring shadow of header | | accordion.header.toggle.icon.color | --p-accordion-header-toggle-icon-color | Toggle icon color of header | | accordion.header.toggle.icon.hover.color | --p-accordion-header-toggle-icon-hover-color | Toggle icon hover color of header | | accordion.header.toggle.icon.active.color | --p-accordion-header-toggle-icon-active-color | Toggle icon active color of header | | accordion.header.toggle.icon.active.hover.color | --p-accordion-header-toggle-icon-active-hover-color | Toggle icon active hover color of header | | accordion.header.first.top.border.radius | --p-accordion-header-first-top-border-radius | First top border radius of header | | accordion.header.first.border.width | --p-accordion-header-first-border-width | First border width of header | | accordion.header.last.bottom.border.radius | --p-accordion-header-last-bottom-border-radius | Last bottom border radius of header | | accordion.header.last.active.bottom.border.radius | --p-accordion-header-last-active-bottom-border-radius | Last active bottom border radius of header | | accordion.content.border.width | --p-accordion-content-border-width | Border width of content | | accordion.content.border.color | --p-accordion-content-border-color | Border color of content | | accordion.content.background | --p-accordion-content-background | Background of content | | accordion.content.color | --p-accordion-content-color | Color of content | | accordion.content.padding | --p-accordion-content-padding | Padding of content | --- # Angular Animate On Scroll Directive AnimateOnScroll is used to apply animations to elements when entering or leaving the viewport during scrolling. ## Accessibility Screen Reader AnimateOnScroll does not require any roles and attributes. Keyboard Support Component does not include any interactive elements. ## Basic Animation classes are defined with the enterClass and leaveClass properties. This example utilizes tailwindcss-primeui plugin animations however any valid CSS animation is supported. **Example:** ```typescript import { Component } from '@angular/core'; import { AvatarModule } from 'primeng/avatar'; @Component({ template: `
Scroll Down
Individual Lorem ipsum dolor sit amet consectetur adipisicing elit.
Team Lorem ipsum dolor sit amet consectetur adipisicing elit.
Enterprise Lorem ipsum dolor sit amet consectetur adipisicing elit.
Jenna Thompson Lorem ipsum dolor sit amet consectetur adipisicing elit.
Isabel Garcia Lorem ipsum dolor sit amet consectetur adipisicing elit.
Xavier Mason Lorem ipsum dolor sit amet consectetur adipisicing elit.
850K Customers Lorem ipsum dolor sit amet consectetur adipisicing elit.
$1.5M Revenue Lorem ipsum dolor sit amet consectetur adipisicing elit.
140K Sales Lorem ipsum dolor sit amet consectetur adipisicing elit.
Bandwidth Lorem ipsum dolor sit amet consectetur adipisicing elit.
Storage Lorem ipsum dolor sit amet consectetur adipisicing elit.
Requests Lorem ipsum dolor sit amet consectetur adipisicing elit.
`, standalone: true, imports: [AvatarModule] }) export class AnimateOnScrollBasicDemo {} ``` ## Animate On Scroll AnimateOnScroll is used to apply animations to elements when entering or leaving the viewport during scrolling. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | enterClass | string | - | Selector to define the CSS class for enter animation. | | leaveClass | string | - | Selector to define the CSS class for leave animation. | | root | HTMLElement | - | Specifies the root option of the IntersectionObserver API. | | rootMargin | string | - | Specifies the rootMargin option of the IntersectionObserver API. | | threshold | number | - | Specifies the threshold option of the IntersectionObserver API | | once | boolean | - | Whether the scroll event listener should be removed after initial run. | | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | any | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | --- # Angular AutoComplete Component AutoComplete is an input component that provides real-time suggestions when being typed. ## Accessibility Screen Reader Value to describe the component can either be provided via label tag combined with inputId prop or using ariaLabelledBy , ariaLabel props. The input element has combobox role in addition to aria-autocomplete , aria-haspopup and aria-expanded attributes. The relation between the input and the popup is created with aria-controls and aria-activedescendant attribute is used to instruct screen reader which option to read during keyboard navigation within the popup list. In multiple mode, chip list uses listbox role whereas each chip has the option role with aria-label set to the label of the chip. The popup list has an id that refers to the aria-controls attribute of the input element and uses listbox as the role. Each list item has option role and an id to match the aria-activedescendant of the input element. ## advanced-chips-doc This example demonstrates an advanced use case with templating, object handling, dropdown, and multiple mode. **Example:** ```typescript import { Component, OnInit, inject, signal } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { AutoCompleteModule } from 'primeng/autocomplete'; import { ProductService } from '@/service/productservice'; import { Product } from '@/domain/product'; @Component({ template: `
{{ product.name }} {{ product.category }}
\${{ product.price }}
@if (value.price) {
{{ value.name }} \${{ value.price }}
} @else { {{ value }} }
`, standalone: true, imports: [AutoCompleteModule, FormsModule], providers: [ProductService] }) export class AutoCompleteAdvancedChipsDemo implements OnInit { private productService = inject(ProductService); products = signal([]); ngOnInit() { this.productService.getProductsSmall().then((data) => this.products.set(data)); } filterProducts(event: any) { let filtered: Product[] = []; let query = event.query; for (let i = 0; i < this.products().length; i++) { let product = this.products()[i]; if (product.name?.toLowerCase().indexOf(query.toLowerCase()) == 0) { filtered.push(product); } } this.filteredProducts = filtered; } getProductLabel(product: any): string { if (typeof product === 'string') { return product; } return product?.name || ''; } getProductValue(product: any): any { if (typeof product === 'string') { return { name: product, custom: true }; } return { id: product.id, name: product.name, price: product.price, quantity: product.quantity }; } } ``` ## basic-chips-doc With ⁠multiple enabled, the AutoComplete component behaves like a chips or tags input. Use addOnBlur , ⁠addOnTab , and ⁠separator properties to customize the keystroke behavior for adding items. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { AutoCompleteModule } from 'primeng/autocomplete'; @Component({ template: `
`, standalone: true, imports: [AutoCompleteModule, FormsModule] }) export class AutoCompleteBasicChipsDemo { valueBlur: any[] = []; valueTab: any[] = []; valueSeparator: any[] = []; valueCombined: any[] = []; } ``` ## Basic AutoComplete uses ngModel for two-way binding, requires a list of suggestions and a completeMethod to query for the results. The completeMethod gets the query text as event.query property and should update the suggestions with the search results. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { AutoCompleteModule } from 'primeng/autocomplete'; interface AutoCompleteCompleteEvent { originalEvent: Event; query: string; } @Component({ template: `
`, standalone: true, imports: [AutoCompleteModule, FormsModule] }) export class AutoCompleteBasicDemo { items: any[] = []; value: any; search(event: AutoCompleteCompleteEvent) { this.items = [...Array(10).keys()].map((item) => event.query + '-' + item); } } ``` ## clear-icon-doc When showClear is enabled, a clear icon is displayed to clear the value. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { AutoCompleteModule } from 'primeng/autocomplete'; interface AutoCompleteCompleteEvent { originalEvent: Event; query: string; } @Component({ template: `
`, standalone: true, imports: [AutoCompleteModule, FormsModule] }) export class AutoCompleteClearIconDemo { items: any[] = []; value: any; search(event: AutoCompleteCompleteEvent) { this.items = [...Array(10).keys()].map((item) => event.query + '-' + item); } } ``` ## Disabled When disabled is present, the element cannot be edited and focused. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { AutoCompleteModule } from 'primeng/autocomplete'; interface AutoCompleteCompleteEvent { originalEvent: Event; query: string; } @Component({ template: `
`, standalone: true, imports: [AutoCompleteModule, FormsModule] }) export class AutoCompleteDisabledDemo { items: any[] | undefined; selectedItem: any; suggestions: any[] | undefined; search(event: AutoCompleteCompleteEvent) { this.suggestions = [...Array(10).keys()].map((item) => event.query + '-' + item); } } ``` ## Dropdown Enabling dropdown property displays a button next to the input field where click behavior of the button is defined using dropdownMode property that takes blank or current as possible values. blank is the default mode to send a query with an empty string whereas current setting sends a query with the current value of the input. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { AutoCompleteModule } from 'primeng/autocomplete'; interface AutoCompleteCompleteEvent { originalEvent: Event; query: string; } @Component({ template: `
`, standalone: true, imports: [AutoCompleteModule, FormsModule] }) export class AutoCompleteDropdownDemo { items: any[] | undefined; value: any; search(event: AutoCompleteCompleteEvent) { let _items = [...Array(10).keys()]; this.items = event.query ? [...Array(10).keys()].map((item) => event.query + '-' + item) : _items; } } ``` ## Filled Specify the variant property as filled to display the component with a higher visual emphasis than the default outlined style. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { AutoCompleteModule } from 'primeng/autocomplete'; interface AutoCompleteCompleteEvent { originalEvent: Event; query: string; } @Component({ template: `
`, standalone: true, imports: [AutoCompleteModule, FormsModule] }) export class AutoCompleteFilledDemo { items: any[] | undefined; selectedItem: any; suggestions: any[] | undefined; search(event: AutoCompleteCompleteEvent) { this.suggestions = [...Array(10).keys()].map((item) => event.query + '-' + item); } } ``` ## float-label-doc A floating label appears on top of the input field when focused. Visit FloatLabel documentation for more information. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { AutoCompleteModule } from 'primeng/autocomplete'; import { FloatLabelModule } from 'primeng/floatlabel'; interface AutoCompleteCompleteEvent { originalEvent: Event; query: string; } @Component({ template: `
`, standalone: true, imports: [AutoCompleteModule, FloatLabelModule, FormsModule] }) export class AutoCompleteFloatLabelDemo { value1: string | undefined; value2: string | undefined; value3: string | undefined; items: any[] | undefined; search(event: AutoCompleteCompleteEvent) { this.items = [...Array(10).keys()].map((item) => event.query + '-' + item); } } ``` ## Fluid The fluid prop makes the component take up the full width of its container when set to true. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { AutoCompleteModule } from 'primeng/autocomplete'; interface AutoCompleteCompleteEvent { originalEvent: Event; query: string; } @Component({ template: `
`, standalone: true, imports: [AutoCompleteModule, FormsModule] }) export class AutoCompleteFluidDemo { items: any[] = []; value: any; search(event: AutoCompleteCompleteEvent) { this.items = [...Array(10).keys()].map((item) => event.query + '-' + item); } } ``` ## force-selection-doc ForceSelection mode validates the manual input to check whether it also exists in the suggestions list, if not the input value is cleared to make sure the value passed to the model is always one of the suggestions. **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { AutoCompleteModule } from 'primeng/autocomplete'; import { CountryService } from '@/service/countryservice'; interface AutoCompleteCompleteEvent { originalEvent: Event; query: string; } @Component({ template: `
`, standalone: true, imports: [AutoCompleteModule, FormsModule], providers: [CountryService] }) export class AutoCompleteForceSelectionDemo implements OnInit { private countryService = inject(CountryService); countries: any[] | undefined; selectedCountry: any; filteredCountries: any[] | undefined; ngOnInit() { this.countryService.getCountries().then((countries) => { this.countries = countries; }); } filterCountry(event: AutoCompleteCompleteEvent) { let filtered: any[] = []; let query = event.query; for (let i = 0; i < (this.countries as any[]).length; i++) { let country = (this.countries as any[])[i]; if (country.name.toLowerCase().indexOf(query.toLowerCase()) == 0) { filtered.push(country); } } this.filteredCountries = filtered; } } ``` ## Group Option grouping is enabled when group property is set to true . group template is available to customize the option groups. All templates get the option instance as the default local template variable. **Example:** ```typescript import { Component, OnInit } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { AutoCompleteModule } from 'primeng/autocomplete'; import { SelectItemGroup, FilterService } from 'primeng/api'; interface AutoCompleteCompleteEvent { originalEvent: Event; query: string; } @Component({ template: `
{{ group.label }}
`, standalone: true, imports: [AutoCompleteModule, FormsModule] }) export class AutoCompleteGroupDemo implements OnInit { selectedCity: any; filteredGroups: any[] | undefined; groupedCities: SelectItemGroup[] | undefined; ngOnInit() { this.groupedCities = [ { label: 'Germany', value: 'de', items: [ { label: 'Berlin', value: 'Berlin' }, { label: 'Frankfurt', value: 'Frankfurt' }, { label: 'Hamburg', value: 'Hamburg' }, { label: 'Munich', value: 'Munich' } ] }, { label: 'USA', value: 'us', items: [ { label: 'Chicago', value: 'Chicago' }, { label: 'Los Angeles', value: 'Los Angeles' }, { label: 'New York', value: 'New York' }, { label: 'San Francisco', value: 'San Francisco' } ] }, { label: 'Japan', value: 'jp', items: [ { label: 'Kyoto', value: 'Kyoto' }, { label: 'Osaka', value: 'Osaka' }, { label: 'Tokyo', value: 'Tokyo' }, { label: 'Yokohama', value: 'Yokohama' } ] } ]; } filterGroupedCity(event: AutoCompleteCompleteEvent) { let query = event.query; let filteredGroups = []; for (let optgroup of this.groupedCities as SelectItemGroup[]) { let filteredSubOptions = this.filterService.filter(optgroup.items, ['label'], query, 'contains'); if (filteredSubOptions && filteredSubOptions.length) { filteredGroups.push({ label: optgroup.label, value: optgroup.value, items: filteredSubOptions }); } } this.filteredGroups = filteredGroups; } } ``` ## ifta-label-doc IftaLabel is used to create infield top aligned labels. Visit IftaLabel documentation for more information. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { AutoCompleteModule } from 'primeng/autocomplete'; import { IftaLabelModule } from 'primeng/iftalabel'; interface AutoCompleteCompleteEvent { originalEvent: Event; query: string; } @Component({ template: `
`, standalone: true, imports: [AutoCompleteModule, IftaLabelModule, FormsModule] }) export class AutoCompleteIftaLabelDemo { items: any[] | undefined; value: any; search(event: AutoCompleteCompleteEvent) { this.items = [...Array(10).keys()].map((item) => event.query + '-' + item); } } ``` ## Invalid The invalid state is applied using the ⁠invalid property to indicate failed validation, which can be integrated with Angular Forms. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { AutoCompleteModule } from 'primeng/autocomplete'; interface AutoCompleteCompleteEvent { originalEvent: Event; query: string; } @Component({ template: `
`, standalone: true, imports: [AutoCompleteModule, FormsModule] }) export class AutoCompleteInvalidDemo { value1: any; value2: any; suggestions: any[] | undefined; search(event: AutoCompleteCompleteEvent) { this.suggestions = [...Array(10).keys()].map((item) => event.query + '-' + item); } } ``` ## Multiple Enable multiple selection mode using the ⁠multiple property to allow users to select more than one value from the autocomplete. When enabled, the value reference must be an array. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { AutoCompleteModule } from 'primeng/autocomplete'; interface AutoCompleteCompleteEvent { originalEvent: Event; query: string; } @Component({ template: `
`, standalone: true, imports: [AutoCompleteModule, FormsModule] }) export class AutoCompleteMultipleDemo { value1: any[] | undefined; value2: any[] | undefined; items: any[] | undefined; search(event: AutoCompleteCompleteEvent) { this.items = [...Array(10).keys()].map((item) => event.query + '-' + item); } } ``` ## Objects AutoComplete can also work with objects using the optionLabel property that defines the label to display as a suggestion. The value passed to the model would still be the object instance of a suggestion. Here is an example with a Country object that has name and code fields such as {name: "United States", code:"USA"} . **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { AutoCompleteModule } from 'primeng/autocomplete'; import { CountryService } from '@/service/countryservice'; import { Country } from '@/domain/customer'; interface AutoCompleteCompleteEvent { originalEvent: Event; query: string; } @Component({ template: `
`, standalone: true, imports: [AutoCompleteModule, FormsModule], providers: [CountryService] }) export class AutoCompleteObjectsDemo implements OnInit { private countryService = inject(CountryService); countries: any[] | undefined; selectedCountry: any; filteredCountries: any[] | undefined; ngOnInit() { this.countryService.getCountries().then((countries) => { this.countries = countries; }); } filterCountry(event: AutoCompleteCompleteEvent) { let filtered: any[] = []; let query = event.query; for (let i = 0; i < (this.countries as any[]).length; i++) { let country = (this.countries as any[])[i]; if (country.name.toLowerCase().indexOf(query.toLowerCase()) == 0) { filtered.push(country); } } this.filteredCountries = filtered; } } ``` ## reactive-forms-doc AutoComplete can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control. **Example:** ```typescript import { Component, inject } from '@angular/core'; import { ReactiveFormsModule } from '@angular/forms'; import { AutoCompleteModule } from 'primeng/autocomplete'; import { MessageModule } from 'primeng/message'; import { ButtonModule } from 'primeng/button'; import { MessageService } from 'primeng/api'; interface AutoCompleteCompleteEvent { originalEvent: Event; query: string; } @Component({ template: `
@if (isInvalid('value')) { Value is required. }
`, standalone: true, imports: [AutoCompleteModule, MessageModule, ButtonModule, ReactiveFormsModule] }) export class AutoCompleteReactiveFormsDemo { messageService = inject(MessageService); items: any[] | undefined; exampleForm: FormGroup | undefined; formSubmitted: boolean = false; constructor() { this.exampleForm = this.fb.group({ value: ['', Validators.required] }); } search(event: AutoCompleteCompleteEvent) { this.items = [...Array(10).keys()].map((item) => event.query + '-' + item); } onSubmit() { this.formSubmitted = true; if (this.exampleForm.valid) { this.messageService.add({ severity: 'success', summary: 'Success', detail: 'Form is submitted', life: 3000 }); this.exampleForm.reset(); this.formSubmitted = false; } } isInvalid(controlName: string) { const control = this.exampleForm.get(controlName); return control?.invalid && (control.touched || this.formSubmitted); } } ``` ## Sizes AutoComplete provides small and large sizes as alternatives to the base. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { AutoCompleteModule } from 'primeng/autocomplete'; @Component({ template: `
`, standalone: true, imports: [AutoCompleteModule, FormsModule] }) export class AutoCompleteSizesDemo { items: any[] | undefined; value1: any; value2: any; value3: any; search() { this.items = []; } } ``` ## Template AutoComplete offers multiple templates for customization through templating. **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { AutoCompleteModule } from 'primeng/autocomplete'; import { ButtonModule } from 'primeng/button'; import { CountryService } from '@/service/countryservice'; interface AutoCompleteCompleteEvent { originalEvent: Event; query: string; } @Component({ template: `
{{ country.name }}
Available Countries
`, standalone: true, imports: [AutoCompleteModule, ButtonModule, FormsModule], providers: [CountryService] }) export class AutoCompleteTemplateDemo implements OnInit { private countryService = inject(CountryService); countries: any[] | undefined; selectedCountryAdvanced: any[] | undefined; filteredCountries: any[] | undefined; ngOnInit() { this.countryService.getCountries().then((countries) => { this.countries = countries; }); } filterCountry(event: AutoCompleteCompleteEvent) { let filtered: any[] = []; let query = event.query; for (let i = 0; i < (this.countries as any[]).length; i++) { let country = (this.countries as any[])[i]; if (country.name.toLowerCase().indexOf(query.toLowerCase()) == 0) { filtered.push(country); } } this.filteredCountries = filtered; } } ``` ## template-driven-forms-doc **Example:** ```typescript import { Component, inject } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { AutoCompleteModule } from 'primeng/autocomplete'; import { MessageModule } from 'primeng/message'; import { ButtonModule } from 'primeng/button'; import { MessageService } from 'primeng/api'; @Component({ template: `
@if (val.invalid && (val.touched || exampleForm.submitted)) { Value is required. }
`, standalone: true, imports: [AutoCompleteModule, MessageModule, ButtonModule, FormsModule] }) export class AutoCompleteTemplateDrivenFormsDemo { messageService = inject(MessageService); items: any[] = []; value: any; search(event: AutoCompleteCompleteEvent) { this.items = [...Array(10).keys()].map((item) => event.query + '-' + item); } onSubmit(form: any) { if (form.valid) { this.messageService.add({ severity: 'success', summary: 'Success', detail: 'Form Submitted', life: 3000 }); form.resetForm(); } } } ``` ## virtual-scroll-doc Virtual scrolling is an efficient way of rendering the options by displaying a small subset of data in the viewport at any time. When dealing with huge number of options, it is suggested to enable virtual scrolling to avoid performance issues. Usage is simple as setting virtualScroll property to true and defining virtualScrollItemSize to specify the height of an item. **Example:** ```typescript import { Component, OnInit } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { AutoCompleteModule } from 'primeng/autocomplete'; interface AutoCompleteCompleteEvent { originalEvent: Event; query: string; } @Component({ template: `
`, standalone: true, imports: [AutoCompleteModule, FormsModule] }) export class AutoCompleteVirtualScrollDemo implements OnInit { selectedItem: any; filteredItems: any[] | undefined; items: any[] | undefined; ngOnInit() { this.items = []; for (let i = 0; i < 10000; i++) { this.items.push({ label: 'Item ' + i, value: 'Item ' + i }); } } filterItems(event: AutoCompleteCompleteEvent) { //in a real application, make a request to a remote url with the query and return filtered results, for demo we filter at client side let filtered: any[] = []; let query = event.query; for (let i = 0; i < (this.items as any[]).length; i++) { let item = (this.items as any[])[i]; if (item.label.toLowerCase().indexOf(query.toLowerCase()) == 0) { filtered.push(item); } } this.filteredItems = filtered; } } ``` ## Auto Complete AutoComplete is an input component that provides real-time suggestions when being typed. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | minQueryLength | number | - | Minimum number of characters to initiate a search. | | delay | number | - | Delay between keystrokes to wait before sending a query. | | panelStyle | Partial | - | Inline style of the overlay panel element. | | panelStyleClass | string | - | Style class of the overlay panel element. | | inputStyle | Partial | - | Inline style of the input field. | | inputId | string | - | Identifier of the focus input to match a label defined for the component. | | inputStyleClass | string | - | Inline style of the input field. | | placeholder | string | - | Hint text for the input field. | | readonly | boolean | - | When present, it specifies that the input cannot be typed. | | scrollHeight | string | - | Maximum height of the suggestions panel. | | lazy | boolean | - | Defines if data is loaded and interacted with in lazy manner. | | virtualScroll | boolean | - | Whether the data should be loaded on demand during scroll. | | virtualScrollItemSize | number | - | Height of an item in the list for VirtualScrolling. | | virtualScrollOptions | ScrollerOptions | - | Whether to use the scroller feature. The properties of scroller component can be used like an object in it. | | autoHighlight | boolean | - | When enabled, highlights the first item in the list by default. | | forceSelection | boolean | - | When present, autocomplete clears the manual input if it does not match of the suggestions to force only accepting values from the suggestions. | | type | string | - | Type of the input, defaults to "text". | | autoZIndex | boolean | - | Whether to automatically manage layering. | | baseZIndex | number | - | Base zIndex value to use in layering. | | ariaLabel | string | - | Defines a string that labels the input for accessibility. | | dropdownAriaLabel | string | - | Defines a string that labels the dropdown button for accessibility. | | ariaLabelledBy | string | - | Specifies one or more IDs in the DOM that labels the input field. | | dropdownIcon | string | - | Icon class of the dropdown icon. | | unique | boolean | - | Ensures uniqueness of selected items on multiple mode. | | group | boolean | - | Whether to display options as grouped when nested options are provided. | | completeOnFocus | boolean | - | Whether to run a query when input receives focus. | | showClear | boolean | - | When enabled, a clear icon is displayed to clear the value. | | dropdown | boolean | - | Displays a button next to the input field when enabled. | | showEmptyMessage | boolean | - | Whether to show the empty message or not. | | dropdownMode | string | - | Specifies the behavior dropdown button. Default "blank" mode sends an empty string and "current" mode sends the input value. | | multiple | boolean | - | Specifies if multiple values can be selected. | | addOnTab | boolean | - | When enabled, the input value is added to the selected items on tab key press when multiple is true and typeahead is false. | | tabindex | number | - | Index of the element in tabbing order. | | dataKey | string | - | A property to uniquely identify a value in options. | | emptyMessage | string | - | Text to display when there is no data. Defaults to global value in i18n translation configuration. | | autofocus | boolean | - | When present, it specifies that the component should automatically get focus on load. | | autocomplete | string | - | Used to define a string that autocomplete attribute the current element. | | optionGroupChildren | string | - | Name of the options field of an option group. | | optionGroupLabel | string | - | Name of the label field of an option group. | | overlayOptions | OverlayOptions | - | Options for the overlay element. | | suggestions | any[] | - | An array of suggestions to display. | | optionLabel | string \| ((item: any) => string) | - | Property name or getter function to use as the label of an option. | | optionValue | string \| ((item: any) => string) | - | Property name or getter function to use as the value of an option. | | id | string | - | Unique identifier of the component. | | searchMessage | string | '{0} results are available' | Text to display when the search is active. Defaults to global value in i18n translation configuration. | | emptySelectionMessage | string | 'No selected item' | Text to display when filtering does not return any results. Defaults to global value in i18n translation configuration. | | selectionMessage | string | '{0} items selected' | Text to be displayed in hidden accessible field when options are selected. Defaults to global value in i18n translation configuration. | | autoOptionFocus | boolean | - | Whether to focus on the first visible or selected element when the overlay panel is shown. | | selectOnFocus | boolean | - | When enabled, the focused option is selected. | | searchLocale | string \| string[] | - | Locale to use in searching. The default locale is the host environment's current locale. | | optionDisabled | string \| ((item: any) => string) | - | Property name or getter function to use as the disabled flag of an option, defaults to false when not defined. | | focusOnHover | boolean | - | When enabled, the hovered option will be focused. | | typeahead | boolean | true | Whether typeahead is active or not. | | addOnBlur | boolean | false | Whether to add an item on blur event if the input has value and typeahead is false with multiple mode. | | separator | string \| RegExp | - | Separator char to add item when typeahead is false and multiple mode is enabled. | | appendTo | HTMLElement \| ElementRef \| TemplateRef \| "self" \| "body" \| null \| undefined | 'self' | Target element to attach the overlay, valid values are "body" or a local ng-template variable of another element (note: use binding with brackets for template variables, e.g. [appendTo]="mydiv" for a div element having #mydiv as variable name). | | motionOptions | MotionOptions | - | The motion options. | | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | | required | boolean | false | There must be a value (if set). | | invalid | boolean | false | When present, it specifies that the component should have invalid state style. | | disabled | boolean | false | When present, it specifies that the component should have disabled state style. | | name | string | undefined | When present, it specifies that the name of the input. | | fluid | boolean | false | Spans 100% width of the container when enabled. | | variant | "filled" \| "outlined" | 'outlined' | Specifies the input variant of the component. | | size | "small" \| "large" | undefined | Specifies the size of the component. | | inputSize | number | undefined | Specifies the visible width of the input element in characters. | | pattern | string | undefined | Specifies the value must match the pattern. | | min | number | undefined | The value must be greater than or equal to the value. | | max | number | undefined | The value must be less than or equal to the value. | | step | number | undefined | Unless the step is set to the any literal, the value must be min + an integral multiple of the step. | | minlength | number | undefined | The number of characters (code points) must not be less than the value of the attribute, if non-empty. | | maxlength | number | undefined | The number of characters (code points) must not exceed the value of the attribute. | ### Emits | Name | Parameters | Description | |------|------------|-------------| | completeMethod | event: AutoCompleteCompleteEvent | Callback to invoke to search for suggestions. | | onSelect | event: AutoCompleteSelectEvent | Callback to invoke when a suggestion is selected. | | onUnselect | event: AutoCompleteUnselectEvent | Callback to invoke when a selected value is removed. | | onAdd | event: AutoCompleteAddEvent | Callback to invoke when an item is added via addOnBlur or separator features. | | onFocus | event: Event | Callback to invoke when the component receives focus. | | onBlur | event: Event | Callback to invoke when the component loses focus. | | onDropdownClick | event: AutoCompleteDropdownClickEvent | Callback to invoke to when dropdown button is clicked. | | onClear | value: void | Callback to invoke when clear button is clicked. | | onInputKeydown | event: KeyboardEvent | Callback to invoke on input key down. | | onKeyUp | event: KeyboardEvent | Callback to invoke on input key up. | | onShow | value: void | Callback to invoke on overlay is shown. | | onHide | value: void | Callback to invoke on overlay is hidden. | | onLazyLoad | event: AutoCompleteLazyLoadEvent | Callback to invoke on lazy load data. | ### Templates | Name | Type | Description | |------|------|-------------| | item | TemplateRef> | Custom item template. | | empty | TemplateRef | Custom empty message template. | | header | TemplateRef | Custom header template. | | footer | TemplateRef | Custom footer template. | | selecteditem | TemplateRef> | Custom selected item template. | | group | TemplateRef> | Custom group template. | | loader | TemplateRef | Custom loader template. | | removeicon | TemplateRef | Custom remove icon template. | | loadingicon | TemplateRef | Custom loading icon template. | | clearicon | TemplateRef | Custom clear icon template. | | dropdownicon | TemplateRef | Custom dropdown icon template. | ## Pass Through Options | Name | Type | Description | |------|------|-------------| | host | PassThroughOption | Used to pass attributes to the host's DOM element. | | root | PassThroughOption | Used to pass attributes to the root's DOM element. | | pcInputText | InputTextPassThrough | Used to pass attributes to the InputText component. | | inputMultiple | PassThroughOption | Used to pass attributes to the input multiple's DOM element. | | chipItem | PassThroughOption | Used to pass attributes to the chip item's DOM element. | | pcChip | ChipPassThrough | Used to pass attributes to the Chip component. | | chipIcon | PassThroughOption | Used to pass attributes to the chip icon's DOM element. | | inputChip | PassThroughOption | Used to pass attributes to the input chip's DOM element. | | clearIcon | PassThroughOption | Used to pass attributes to the clear icon's DOM element. | | loader | PassThroughOption | Used to pass attributes to the loader's DOM element. | | dropdown | PassThroughOption | Used to pass attributes to the dropdown button's DOM element. | | pcOverlay | OverlayPassThrough | Used to pass attributes to the Overlay component. | | overlay | PassThroughOption | Used to pass attributes to the overlay's DOM element. | | listContainer | PassThroughOption | Used to pass attributes to the list container's DOM element. | | pcScroller | VirtualScrollerPassThrough | Used to pass attributes to the Scroller component. | | list | PassThroughOption | Used to pass attributes to the list's DOM element. | | optionGroup | PassThroughOption | Used to pass attributes to the option group's DOM element. | | option | PassThroughOption | Used to pass attributes to the option's DOM element. | | emptyMessage | PassThroughOption | Used to pass attributes to the empty message's DOM element. | ## Theming ### CSS Classes | Class | Description | |-------|-------------| | p-autocomplete | Class name of the root element | | p-autocomplete-input | Class name of the input element | | p-autocomplete-input-multiple | Class name of the input multiple element | | p-autocomplete-chip-item | Class name of the chip item element | | p-autocomplete-chip | Class name of the chip element | | p-autocomplete-chip-icon | Class name of the chip icon element | | p-autocomplete-input-chip | Class name of the input chip element | | p-autocomplete-loader | Class name of the loader element | | p-autocomplete-dropdown | Class name of the dropdown element | | p-autocomplete-overlay | Class name of the panel element | | p-autocomplete-list | Class name of the list element | | p-autocomplete-option-group | Class name of the option group element | | p-autocomplete-option | Class name of the option element | | p-autocomplete-empty-message | Class name of the empty message element | | p-autocomplete-clear-icon | Class name of the clear icon | ### Design Tokens | Token | CSS Variable | Description | |-------|--------------|-------------| | autocomplete.background | --p-autocomplete-background | Background of root | | autocomplete.disabled.background | --p-autocomplete-disabled-background | Disabled background of root | | autocomplete.filled.background | --p-autocomplete-filled-background | Filled background of root | | autocomplete.filled.hover.background | --p-autocomplete-filled-hover-background | Filled hover background of root | | autocomplete.filled.focus.background | --p-autocomplete-filled-focus-background | Filled focus background of root | | autocomplete.border.color | --p-autocomplete-border-color | Border color of root | | autocomplete.hover.border.color | --p-autocomplete-hover-border-color | Hover border color of root | | autocomplete.focus.border.color | --p-autocomplete-focus-border-color | Focus border color of root | | autocomplete.invalid.border.color | --p-autocomplete-invalid-border-color | Invalid border color of root | | autocomplete.color | --p-autocomplete-color | Color of root | | autocomplete.disabled.color | --p-autocomplete-disabled-color | Disabled color of root | | autocomplete.placeholder.color | --p-autocomplete-placeholder-color | Placeholder color of root | | autocomplete.invalid.placeholder.color | --p-autocomplete-invalid-placeholder-color | Invalid placeholder color of root | | autocomplete.shadow | --p-autocomplete-shadow | Shadow of root | | autocomplete.padding.x | --p-autocomplete-padding-x | Padding x of root | | autocomplete.padding.y | --p-autocomplete-padding-y | Padding y of root | | autocomplete.border.radius | --p-autocomplete-border-radius | Border radius of root | | autocomplete.focus.ring.width | --p-autocomplete-focus-ring-width | Focus ring width of root | | autocomplete.focus.ring.style | --p-autocomplete-focus-ring-style | Focus ring style of root | | autocomplete.focus.ring.color | --p-autocomplete-focus-ring-color | Focus ring color of root | | autocomplete.focus.ring.offset | --p-autocomplete-focus-ring-offset | Focus ring offset of root | | autocomplete.focus.ring.shadow | --p-autocomplete-focus-ring-shadow | Focus ring shadow of root | | autocomplete.transition.duration | --p-autocomplete-transition-duration | Transition duration of root | | autocomplete.overlay.background | --p-autocomplete-overlay-background | Background of overlay | | autocomplete.overlay.border.color | --p-autocomplete-overlay-border-color | Border color of overlay | | autocomplete.overlay.border.radius | --p-autocomplete-overlay-border-radius | Border radius of overlay | | autocomplete.overlay.color | --p-autocomplete-overlay-color | Color of overlay | | autocomplete.overlay.shadow | --p-autocomplete-overlay-shadow | Shadow of overlay | | autocomplete.list.padding | --p-autocomplete-list-padding | Padding of list | | autocomplete.list.gap | --p-autocomplete-list-gap | Gap of list | | autocomplete.option.focus.background | --p-autocomplete-option-focus-background | Focus background of option | | autocomplete.option.selected.background | --p-autocomplete-option-selected-background | Selected background of option | | autocomplete.option.selected.focus.background | --p-autocomplete-option-selected-focus-background | Selected focus background of option | | autocomplete.option.color | --p-autocomplete-option-color | Color of option | | autocomplete.option.focus.color | --p-autocomplete-option-focus-color | Focus color of option | | autocomplete.option.selected.color | --p-autocomplete-option-selected-color | Selected color of option | | autocomplete.option.selected.focus.color | --p-autocomplete-option-selected-focus-color | Selected focus color of option | | autocomplete.option.padding | --p-autocomplete-option-padding | Padding of option | | autocomplete.option.border.radius | --p-autocomplete-option-border-radius | Border radius of option | | autocomplete.option.font.weight | --p-autocomplete-option-font-weight | Font weight of option | | autocomplete.option.font.size | --p-autocomplete-option-font-size | Font size of option | | autocomplete.option.group.background | --p-autocomplete-option-group-background | Background of option group | | autocomplete.option.group.color | --p-autocomplete-option-group-color | Color of option group | | autocomplete.option.group.font.weight | --p-autocomplete-option-group-font-weight | Font weight of option group | | autocomplete.option.group.font.size | --p-autocomplete-option-group-font-size | Font size of option group | | autocomplete.option.group.padding | --p-autocomplete-option-group-padding | Padding of option group | | autocomplete.dropdown.width | --p-autocomplete-dropdown-width | Width of dropdown | | autocomplete.dropdown.sm.width | --p-autocomplete-dropdown-sm-width | Sm width of dropdown | | autocomplete.dropdown.lg.width | --p-autocomplete-dropdown-lg-width | Lg width of dropdown | | autocomplete.dropdown.border.color | --p-autocomplete-dropdown-border-color | Border color of dropdown | | autocomplete.dropdown.hover.border.color | --p-autocomplete-dropdown-hover-border-color | Hover border color of dropdown | | autocomplete.dropdown.active.border.color | --p-autocomplete-dropdown-active-border-color | Active border color of dropdown | | autocomplete.dropdown.border.radius | --p-autocomplete-dropdown-border-radius | Border radius of dropdown | | autocomplete.dropdown.focus.ring.width | --p-autocomplete-dropdown-focus-ring-width | Focus ring width of dropdown | | autocomplete.dropdown.focus.ring.style | --p-autocomplete-dropdown-focus-ring-style | Focus ring style of dropdown | | autocomplete.dropdown.focus.ring.color | --p-autocomplete-dropdown-focus-ring-color | Focus ring color of dropdown | | autocomplete.dropdown.focus.ring.offset | --p-autocomplete-dropdown-focus-ring-offset | Focus ring offset of dropdown | | autocomplete.dropdown.focus.ring.shadow | --p-autocomplete-dropdown-focus-ring-shadow | Focus ring shadow of dropdown | | autocomplete.dropdown.background | --p-autocomplete-dropdown-background | Background of dropdown | | autocomplete.dropdown.hover.background | --p-autocomplete-dropdown-hover-background | Hover background of dropdown | | autocomplete.dropdown.active.background | --p-autocomplete-dropdown-active-background | Active background of dropdown | | autocomplete.dropdown.color | --p-autocomplete-dropdown-color | Color of dropdown | | autocomplete.dropdown.hover.color | --p-autocomplete-dropdown-hover-color | Hover color of dropdown | | autocomplete.dropdown.active.color | --p-autocomplete-dropdown-active-color | Active color of dropdown | | autocomplete.chip.border.radius | --p-autocomplete-chip-border-radius | Border radius of chip | | autocomplete.chip.focus.background | --p-autocomplete-chip-focus-background | Focus background of chip | | autocomplete.chip.focus.color | --p-autocomplete-chip-focus-color | Focus color of chip | | autocomplete.empty.message.padding | --p-autocomplete-empty-message-padding | Padding of empty message | --- # Angular AutoFocus Directive AutoFocus manages focus on focusable element on load. ## Basic AutoFocus is applied to any focusable input element with the pAutoFocus directive. **Example:** ```typescript import { Component } from '@angular/core'; import { InputTextModule } from 'primeng/inputtext'; @Component({ template: `
`, standalone: true, imports: [InputTextModule] }) export class AutoFocusBasicDemo {} ``` ## Auto Focus AutoFocus manages focus on focusable element on load. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | autofocus | boolean | - | When present, it specifies that the component should automatically get focus on load. | | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | any | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | --- # Angular Avatar Component Avatar represents people using icons, labels and images. ## Accessibility Screen Reader Avatar does not include any roles and attributes by default. Any attribute is passed to the root element so you may add a role like img along with aria-labelledby or aria-label to describe the component. In case avatars need to be tabbable, tabIndex can be added as well to implement custom key handlers. Keyboard Support Component does not include any interactive elements. ## AvatarGroup Grouping is available by wrapping multiple Avatar components inside an AvatarGroup . **Example:** ```typescript import { Component } from '@angular/core'; import { AvatarModule } from 'primeng/avatar'; @Component({ template: `
`, standalone: true, imports: [AvatarModule] }) export class AvatarAvatarGroupDemo {} ``` ## avatargroupstyle-doc **Example:** ```typescript import { Component } from '@angular/core'; @Component({ template: `
Name Element
p-avatar-group Container element.
`, standalone: true, imports: [] }) export class AvatarAvatarGroupStyleDemo {} ``` ## avatarstyle-doc Following is the list of structural style classes, for theming classes visit theming page. **Example:** ```typescript import { Component } from '@angular/core'; @Component({ template: `
Name Element
p-avatar Container element.
p-avatar-image Container element in image mode.
p-avatar-circle Container element with a circle shape.
p-avatar-text Text of the Avatar.
p-avatar-icon Icon of the Avatar.
p-avatar-lg Container element with a large size.
p-avatar-xl Container element with an xlarge size.
`, standalone: true, imports: [] }) export class AvatarAvatarStyleDemo {} ``` ## Badge A badge can be added to an Avatar with the OverlayBadge component. **Example:** ```typescript import { Component } from '@angular/core'; import { AvatarModule } from 'primeng/avatar'; import { OverlayBadgeModule } from 'primeng/overlaybadge'; @Component({ template: `
`, standalone: true, imports: [AvatarModule, OverlayBadgeModule] }) export class AvatarBadgeDemo {} ``` ## Icon A font icon is displayed as an Avatar with the icon property. **Example:** ```typescript import { Component } from '@angular/core'; import { AvatarModule } from 'primeng/avatar'; @Component({ template: `
Icon
Circle
Badge
`, standalone: true, imports: [AvatarModule] }) export class AvatarIconDemo {} ``` ## Image Use the image property to display an image as an Avatar. **Example:** ```typescript import { Component } from '@angular/core'; import { AvatarModule } from 'primeng/avatar'; @Component({ template: `
Image
Badge
Gravatar
`, standalone: true, imports: [AvatarModule] }) export class AvatarImageDemo {} ``` ## Label A letter Avatar is defined with the label property. **Example:** ```typescript import { Component } from '@angular/core'; import { AvatarModule } from 'primeng/avatar'; @Component({ template: `
Label
Circle
Badge
`, standalone: true, imports: [AvatarModule] }) export class AvatarLabelDemo {} ``` ## Shape Avatar comes in two different styles specified with the shape property, square is the default and circle is the alternative. **Example:** ```typescript import { Component } from '@angular/core'; import { AvatarModule } from 'primeng/avatar'; @Component({ template: `
`, standalone: true, imports: [AvatarModule] }) export class AvatarShapeDemo {} ``` ## Size size property defines the size of the Avatar with large and xlarge as possible values. **Example:** ```typescript import { Component } from '@angular/core'; import { AvatarModule } from 'primeng/avatar'; @Component({ template: `
`, standalone: true, imports: [AvatarModule] }) export class AvatarSizeDemo {} ``` ## Template Content can easily be customized with the dynamic content instead of using the built-in modes. **Example:** ```typescript import { Component } from '@angular/core'; import { AvatarModule } from 'primeng/avatar'; @Component({ template: `
`, standalone: true, imports: [AvatarModule] }) export class AvatarTemplateDemo {} ``` ## Avatar Avatar represents people using icons, labels and images. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | label | string | - | Defines the text to display. | | icon | string | - | Defines the icon to display. | | image | string | - | Defines the image to display. | | size | "normal" \| "large" \| "xlarge" | - | Size of the element. | | shape | "square" \| "circle" | - | Shape of the element. | | ariaLabel | string | - | Establishes a string value that labels the component. | | ariaLabelledBy | string | - | Establishes relationships between the component and label(s) where its value should be one or more element IDs. | | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | ### Emits | Name | Parameters | Description | |------|------------|-------------| | onImageError | event: Event | This event is triggered if an error occurs while loading an image file. | ## Pass Through Options | Name | Type | Description | |------|------|-------------| | host | PassThroughOption | Used to pass attributes to the host's DOM element. | | root | PassThroughOption | Used to pass attributes to the root's DOM element. | | label | PassThroughOption | Used to pass attributes to the label's DOM element. | | icon | PassThroughOption | Used to pass attributes to the icon's DOM element. | | image | PassThroughOption | Used to pass attributes to the image's DOM element. | ## Theming ### CSS Classes | Class | Description | |-------|-------------| | p-avatar | Class name of the root element | | p-avatar-label | Class name of the label element | | p-avatar-icon | Class name of the icon element | | p-avatar-image | Container element in image mode | | p-avatar-circle | Container element with a circle shape | | p-avatar-lg | Container element with a large size | | p-avatar-xl | Container element with an xlarge size | ### Design Tokens | Token | CSS Variable | Description | |-------|--------------|-------------| | avatar.width | --p-avatar-width | Width of root | | avatar.height | --p-avatar-height | Height of root | | avatar.font.weight | --p-avatar-font-weight | Font weight of root | | avatar.font.size | --p-avatar-font-size | Font size of root | | avatar.background | --p-avatar-background | Background of root | | avatar.color | --p-avatar-color | Color of root | | avatar.border.radius | --p-avatar-border-radius | Border radius of root | | avatar.icon.size | --p-avatar-icon-size | Size of icon | | avatar.group.border.color | --p-avatar-group-border-color | Border color of group | | avatar.group.offset | --p-avatar-group-offset | Offset of group | | avatar.lg.width | --p-avatar-lg-width | Width of lg | | avatar.lg.height | --p-avatar-lg-height | Height of lg | | avatar.lg.font.size | --p-avatar-lg-font-size | Font size of lg | | avatar.lg.icon.size | --p-avatar-lg-icon-size | Icon size of lg | | avatar.lg.group.offset | --p-avatar-lg-group-offset | Group offset of lg | | avatar.xl.width | --p-avatar-xl-width | Width of xl | | avatar.xl.height | --p-avatar-xl-height | Height of xl | | avatar.xl.font.size | --p-avatar-xl-font-size | Font size of xl | | avatar.xl.icon.size | --p-avatar-xl-icon-size | Icon size of xl | | avatar.xl.group.offset | --p-avatar-xl-group-offset | Group offset of xl | --- # Angular Badge Component Badge is a small status indicator for another element. ## Accessibility Screen Reader Badge does not include any roles and attributes by default, any attribute is passed to the root element so aria roles and attributes can be added if required. If the badges are dynamic, aria-live may be utilized as well. In case badges need to be tabbable, tabIndex can be added to implement custom key handlers. Keyboard Support Component does not include any interactive elements. ## Basic Content of the badge is specified using the value property. **Example:** ```typescript import { Component } from '@angular/core'; import { BadgeModule } from 'primeng/badge'; @Component({ template: `
`, standalone: true, imports: [BadgeModule] }) export class BadgeBasicDemo {} ``` ## Button Buttons have built-in support for badges to display a badge inline. **Example:** ```typescript import { Component } from '@angular/core'; import { ButtonModule } from 'primeng/button'; @Component({ template: `
`, standalone: true, imports: [ButtonModule] }) export class BadgeButtonDemo {} ``` ## Overlay A badge can be added to any element by encapsulating the content with the OverlayBadge component. **Example:** ```typescript import { Component } from '@angular/core'; import { OverlayBadgeModule } from 'primeng/overlaybadge'; @Component({ template: `
`, standalone: true, imports: [OverlayBadgeModule] }) export class BadgeOverlayDemo {} ``` ## position-doc A Badge can be positioned at the top right corner of an element by adding p-overlay-badge style class to the element and embedding the badge inside. **Example:** ```typescript import { Component } from '@angular/core'; import { OverlayBadgeModule } from 'primeng/overlaybadge'; @Component({ template: `
`, standalone: true, imports: [OverlayBadgeModule] }) export class BadgePositionDemo {} ``` ## Severity Severity defines the color of the badge, possible values are success , info , warn and danger **Example:** ```typescript import { Component } from '@angular/core'; import { BadgeModule } from 'primeng/badge'; @Component({ template: `
`, standalone: true, imports: [BadgeModule] }) export class BadgeSeverityDemo {} ``` ## Size Badge sizes are adjusted with the badgeSize property that accepts small , large and xlarge as the possible alternatives to the default size. Currently sizes only apply to component mode. **Example:** ```typescript import { Component } from '@angular/core'; import { BadgeModule } from 'primeng/badge'; @Component({ template: `
`, standalone: true, imports: [BadgeModule] }) export class BadgeSizeDemo {} ``` ## Badge Badge is a small status indicator for another element. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | badgeSize | "small" \| "large" \| "xlarge" \| null | - | Size of the badge, valid options are "large" and "xlarge". | | size | "small" \| "large" \| "xlarge" \| null | - | Size of the badge, valid options are "large" and "xlarge". | | severity | "secondary" \| "info" \| "success" \| "warn" \| "danger" \| "contrast" \| null | - | Severity type of the badge. | | value | string \| number | - | Value to display inside the badge. | | badgeDisabled | boolean | - | When specified, disables the component. | | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | ## Pass Through Options | Name | Type | Description | |------|------|-------------| | host | PassThroughOption | Used to pass attributes to the host's DOM element. | | root | PassThroughOption | Used to pass attributes to the root's DOM element. | ## Theming ### CSS Classes | Class | Description | |-------|-------------| | p-badge | Class name of the root element | ### Design Tokens | Token | CSS Variable | Description | |-------|--------------|-------------| | badge.border.radius | --p-badge-border-radius | Border radius of root | | badge.padding | --p-badge-padding | Padding of root | | badge.font.size | --p-badge-font-size | Font size of root | | badge.font.weight | --p-badge-font-weight | Font weight of root | | badge.min.width | --p-badge-min-width | Min width of root | | badge.height | --p-badge-height | Height of root | | badge.dot.size | --p-badge-dot-size | Size of dot | | badge.sm.font.size | --p-badge-sm-font-size | Font size of sm | | badge.sm.min.width | --p-badge-sm-min-width | Min width of sm | | badge.sm.height | --p-badge-sm-height | Height of sm | | badge.lg.font.size | --p-badge-lg-font-size | Font size of lg | | badge.lg.min.width | --p-badge-lg-min-width | Min width of lg | | badge.lg.height | --p-badge-lg-height | Height of lg | | badge.xl.font.size | --p-badge-xl-font-size | Font size of xl | | badge.xl.min.width | --p-badge-xl-min-width | Min width of xl | | badge.xl.height | --p-badge-xl-height | Height of xl | | badge.primary.background | --p-badge-primary-background | Background of primary | | badge.primary.color | --p-badge-primary-color | Color of primary | | badge.secondary.background | --p-badge-secondary-background | Background of secondary | | badge.secondary.color | --p-badge-secondary-color | Color of secondary | | badge.success.background | --p-badge-success-background | Background of success | | badge.success.color | --p-badge-success-color | Color of success | | badge.info.background | --p-badge-info-background | Background of info | | badge.info.color | --p-badge-info-color | Color of info | | badge.warn.background | --p-badge-warn-background | Background of warn | | badge.warn.color | --p-badge-warn-color | Color of warn | | badge.danger.background | --p-badge-danger-background | Background of danger | | badge.danger.color | --p-badge-danger-color | Color of danger | | badge.contrast.background | --p-badge-contrast-background | Background of contrast | | badge.contrast.color | --p-badge-contrast-color | Color of contrast | --- # Angular BlockUI Component BlockUI can either block other components or the whole page. ## Accessibility Screen Reader BlockUI manages aria-busy state attribute when the UI gets blocked and unblocked. Any valid attribute is passed to the root element so additional attributes like role and aria-live can be used to define live regions. Keyboard Support Component does not include any interactive elements. ## Basic The element to block should be placed as a child of BlockUI and blocked property is required to control the state. **Example:** ```typescript import { Component } from '@angular/core'; import { BlockUIModule } from 'primeng/blockui'; import { ButtonModule } from 'primeng/button'; import { PanelModule } from 'primeng/panel'; @Component({ template: `

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

`, standalone: true, imports: [BlockUIModule, ButtonModule, PanelModule] }) export class BlockUIBasicDemo { blockedPanel: boolean = false; } ``` ## Document If the target element is not specified, BlockUI blocks the document by default. **Example:** ```typescript import { Component } from '@angular/core'; import { BlockUIModule } from 'primeng/blockui'; import { ButtonModule } from 'primeng/button'; @Component({ template: ` `, standalone: true, imports: [BlockUIModule, ButtonModule] }) export class BlockUIDocumentDemo { blockedDocument: boolean = false; } ``` ## Block U I BlockUI can either block other components or the whole page. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | | target | any | - | Name of the local ng-template variable referring to another component. | | autoZIndex | boolean | - | Whether to automatically manage layering. | | baseZIndex | number | - | Base zIndex value to use in layering. | | blocked | boolean | - | Current blocked state as a boolean. | ### Templates | Name | Type | Description | |------|------|-------------| | content | TemplateRef | Template of the content. | ## Pass Through Options | Name | Type | Description | |------|------|-------------| | host | PassThroughOption | Used to pass attributes to the host's DOM element. | | root | PassThroughOption | Used to pass attributes to the root's DOM element. | ## Theming ### CSS Classes | Class | Description | |-------|-------------| | p-blockui | Class name of the root element | ### Design Tokens | Token | CSS Variable | Description | |-------|--------------|-------------| | blockui.border.radius | --p-blockui-border-radius | Border radius of root | --- # Angular Breadcrumb Component Breadcrumb provides contextual information about page hierarchy. ## Accessibility Screen Reader Breadcrumb uses the nav element and since any attribute is passed to the root implicitly aria-labelledby or aria-label can be used to describe the component. Inside an ordered list is used where the list item separators have aria-hidden to be able to ignored by the screen readers. If the last link represents the current route, aria-current is added with "page" as the value. Keyboard Support No special keyboard interaction is needed, all menuitems are focusable based on the page tab sequence. ## Basic Breadcrumb provides contextual information about page hierarchy. **Example:** ```typescript import { Component, OnInit } from '@angular/core'; import { BreadcrumbModule } from 'primeng/breadcrumb'; import { MenuItem } from 'primeng/api'; @Component({ template: `
`, standalone: true, imports: [BreadcrumbModule] }) export class BreadcrumbBasicDemo implements OnInit { items: MenuItem[] | undefined; home: MenuItem | undefined; ngOnInit() { this.items = [{ label: 'Electronics' }, { label: 'Computer' }, { label: 'Accessories' }, { label: 'Keyboard' }, { label: 'Wireless' }]; this.home = { icon: 'pi pi-home' }; } } ``` ## Router Menu items support navigation via routerLink, programmatic routing using commands, or external URLs. **Example:** ```typescript import { Component } from '@angular/core'; import { BreadcrumbModule } from 'primeng/breadcrumb'; import { MenuItem } from 'primeng/api'; @Component({ template: `
`, standalone: true, imports: [BreadcrumbModule] }) export class BreadcrumbRouterDemo { items: MenuItem[] = [{ label: 'Components' }, { label: 'Form' }, { label: 'InputText', routerLink: '/inputtext' }]; home: MenuItem = { icon: 'pi pi-home', routerLink: '/' }; } ``` ## Template Custom content can be placed inside the items using the item template. The divider between the items has its own separator template. **Example:** ```typescript import { Component, OnInit } from '@angular/core'; import { BreadcrumbModule } from 'primeng/breadcrumb'; import { MenuItem } from 'primeng/api'; @Component({ template: `
/
`, standalone: true, imports: [BreadcrumbModule] }) export class BreadcrumbTemplateDemo implements OnInit { items: MenuItem[] | undefined; home: MenuItem | undefined; ngOnInit() { this.items = [{ icon: 'pi pi-sitemap' }, { icon: 'pi pi-book' }, { icon: 'pi pi-wallet' }, { icon: 'pi pi-shopping-bag' }, { icon: 'pi pi-calculator' }]; this.home = { icon: 'pi pi-home' }; } } ``` ## Breadcrumb Breadcrumb provides contextual information about page hierarchy. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | | model | MenuItem[] | - | An array of menuitems. | | style | Partial | - | Inline style of the component. | | styleClass | string | - | Style class of the component. | | home | MenuItem | - | MenuItem configuration for the home icon. | | homeAriaLabel | string | - | Defines a string that labels the home icon for accessibility. | ### Emits | Name | Parameters | Description | |------|------------|-------------| | onItemClick | event: BreadcrumbItemClickEvent | Fired when an item is selected. | ### Templates | Name | Type | Description | |------|------|-------------| | item | TemplateRef | Custom item template. | | separator | TemplateRef | Custom separator template. | ## Pass Through Options | Name | Type | Description | |------|------|-------------| | root | PassThroughOption | Used to pass attributes to the root's DOM element. | | list | PassThroughOption | Used to pass attributes to the list's DOM element. | | homeItem | PassThroughOption | Used to pass attributes to the home item's DOM element. | | item | PassThroughOption | Used to pass attributes to the item's DOM element. | | itemLink | PassThroughOption | Used to pass attributes to the item link's DOM element. | | itemIcon | PassThroughOption | Used to pass attributes to the item icon's DOM element. | | itemLabel | PassThroughOption | Used to pass attributes to the item label's DOM element. | | separator | PassThroughOption | Used to pass attributes to the separator's DOM element. | | separatorIcon | PassThroughOption | Used to pass attributes to the separator icon's DOM element. | ## Theming ### CSS Classes | Class | Description | |-------|-------------| | p-breadcrumb | Class name of the root element | | p-breadcrumb-list | Class name of the list element | | p-breadcrumb-home-item | Class name of the home item element | | p-breadcrumb-separator | Class name of the separator element | | p-breadcrumb-item | Class name of the item element | | p-breadcrumb-item-link | Class name of the item link element | | p-breadcrumb-item-icon | Class name of the item icon element | | p-breadcrumb-item-label | Class name of the item label element | ### Design Tokens | Token | CSS Variable | Description | |-------|--------------|-------------| | breadcrumb.padding | --p-breadcrumb-padding | Padding of root | | breadcrumb.background | --p-breadcrumb-background | Background of root | | breadcrumb.gap | --p-breadcrumb-gap | Gap of root | | breadcrumb.transition.duration | --p-breadcrumb-transition-duration | Transition duration of root | | breadcrumb.item.color | --p-breadcrumb-item-color | Color of item | | breadcrumb.item.hover.color | --p-breadcrumb-item-hover-color | Hover color of item | | breadcrumb.item.border.radius | --p-breadcrumb-item-border-radius | Border radius of item | | breadcrumb.item.gap | --p-breadcrumb-item-gap | Gap of item | | breadcrumb.item.icon.color | --p-breadcrumb-item-icon-color | Icon color of item | | breadcrumb.item.icon.hover.color | --p-breadcrumb-item-icon-hover-color | Icon hover color of item | | breadcrumb.item.icon.size | --p-breadcrumb-item-icon-size | Icon size of item icon | | breadcrumb.item.label.font.weight | --p-breadcrumb-item-label-font-weight | Font weight of item label | | breadcrumb.item.label.font.size | --p-breadcrumb-item-label-font-size | Font size of item label | | breadcrumb.item.focus.ring.width | --p-breadcrumb-item-focus-ring-width | Focus ring width of item | | breadcrumb.item.focus.ring.style | --p-breadcrumb-item-focus-ring-style | Focus ring style of item | | breadcrumb.item.focus.ring.color | --p-breadcrumb-item-focus-ring-color | Focus ring color of item | | breadcrumb.item.focus.ring.offset | --p-breadcrumb-item-focus-ring-offset | Focus ring offset of item | | breadcrumb.item.focus.ring.shadow | --p-breadcrumb-item-focus-ring-shadow | Focus ring shadow of item | | breadcrumb.separator.color | --p-breadcrumb-separator-color | Color of separator | --- # Angular Button Component Button is an extension to standard button element with icons and theming. ## Accessibility Screen Reader Button component renders a native button element that implicitly includes any passed prop. Text to describe the button is defined with the aria-label prop, if not present label prop is used as the value. If the button is icon only or custom templating is used, it is recommended to use aria-label so that screen readers would be able to read the element properly. ## Badge Buttons have built-in badge support with badge and badgeClass properties. **Example:** ```typescript import { Component } from '@angular/core'; import { ButtonModule } from 'primeng/button'; @Component({ template: `
`, standalone: true, imports: [ButtonModule] }) export class ButtonBadgeDemo {} ``` ## Basic Text to display on a button is defined with the label property. **Example:** ```typescript import { Component } from '@angular/core'; import { ButtonModule } from 'primeng/button'; @Component({ template: `
`, standalone: true, imports: [ButtonModule] }) export class ButtonBasicDemo {} ``` ## Button Group Multiple buttons are grouped when wrapped inside an element with ButtonGroup component. **Example:** ```typescript import { Component } from '@angular/core'; import { ButtonModule } from 'primeng/button'; @Component({ template: `
`, standalone: true, imports: [ButtonModule] }) export class ButtonButtonGroupDemo {} ``` ## buttonset-doc Multiple buttons are grouped when wrapped inside an element with p-buttonset class. **Example:** ```typescript import { Component } from '@angular/core'; import { ButtonModule } from 'primeng/button'; import { RippleModule } from 'primeng/ripple'; @Component({ template: `
`, standalone: true, imports: [ButtonModule, RippleModule] }) export class ButtonButtonSetDemo {} ``` ## Directive Button can also be used as directive using pButton along with pButtonLabel and pButtonIcon helper directives. **Example:** ```typescript import { Component } from '@angular/core'; import { ButtonModule } from 'primeng/button'; @Component({ template: `
`, standalone: true, imports: [ButtonModule] }) export class ButtonDirectiveDemo {} ``` ## Disabled When disabled is present, the element cannot be edited and focused. **Example:** ```typescript import { Component } from '@angular/core'; import { ButtonModule } from 'primeng/button'; @Component({ template: `
`, standalone: true, imports: [ButtonModule] }) export class ButtonDisabledDemo {} ``` ## Icons Icon of a button is specified with icon property and position is configured using iconPos attribute. **Example:** ```typescript import { Component } from '@angular/core'; import { ButtonModule } from 'primeng/button'; @Component({ template: `
`, standalone: true, imports: [ButtonModule] }) export class ButtonIconsDemo {} ``` ## iconsonly-doc Buttons can have icons without labels. **Example:** ```typescript import { Component } from '@angular/core'; import { ButtonModule } from 'primeng/button'; @Component({ template: `
`, standalone: true, imports: [ButtonModule] }) export class ButtonIconsOnlyDemo {} ``` ## Link A button can be rendered as a link when link property is present, while the pButton directive can be applied on an anchor element to style the link as a button. **Example:** ```typescript import { Component } from '@angular/core'; import { ButtonModule } from 'primeng/button'; @Component({ template: `
Angular Website Router Link
`, standalone: true, imports: [ButtonModule] }) export class ButtonLinkDemo {} ``` ## Loading Busy state is controlled with the loading property. **Example:** ```typescript import { Component, signal } from '@angular/core'; import { ButtonModule } from 'primeng/button'; @Component({ template: `
`, standalone: true, imports: [ButtonModule] }) export class ButtonLoadingDemo { loading = signal(false); load() { this.loading.set(true); setTimeout(() => { this.loading.set(false); }, 2000); } } ``` ## Outlined Outlined buttons display a border without a background initially. **Example:** ```typescript import { Component } from '@angular/core'; import { ButtonModule } from 'primeng/button'; @Component({ template: `
`, standalone: true, imports: [ButtonModule] }) export class ButtonOutlinedDemo {} ``` ## Raised Raised buttons display a shadow to indicate elevation. **Example:** ```typescript import { Component } from '@angular/core'; import { ButtonModule } from 'primeng/button'; @Component({ template: `
`, standalone: true, imports: [ButtonModule] }) export class ButtonRaisedDemo {} ``` ## Raised Text Text buttons can be displayed as raised for elevation. **Example:** ```typescript import { Component } from '@angular/core'; import { ButtonModule } from 'primeng/button'; @Component({ template: `
`, standalone: true, imports: [ButtonModule] }) export class ButtonRaisedTextDemo {} ``` ## rounded-doc Rounded buttons have a circular border radius. **Example:** ```typescript import { Component } from '@angular/core'; import { ButtonModule } from 'primeng/button'; @Component({ template: `
`, standalone: true, imports: [ButtonModule] }) export class ButtonRoundedDemo {} ``` ## Severity Severity defines the type of button. **Example:** ```typescript import { Component } from '@angular/core'; import { ButtonModule } from 'primeng/button'; @Component({ template: `
`, standalone: true, imports: [ButtonModule] }) export class ButtonSeverityDemo {} ``` ## Sizes Button provides small and large sizes as alternatives to the standard. **Example:** ```typescript import { Component } from '@angular/core'; import { ButtonModule } from 'primeng/button'; @Component({ template: `
`, standalone: true, imports: [ButtonModule] }) export class ButtonSizesDemo {} ``` ## Template Custom content inside a button is defined as children. **Example:** ```typescript import { Component } from '@angular/core'; import { ButtonModule } from 'primeng/button'; @Component({ template: `
`, standalone: true, imports: [ButtonModule] }) export class ButtonTemplateDemo {} ``` ## Text Text buttons are displayed as textual elements. **Example:** ```typescript import { Component } from '@angular/core'; import { ButtonModule } from 'primeng/button'; @Component({ template: `
`, standalone: true, imports: [ButtonModule] }) export class ButtonTextDemo {} ``` ## Button Button is an extension to standard button element with icons and theming. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | | type | string | - | Type of the button. | | badge | string | - | Value of the badge. | | disabled | boolean | - | When present, it specifies that the component should be disabled. | | raised | boolean | - | Add a shadow to indicate elevation. | | rounded | boolean | - | Add a circular border radius to the button. | | text | boolean | - | Add a textual class to the button without a background initially. | | plain | boolean | - | Add a plain textual class to the button without a background initially. | | outlined | boolean | - | Add a border class without a background initially. | | link | boolean | - | Add a link style to the button. | | tabindex | number | - | Add a tabindex to the button. | | size | "small" \| "large" | - | Defines the size of the button. | | variant | "outlined" \| "text" | - | Specifies the variant of the component. | | style | Partial | - | Inline style of the element. | | styleClass | string | - | Class of the element. | | badgeSeverity | "secondary" \| "info" \| "success" \| "warn" \| "danger" \| "contrast" \| null | secondary | Severity type of the badge. | | ariaLabel | string | - | Used to define a string that autocomplete attribute the current element. | | autofocus | boolean | - | When present, it specifies that the component should automatically get focus on load. | | iconPos | "left" \| "right" \| "top" \| "bottom" | - | Position of the icon. | | icon | string | - | Name of the icon. | | label | string | - | Text of the button. | | loading | boolean | - | Whether the button is in loading state. | | loadingIcon | string | - | Icon to display in loading state. | | severity | "success" \| "info" \| "warn" \| "danger" \| "help" \| "primary" \| "secondary" \| "contrast" \| null \| undefined | - | Defines the style of the button. | | buttonProps | ButtonProps | - | Used to pass all properties of the ButtonProps to the Button component. | | fluid | boolean | undefined | Spans 100% width of the container when enabled. | ### Emits | Name | Parameters | Description | |------|------------|-------------| | onClick | event: MouseEvent | Callback to execute when button is clicked. This event is intended to be used with the component. Using a regular `, standalone: true, imports: [CarouselModule, ChevronLeft, ChevronRight] }) export class CarouselAlignmentDemo { items: any[] = [1, 2, 3, 4, 5]; } ``` ## Basic Composition-based carousel using native scroll-snap with sub-components for root, content, items, navigation, and indicators. **Example:** ```typescript import { Component } from '@angular/core'; import { CarouselModule } from 'primeng/carousel'; import { ChevronLeft } from '@primeicons/angular/chevron-left'; import { ChevronRight } from '@primeicons/angular/chevron-right'; @Component({ template: `
@for (item of items; track item) {
{{ item }}
}
`, standalone: true, imports: [CarouselModule, ChevronLeft, ChevronRight] }) export class CarouselBasicDemo { items: any[] = [1, 2, 3, 4, 5]; } ``` ## Gallery Two carousels synchronized via slide input to create a gallery with thumbnail navigation. **Example:** ```typescript import { Component, signal } from '@angular/core'; import { CarouselModule } from 'primeng/carousel'; @Component({ template: `
@for (image of images; track image; let i = $index) { } @for (image of images; track image; let i = $index) { }
`, standalone: true, imports: [CarouselModule] }) export class CarouselGalleryDemo { images: any = images; selectedImage = signal(0); selectImage(index: number) { this.selectedImage.set(index); } onSlideChange(event: { value: number }) { this.selectedImage.set(event.value); } } ``` ## Loop Enable continuous looping with the loop property. Use slidesPerPage to show partial slides. **Example:** ```typescript import { Component } from '@angular/core'; import { CarouselModule } from 'primeng/carousel'; import { ChevronLeft } from '@primeicons/angular/chevron-left'; import { ChevronRight } from '@primeicons/angular/chevron-right'; @Component({ template: `
@for (item of items; track item) {
{{ item }}
}
`, standalone: true, imports: [CarouselModule, ChevronLeft, ChevronRight] }) export class CarouselLoopDemo { items: any[] = [1, 2, 3, 4, 5]; } ``` ## Orientation Set orientation to vertical for a vertical carousel layout. **Example:** ```typescript import { Component } from '@angular/core'; import { CarouselModule } from 'primeng/carousel'; import { ChevronUp } from '@primeicons/angular/chevron-up'; import { ChevronDown } from '@primeicons/angular/chevron-down'; @Component({ template: `
@for (item of items; track item) {
{{ item }}
}
`, standalone: true, imports: [CarouselModule, ChevronUp, ChevronDown] }) export class CarouselOrientationDemo { items: any[] = [1, 2, 3, 4, 5]; } ``` ## Variable Size Enable autoSize to allow items with variable widths. **Example:** ```typescript import { Component } from '@angular/core'; import { CarouselModule } from 'primeng/carousel'; import { ChevronLeft } from '@primeicons/angular/chevron-left'; import { ChevronRight } from '@primeicons/angular/chevron-right'; @Component({ template: `
@for (item of items; track item.width; let i = $index) {
{{ i + 1 }}
}
`, standalone: true, imports: [CarouselModule, ChevronLeft, ChevronRight] }) export class CarouselVariableSizeDemo { items: any[] = [{ width: '120px' }, { width: '80px' }, { width: '200px' }, { width: '160px' }, { width: '220px' }, { width: '180px' }, { width: '280px' }, { width: '100px' }]; } ``` ## Carousel Carousel is a content slider featuring various customization options. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | any | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | | page | number | 0 | Index of the first item. | | numVisible | number | 1 | Number of items per page. | | numScroll | number | 1 | Number of items to scroll. | | responsiveOptions | CarouselResponsiveOptions[] | - | An array of options for responsive design. | | orientation | "horizontal" \| "vertical" | - | Specifies the layout of the component. | | verticalViewPortHeight | string | - | Height of the viewport in vertical layout. | | contentClass | string | - | Style class of main content. | | indicatorsContentClass | string | - | Style class of the indicator items. | | indicatorsContentStyle | Partial | - | Inline style of the indicator items. | | indicatorStyleClass | string | - | Style class of the indicators. | | indicatorStyle | Partial | - | Style of the indicators. | | value | any[] | null | An array of objects to display. | | circular | boolean | - | Defines if scrolling would be infinite. | | showIndicators | boolean | - | Whether to display indicator container. | | showNavigators | boolean | - | Whether to display navigation buttons in container. | | autoplayInterval | number | - | Time in milliseconds to scroll items automatically. | | prevButtonProps | ButtonProps | - | Used to pass all properties of the ButtonProps to the Button component. | | nextButtonProps | ButtonProps | - | Used to pass all properties of the ButtonProps to the Button component. | | align | "center" \| "start" \| "end" | 'start' | Alignment of the carousel items (composition mode). | | loop | boolean | false | Whether the carousel should loop (composition mode). | | snapType | "mandatory" \| "proximity" | 'mandatory' | Scroll snap type applied to the track (composition mode). | | spacing | number | 16 | Spacing between carousel items in pixels (composition mode). | | autoSize | boolean | false | Whether the carousel should auto size items (composition mode). | | slidesPerPage | number | 1 | How many slides are visible per page (composition mode). Supports fractions (e.g. 1.5). | | slide | number | - | Index of the active slide (composition mode). | ### Emits | Name | Parameters | Description | |------|------------|-------------| | onPage | event: CarouselPageEvent | Callback to invoke after scroll. | | onPageChange | value: { value: number } | Callback fired when the carousel's page changes (composition mode). | | onSlideChange | value: { value: number } | Callback fired when the active slide changes (composition mode). | ### Templates | Name | Type | Description | |------|------|-------------| | item | TemplateRef> | Custom item template. | | header | TemplateRef | Custom header template. | | footer | TemplateRef | Custom footer template. | | previousicon | TemplateRef | Custom previous icon template. | | nexticon | TemplateRef | Custom next icon template. | ## Carousel Content CarouselContent is the scrollable track element that contains carousel items. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | ## Carousel Indicator CarouselIndicator is a directive for an individual page indicator button. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | | page | number | - | The page index this indicator represents. | ## Carousel Indicators CarouselIndicators renders the list of page indicators. Auto-generates button indicators based on snap points. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | ## Carousel Item CarouselItem represents an individual item in the composition-based carousel. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | | value | unknown | - | The value/identifier of the carousel item. | ## Carousel Next CarouselNext is a directive for the next navigation button. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | ## Carousel Prev CarouselPrev is a directive for the previous navigation button. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | ## Pass Through Options | Name | Type | Description | |------|------|-------------| | root | PassThroughOption | Used to pass attributes to the root's DOM element. | | header | PassThroughOption | Used to pass attributes to the header's DOM element. | | contentContainer | PassThroughOption | Used to pass attributes to the content container's DOM element. | | content | PassThroughOption | Used to pass attributes to the content's DOM element. | | pcPrevButton | ButtonPassThroughOptions | Used to pass attributes to the previous button's DOM element. | | viewport | PassThroughOption | Used to pass attributes to the viewport's DOM element. | | itemList | PassThroughOption | Used to pass attributes to the item list's DOM element. | | item | PassThroughOption | Used to pass attributes to the item's DOM element. | | itemClone | PassThroughOption | Used to pass attributes to the item clone's DOM element. | | pcNextButton | ButtonPassThroughOptions | Used to pass attributes to the next button's DOM element. | | indicatorList | PassThroughOption | Used to pass attributes to the indicator list's DOM element. | | indicator | PassThroughOption | Used to pass attributes to the indicator's DOM element. | | indicatorButton | PassThroughOption | Used to pass attributes to the indicator button's DOM element. | | footer | PassThroughOption | Used to pass attributes to the footer's DOM element. | ## Theming ### CSS Classes | Class | Description | |-------|-------------| | p-carousel | Class name of the root element | | p-carousel-header | Class name of the header element | | p-carousel-content-container | Class name of the content container element | | p-carousel-content | Class name of the content element | | p-carousel-prev-button | Class name of the previous button element | | p-carousel-viewport | Class name of the viewport element | | p-carousel-item-list | Class name of the item list element | | p-carousel-item-clone | Class name of the item clone element | | p-carousel-item | Class name of the item element | | p-carousel-next-button | Class name of the next button element | | p-carousel-indicator-list | Class name of the indicator list element | | p-carousel-indicator | Class name of the indicator element | | p-carousel-indicator-button | Class name of the indicator button element | | p-carousel-footer | Class name of the footer element | ### Design Tokens | Token | CSS Variable | Description | |-------|--------------|-------------| | carousel.transition.duration | --p-carousel-transition-duration | Transition duration of root | | carousel.content.gap | --p-carousel-content-gap | Gap of content | | carousel.indicator.list.padding | --p-carousel-indicator-list-padding | Padding of indicator list | | carousel.indicator.list.gap | --p-carousel-indicator-list-gap | Gap of indicator list | | carousel.indicator.width | --p-carousel-indicator-width | Width of indicator | | carousel.indicator.height | --p-carousel-indicator-height | Height of indicator | | carousel.indicator.border.radius | --p-carousel-indicator-border-radius | Border radius of indicator | | carousel.indicator.focus.ring.width | --p-carousel-indicator-focus-ring-width | Focus ring width of indicator | | carousel.indicator.focus.ring.style | --p-carousel-indicator-focus-ring-style | Focus ring style of indicator | | carousel.indicator.focus.ring.color | --p-carousel-indicator-focus-ring-color | Focus ring color of indicator | | carousel.indicator.focus.ring.offset | --p-carousel-indicator-focus-ring-offset | Focus ring offset of indicator | | carousel.indicator.focus.ring.shadow | --p-carousel-indicator-focus-ring-shadow | Focus ring shadow of indicator | | carousel.indicator.background | --p-carousel-indicator-background | Background of indicator | | carousel.indicator.hover.background | --p-carousel-indicator-hover-background | Hover background of indicator | | carousel.indicator.active.background | --p-carousel-indicator-active-background | Active background of indicator | --- # Angular CascadeSelect Component CascadeSelect displays a nested structure of options. ## Accessibility Screen Reader Value to describe the component can either be provided with ariaLabelledBy or ariaLabel props. The cascadeselect element has a combobox role in addition to aria-haspopup and aria-expanded attributes. The relation between the combobox and the popup is created with aria-controls that refers to the id of the popup. The popup list has an id that refers to the aria-controls attribute of the combobox element and uses tree as the role. Each list item has a treeitem role along with aria-label , aria-selected and aria-expanded attributes. The container element of a treenode has the group role. The aria-setsize , aria-posinset and aria-level attributes are calculated implicitly and added to each treeitem. ## Basic CascadeSelect requires a value to bind and a collection of arbitrary objects with a nested hierarchy. optionGroupLabel is used for the text of a category and optionGroupChildren is to define the children of the category. Note that order of the optionGroupChildren matters and it should correspond to the data hierarchy. **Example:** ```typescript import { Component, OnInit } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { CascadeSelectModule } from 'primeng/cascadeselect'; @Component({ template: `
`, standalone: true, imports: [CascadeSelectModule, FormsModule] }) export class CascadeSelectBasicDemo implements OnInit { countries: any[] | undefined; selectedCity: any; ngOnInit() { this.countries = [ { name: 'Australia', code: 'AU', states: [ { name: 'New South Wales', cities: [ { cname: 'Sydney', code: 'A-SY' }, { cname: 'Newcastle', code: 'A-NE' }, { cname: 'Wollongong', code: 'A-WO' } ] }, { name: 'Queensland', cities: [ { cname: 'Brisbane', code: 'A-BR' }, { cname: 'Townsville', code: 'A-TO' } ] } ] }, { name: 'Canada', code: 'CA', states: [ { name: 'Quebec', cities: [ { cname: 'Montreal', code: 'C-MO' }, { cname: 'Quebec City', code: 'C-QU' } ] }, { name: 'Ontario', cities: [ { cname: 'Ottawa', code: 'C-OT' }, { cname: 'Toronto', code: 'C-TO' } ] } ] }, { name: 'United States', code: 'US', states: [ { name: 'California', cities: [ { cname: 'Los Angeles', code: 'US-LA' }, { cname: 'San Diego', code: 'US-SD' }, { cname: 'San Francisco', code: 'US-SF' } ] }, { name: 'Florida', cities: [ { cname: 'Jacksonville', code: 'US-JA' }, { cname: 'Miami', code: 'US-MI' }, { cname: 'Tampa', code: 'US-TA' }, { cname: 'Orlando', code: 'US-OR' } ] }, { name: 'Texas', cities: [ { cname: 'Austin', code: 'US-AU' }, { cname: 'Dallas', code: 'US-DA' }, { cname: 'Houston', code: 'US-HO' } ] } ] } ]; } } ``` ## Clear Icon When showClear is enabled, a clear icon is displayed to clear the value. **Example:** ```typescript import { Component, OnInit } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { CascadeSelectModule } from 'primeng/cascadeselect'; @Component({ template: `
`, standalone: true, imports: [CascadeSelectModule, FormsModule] }) export class CascadeSelectClearIconDemo implements OnInit { countries: any[] | undefined; selectedCity: any; ngOnInit() { this.countries = [ { name: 'Australia', code: 'AU', states: [ { name: 'New South Wales', cities: [ { cname: 'Sydney', code: 'A-SY' }, { cname: 'Newcastle', code: 'A-NE' }, { cname: 'Wollongong', code: 'A-WO' } ] }, { name: 'Queensland', cities: [ { cname: 'Brisbane', code: 'A-BR' }, { cname: 'Townsville', code: 'A-TO' } ] } ] }, { name: 'Canada', code: 'CA', states: [ { name: 'Quebec', cities: [ { cname: 'Montreal', code: 'C-MO' }, { cname: 'Quebec City', code: 'C-QU' } ] }, { name: 'Ontario', cities: [ { cname: 'Ottawa', code: 'C-OT' }, { cname: 'Toronto', code: 'C-TO' } ] } ] }, { name: 'United States', code: 'US', states: [ { name: 'California', cities: [ { cname: 'Los Angeles', code: 'US-LA' }, { cname: 'San Diego', code: 'US-SD' }, { cname: 'San Francisco', code: 'US-SF' } ] }, { name: 'Florida', cities: [ { cname: 'Jacksonville', code: 'US-JA' }, { cname: 'Miami', code: 'US-MI' }, { cname: 'Tampa', code: 'US-TA' }, { cname: 'Orlando', code: 'US-OR' } ] }, { name: 'Texas', cities: [ { cname: 'Austin', code: 'US-AU' }, { cname: 'Dallas', code: 'US-DA' }, { cname: 'Houston', code: 'US-HO' } ] } ] } ]; } } ``` ## Disabled When disabled is present, the element cannot be edited and focused. **Example:** ```typescript import { Component } from '@angular/core'; import { CascadeSelectModule } from 'primeng/cascadeselect'; @Component({ template: `
`, standalone: true, imports: [CascadeSelectModule] }) export class CascadeSelectDisabledDemo {} ``` ## Filled Specify the variant property as filled to display the component with a higher visual emphasis than the default outlined style. **Example:** ```typescript import { Component, OnInit } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { CascadeSelectModule } from 'primeng/cascadeselect'; @Component({ template: `
`, standalone: true, imports: [CascadeSelectModule, FormsModule] }) export class CascadeSelectFilledDemo implements OnInit { countries: any[] | undefined; selectedCity: any; ngOnInit() { this.countries = [ { name: 'Australia', code: 'AU', states: [ { name: 'New South Wales', cities: [ { cname: 'Sydney', code: 'A-SY' }, { cname: 'Newcastle', code: 'A-NE' }, { cname: 'Wollongong', code: 'A-WO' } ] }, { name: 'Queensland', cities: [ { cname: 'Brisbane', code: 'A-BR' }, { cname: 'Townsville', code: 'A-TO' } ] } ] }, { name: 'Canada', code: 'CA', states: [ { name: 'Quebec', cities: [ { cname: 'Montreal', code: 'C-MO' }, { cname: 'Quebec City', code: 'C-QU' } ] }, { name: 'Ontario', cities: [ { cname: 'Ottawa', code: 'C-OT' }, { cname: 'Toronto', code: 'C-TO' } ] } ] }, { name: 'United States', code: 'US', states: [ { name: 'California', cities: [ { cname: 'Los Angeles', code: 'US-LA' }, { cname: 'San Diego', code: 'US-SD' }, { cname: 'San Francisco', code: 'US-SF' } ] }, { name: 'Florida', cities: [ { cname: 'Jacksonville', code: 'US-JA' }, { cname: 'Miami', code: 'US-MI' }, { cname: 'Tampa', code: 'US-TA' }, { cname: 'Orlando', code: 'US-OR' } ] }, { name: 'Texas', cities: [ { cname: 'Austin', code: 'US-AU' }, { cname: 'Dallas', code: 'US-DA' }, { cname: 'Houston', code: 'US-HO' } ] } ] } ]; } } ``` ## floatlabel-doc A floating label appears on top of the input field when focused. Visit FloatLabel documentation for more information. **Example:** ```typescript import { Component, OnInit } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { CascadeSelectModule } from 'primeng/cascadeselect'; import { FloatLabelModule } from 'primeng/floatlabel'; @Component({ template: `
`, standalone: true, imports: [CascadeSelectModule, FloatLabelModule, FormsModule] }) export class CascadeSelectFloatLabelDemo implements OnInit { value1: string | undefined; value2: string | undefined; value3: string | undefined; countries: any[] | undefined; selectedCity: any; ngOnInit() { this.countries = [ { name: 'Australia', code: 'AU', states: [ { name: 'New South Wales', cities: [ { cname: 'Sydney', code: 'A-SY' }, { cname: 'Newcastle', code: 'A-NE' }, { cname: 'Wollongong', code: 'A-WO' } ] }, { name: 'Queensland', cities: [ { cname: 'Brisbane', code: 'A-BR' }, { cname: 'Townsville', code: 'A-TO' } ] } ] }, { name: 'Canada', code: 'CA', states: [ { name: 'Quebec', cities: [ { cname: 'Montreal', code: 'C-MO' }, { cname: 'Quebec City', code: 'C-QU' } ] }, { name: 'Ontario', cities: [ { cname: 'Ottawa', code: 'C-OT' }, { cname: 'Toronto', code: 'C-TO' } ] } ] }, { name: 'United States', code: 'US', states: [ { name: 'California', cities: [ { cname: 'Los Angeles', code: 'US-LA' }, { cname: 'San Diego', code: 'US-SD' }, { cname: 'San Francisco', code: 'US-SF' } ] }, { name: 'Florida', cities: [ { cname: 'Jacksonville', code: 'US-JA' }, { cname: 'Miami', code: 'US-MI' }, { cname: 'Tampa', code: 'US-TA' }, { cname: 'Orlando', code: 'US-OR' } ] }, { name: 'Texas', cities: [ { cname: 'Austin', code: 'US-AU' }, { cname: 'Dallas', code: 'US-DA' }, { cname: 'Houston', code: 'US-HO' } ] } ] } ]; } } ``` ## Fluid The fluid prop makes the component take up the full width of its container when set to true. **Example:** ```typescript import { Component, OnInit } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { CascadeSelectModule } from 'primeng/cascadeselect'; @Component({ template: ` `, standalone: true, imports: [CascadeSelectModule, FormsModule] }) export class CascadeSelectFluidDemo implements OnInit { countries: any[] | undefined; selectedCity: any; ngOnInit() { this.countries = [ { name: 'Australia', code: 'AU', states: [ { name: 'New South Wales', cities: [ { cname: 'Sydney', code: 'A-SY' }, { cname: 'Newcastle', code: 'A-NE' }, { cname: 'Wollongong', code: 'A-WO' } ] }, { name: 'Queensland', cities: [ { cname: 'Brisbane', code: 'A-BR' }, { cname: 'Townsville', code: 'A-TO' } ] } ] }, { name: 'Canada', code: 'CA', states: [ { name: 'Quebec', cities: [ { cname: 'Montreal', code: 'C-MO' }, { cname: 'Quebec City', code: 'C-QU' } ] }, { name: 'Ontario', cities: [ { cname: 'Ottawa', code: 'C-OT' }, { cname: 'Toronto', code: 'C-TO' } ] } ] }, { name: 'United States', code: 'US', states: [ { name: 'California', cities: [ { cname: 'Los Angeles', code: 'US-LA' }, { cname: 'San Diego', code: 'US-SD' }, { cname: 'San Francisco', code: 'US-SF' } ] }, { name: 'Florida', cities: [ { cname: 'Jacksonville', code: 'US-JA' }, { cname: 'Miami', code: 'US-MI' }, { cname: 'Tampa', code: 'US-TA' }, { cname: 'Orlando', code: 'US-OR' } ] }, { name: 'Texas', cities: [ { cname: 'Austin', code: 'US-AU' }, { cname: 'Dallas', code: 'US-DA' }, { cname: 'Houston', code: 'US-HO' } ] } ] } ]; } } ``` ## iftalabel-doc IftaLabel is used to create infield top aligned labels. Visit IftaLabel documentation for more information. **Example:** ```typescript import { Component, OnInit } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { CascadeSelectModule } from 'primeng/cascadeselect'; import { IftaLabelModule } from 'primeng/iftalabel'; @Component({ template: `
`, standalone: true, imports: [CascadeSelectModule, IftaLabelModule, FormsModule] }) export class CascadeSelectIftaLabelDemo implements OnInit { countries: any[] | undefined; selectedCity: any; ngOnInit() { this.countries = [ { name: 'Australia', code: 'AU', states: [ { name: 'New South Wales', cities: [ { cname: 'Sydney', code: 'A-SY' }, { cname: 'Newcastle', code: 'A-NE' }, { cname: 'Wollongong', code: 'A-WO' } ] }, { name: 'Queensland', cities: [ { cname: 'Brisbane', code: 'A-BR' }, { cname: 'Townsville', code: 'A-TO' } ] } ] }, { name: 'Canada', code: 'CA', states: [ { name: 'Quebec', cities: [ { cname: 'Montreal', code: 'C-MO' }, { cname: 'Quebec City', code: 'C-QU' } ] }, { name: 'Ontario', cities: [ { cname: 'Ottawa', code: 'C-OT' }, { cname: 'Toronto', code: 'C-TO' } ] } ] }, { name: 'United States', code: 'US', states: [ { name: 'California', cities: [ { cname: 'Los Angeles', code: 'US-LA' }, { cname: 'San Diego', code: 'US-SD' }, { cname: 'San Francisco', code: 'US-SF' } ] }, { name: 'Florida', cities: [ { cname: 'Jacksonville', code: 'US-JA' }, { cname: 'Miami', code: 'US-MI' }, { cname: 'Tampa', code: 'US-TA' }, { cname: 'Orlando', code: 'US-OR' } ] }, { name: 'Texas', cities: [ { cname: 'Austin', code: 'US-AU' }, { cname: 'Dallas', code: 'US-DA' }, { cname: 'Houston', code: 'US-HO' } ] } ] } ]; } } ``` ## Invalid The invalid state is applied using the ⁠invalid property to indicate failed validation, which can be integrated with Angular Forms. **Example:** ```typescript import { Component, OnInit } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { CascadeSelectModule } from 'primeng/cascadeselect'; @Component({ template: `
`, standalone: true, imports: [CascadeSelectModule, FormsModule] }) export class CascadeSelectInvalidDemo implements OnInit { countries: any[] | undefined; selectedCity1: any; selectedCity2: any; ngOnInit() { this.countries = [ { name: 'Australia', code: 'AU', states: [ { name: 'New South Wales', cities: [ { cname: 'Sydney', code: 'A-SY' }, { cname: 'Newcastle', code: 'A-NE' }, { cname: 'Wollongong', code: 'A-WO' } ] }, { name: 'Queensland', cities: [ { cname: 'Brisbane', code: 'A-BR' }, { cname: 'Townsville', code: 'A-TO' } ] } ] }, { name: 'Canada', code: 'CA', states: [ { name: 'Quebec', cities: [ { cname: 'Montreal', code: 'C-MO' }, { cname: 'Quebec City', code: 'C-QU' } ] }, { name: 'Ontario', cities: [ { cname: 'Ottawa', code: 'C-OT' }, { cname: 'Toronto', code: 'C-TO' } ] } ] }, { name: 'United States', code: 'US', states: [ { name: 'California', cities: [ { cname: 'Los Angeles', code: 'US-LA' }, { cname: 'San Diego', code: 'US-SD' }, { cname: 'San Francisco', code: 'US-SF' } ] }, { name: 'Florida', cities: [ { cname: 'Jacksonville', code: 'US-JA' }, { cname: 'Miami', code: 'US-MI' }, { cname: 'Tampa', code: 'US-TA' }, { cname: 'Orlando', code: 'US-OR' } ] }, { name: 'Texas', cities: [ { cname: 'Austin', code: 'US-AU' }, { cname: 'Dallas', code: 'US-DA' }, { cname: 'Houston', code: 'US-HO' } ] } ] } ]; } } ``` ## Loading State Loading state can be used loading property. **Example:** ```typescript import { Component } from '@angular/core'; import { CascadeSelectModule } from 'primeng/cascadeselect'; @Component({ template: `
`, standalone: true, imports: [CascadeSelectModule] }) export class CascadeSelectLoadingDemo {} ``` ## reactiveforms-doc CascadeSelect can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control. **Example:** ```typescript import { Component, inject } from '@angular/core'; import { ReactiveFormsModule } from '@angular/forms'; import { CascadeSelectModule } from 'primeng/cascadeselect'; import { MessageModule } from 'primeng/message'; import { ButtonModule } from 'primeng/button'; import { MessageService } from 'primeng/api'; @Component({ template: `
@if (isInvalid('selectedCity')) { City is required. }
`, standalone: true, imports: [CascadeSelectModule, MessageModule, ButtonModule, ReactiveFormsModule] }) export class CascadeSelectReactiveFormsDemo { countries: any[] | undefined; formGroup: FormGroup | undefined; messageService = inject(MessageService); exampleForm: FormGroup | undefined; formSubmitted: boolean = false; constructor() { this.countries = [ { name: 'Australia', code: 'AU', states: [ { name: 'New South Wales', cities: [ { cname: 'Sydney', code: 'A-SY' }, { cname: 'Newcastle', code: 'A-NE' }, { cname: 'Wollongong', code: 'A-WO' } ] }, { name: 'Queensland', cities: [ { cname: 'Brisbane', code: 'A-BR' }, { cname: 'Townsville', code: 'A-TO' } ] } ] }, { name: 'Canada', code: 'CA', states: [ { name: 'Quebec', cities: [ { cname: 'Montreal', code: 'C-MO' }, { cname: 'Quebec City', code: 'C-QU' } ] }, { name: 'Ontario', cities: [ { cname: 'Ottawa', code: 'C-OT' }, { cname: 'Toronto', code: 'C-TO' } ] } ] }, { name: 'United States', code: 'US', states: [ { name: 'California', cities: [ { cname: 'Los Angeles', code: 'US-LA' }, { cname: 'San Diego', code: 'US-SD' }, { cname: 'San Francisco', code: 'US-SF' } ] }, { name: 'Florida', cities: [ { cname: 'Jacksonville', code: 'US-JA' }, { cname: 'Miami', code: 'US-MI' }, { cname: 'Tampa', code: 'US-TA' }, { cname: 'Orlando', code: 'US-OR' } ] }, { name: 'Texas', cities: [ { cname: 'Austin', code: 'US-AU' }, { cname: 'Dallas', code: 'US-DA' }, { cname: 'Houston', code: 'US-HO' } ] } ] } ]; this.exampleForm = this.fb.group({ selectedCity: ['', Validators.required] }); } onSubmit() { this.formSubmitted = true; if (this.exampleForm.valid) { this.messageService.add({ severity: 'success', summary: 'Success', detail: 'Form is submitted', life: 3000 }); this.exampleForm.reset(); this.formSubmitted = false; } } isInvalid(controlName: string) { const control = this.exampleForm.get(controlName); return control?.invalid && this.formSubmitted; } } ``` ## Sizes CascadeSelect provides small and large sizes as alternatives to the base. **Example:** ```typescript import { Component, OnInit } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { CascadeSelectModule } from 'primeng/cascadeselect'; @Component({ template: `
`, standalone: true, imports: [CascadeSelectModule, FormsModule] }) export class CascadeSelectSizesDemo implements OnInit { countries: any[] | undefined; value1: any; value2: any; value3: any; ngOnInit() { this.countries = [ { name: 'Australia', code: 'AU', states: [ { name: 'New South Wales', cities: [ { cname: 'Sydney', code: 'A-SY' }, { cname: 'Newcastle', code: 'A-NE' }, { cname: 'Wollongong', code: 'A-WO' } ] }, { name: 'Queensland', cities: [ { cname: 'Brisbane', code: 'A-BR' }, { cname: 'Townsville', code: 'A-TO' } ] } ] }, { name: 'Canada', code: 'CA', states: [ { name: 'Quebec', cities: [ { cname: 'Montreal', code: 'C-MO' }, { cname: 'Quebec City', code: 'C-QU' } ] }, { name: 'Ontario', cities: [ { cname: 'Ottawa', code: 'C-OT' }, { cname: 'Toronto', code: 'C-TO' } ] } ] }, { name: 'United States', code: 'US', states: [ { name: 'California', cities: [ { cname: 'Los Angeles', code: 'US-LA' }, { cname: 'San Diego', code: 'US-SD' }, { cname: 'San Francisco', code: 'US-SF' } ] }, { name: 'Florida', cities: [ { cname: 'Jacksonville', code: 'US-JA' }, { cname: 'Miami', code: 'US-MI' }, { cname: 'Tampa', code: 'US-TA' }, { cname: 'Orlando', code: 'US-OR' } ] }, { name: 'Texas', cities: [ { cname: 'Austin', code: 'US-AU' }, { cname: 'Dallas', code: 'US-DA' }, { cname: 'Houston', code: 'US-HO' } ] } ] } ]; } } ``` ## Template Label of an option is used as the display text of an item by default, for custom content support define an option template that gets the option instance as a parameter. In addition value , dropdownicon , loadingicon , and optiongroupicon slots are provided for further customization. **Example:** ```typescript import { Component, OnInit } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { ButtonModule } from 'primeng/button'; import { CascadeSelectModule } from 'primeng/cascadeselect'; @Component({ template: `
@if (option.states) { } @if (option.cities) { } @if (option.cname) { } {{ option.cname || option.name }}
Available Countries
`, standalone: true, imports: [ButtonModule, CascadeSelectModule, FormsModule] }) export class CascadeSelectTemplateDemo implements OnInit { countries: any[] | undefined; selectedCity: any; ngOnInit() { this.countries = [ { name: 'Australia', code: 'AU', states: [ { name: 'New South Wales', cities: [ { cname: 'Sydney', code: 'A-SY' }, { cname: 'Newcastle', code: 'A-NE' }, { cname: 'Wollongong', code: 'A-WO' } ] }, { name: 'Queensland', cities: [ { cname: 'Brisbane', code: 'A-BR' }, { cname: 'Townsville', code: 'A-TO' } ] } ] }, { name: 'Canada', code: 'CA', states: [ { name: 'Quebec', cities: [ { cname: 'Montreal', code: 'C-MO' }, { cname: 'Quebec City', code: 'C-QU' } ] }, { name: 'Ontario', cities: [ { cname: 'Ottawa', code: 'C-OT' }, { cname: 'Toronto', code: 'C-TO' } ] } ] }, { name: 'United States', code: 'US', states: [ { name: 'California', cities: [ { cname: 'Los Angeles', code: 'US-LA' }, { cname: 'San Diego', code: 'US-SD' }, { cname: 'San Francisco', code: 'US-SF' } ] }, { name: 'Florida', cities: [ { cname: 'Jacksonville', code: 'US-JA' }, { cname: 'Miami', code: 'US-MI' }, { cname: 'Tampa', code: 'US-TA' }, { cname: 'Orlando', code: 'US-OR' } ] }, { name: 'Texas', cities: [ { cname: 'Austin', code: 'US-AU' }, { cname: 'Dallas', code: 'US-DA' }, { cname: 'Houston', code: 'US-HO' } ] } ] } ]; } } ``` ## templatedrivenforms-doc **Example:** ```typescript import { Component, inject } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { CascadeSelectModule } from 'primeng/cascadeselect'; import { MessageModule } from 'primeng/message'; import { ButtonModule } from 'primeng/button'; import { MessageService } from 'primeng/api'; @Component({ template: `
@if (city.invalid && (city.touched || exampleForm.submitted)) { City is required. }
`, standalone: true, imports: [CascadeSelectModule, MessageModule, ButtonModule, FormsModule] }) export class CascadeSelectTemplateDrivenFormsDemo { messageService = inject(MessageService); countries: any[] | undefined; selectedCity: any = null; constructor() { this.countries = [ { name: 'Australia', code: 'AU', states: [ { name: 'New South Wales', cities: [ { cname: 'Sydney', code: 'A-SY' }, { cname: 'Newcastle', code: 'A-NE' }, { cname: 'Wollongong', code: 'A-WO' } ] }, { name: 'Queensland', cities: [ { cname: 'Brisbane', code: 'A-BR' }, { cname: 'Townsville', code: 'A-TO' } ] } ] }, { name: 'Canada', code: 'CA', states: [ { name: 'Quebec', cities: [ { cname: 'Montreal', code: 'C-MO' }, { cname: 'Quebec City', code: 'C-QU' } ] }, { name: 'Ontario', cities: [ { cname: 'Ottawa', code: 'C-OT' }, { cname: 'Toronto', code: 'C-TO' } ] } ] }, { name: 'United States', code: 'US', states: [ { name: 'California', cities: [ { cname: 'Los Angeles', code: 'US-LA' }, { cname: 'San Diego', code: 'US-SD' }, { cname: 'San Francisco', code: 'US-SF' } ] }, { name: 'Florida', cities: [ { cname: 'Jacksonville', code: 'US-JA' }, { cname: 'Miami', code: 'US-MI' }, { cname: 'Tampa', code: 'US-TA' }, { cname: 'Orlando', code: 'US-OR' } ] }, { name: 'Texas', cities: [ { cname: 'Austin', code: 'US-AU' }, { cname: 'Dallas', code: 'US-DA' }, { cname: 'Houston', code: 'US-HO' } ] } ] } ]; } onSubmit(form: any) { if (form.valid) { this.messageService.add({ severity: 'success', summary: 'Success', detail: 'Form Submitted', life: 3000 }); form.resetForm(); } } } ``` ## Cascade Select CascadeSelect is a form component to select a value from a nested structure of options. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | | required | boolean | false | There must be a value (if set). | | invalid | boolean | false | When present, it specifies that the component should have invalid state style. | | disabled | boolean | false | When present, it specifies that the component should have disabled state style. | | name | string | undefined | When present, it specifies that the name of the input. | | id | string | - | Unique identifier of the component | | searchMessage | string | '{0} results are available' | Text to display when the search is active. Defaults to global value in i18n translation configuration. | | emptyMessage | string | - | Text to display when there is no data. Defaults to global value in i18n translation configuration. | | selectionMessage | string | '{0} items selected' | Text to be displayed in hidden accessible field when options are selected. Defaults to global value in i18n translation configuration. | | emptySearchMessage | string | 'No available options' | Text to display when filtering does not return any results. Defaults to value from PrimeNG locale configuration. | | emptySelectionMessage | string | 'No selected item' | Text to display when filtering does not return any results. Defaults to global value in i18n translation configuration. | | searchLocale | string | - | Locale to use in searching. The default locale is the host environment's current locale. | | optionDisabled | string | - | Name of the disabled field of an option. | | focusOnHover | boolean | - | Fields used when filtering the options, defaults to optionLabel. | | selectOnFocus | boolean | - | Determines if the option will be selected on focus. | | autoOptionFocus | boolean | - | Whether to focus on the first visible or selected element when the overlay panel is shown. | | options | string \| string[] | - | An array of selectitems to display as the available options. | | optionLabel | string | - | Property name or getter function to use as the label of an option. | | optionValue | string | - | Property name or getter function to use as the value of an option, defaults to the option itself when not defined. | | optionGroupLabel | string | - | Property name or getter function to use as the label of an option group. | | optionGroupChildren | string \| string[] | - | Property name or getter function to retrieve the items of a group. | | placeholder | string | - | Default text to display when no option is selected. | | value | WritableSignal | - | Selected value of the component. | | dataKey | string | - | A property to uniquely identify an option. | | inputId | string | - | Identifier of the underlying input element. | | tabindex | number | - | Index of the element in tabbing order. | | ariaLabelledBy | string | - | Establishes relationships between the component and label(s) where its value should be one or more element IDs. | | inputLabel | string | - | Label of the input for accessibility. | | ariaLabel | string | - | Defines a string that labels the input for accessibility. | | showClear | boolean | - | When enabled, a clear icon is displayed to clear the value. | | panelStyleClass | string | - | Style class of the overlay panel. | | panelStyle | Partial | - | Inline style of the overlay panel. | | overlayOptions | OverlayOptions | - | Whether to use overlay API feature. The properties of overlay API can be used like an object in it. | | autofocus | boolean | - | When present, it specifies that the component should automatically get focus on load. | | loading | boolean | - | Whether the dropdown is in loading state. | | loadingIcon | string | - | Icon to display in loading state. | | breakpoint | string | - | The breakpoint to define the maximum width boundary. | | size | "small" \| "large" | undefined | Specifies the size of the component. | | variant | "filled" \| "outlined" | undefined | Specifies the input variant of the component. | | fluid | boolean | undefined | Spans 100% width of the container when enabled. | | appendTo | HTMLElement \| ElementRef \| TemplateRef \| "self" \| "body" \| null \| undefined | 'self' | Target element to attach the overlay, valid values are "body" or a local ng-template variable of another element (note: use binding with brackets for template variables, e.g. [appendTo]="mydiv" for a div element having #mydiv as variable name). | | motionOptions | MotionOptions | - | The motion options. | ### Emits | Name | Parameters | Description | |------|------------|-------------| | onChange | event: CascadeSelectChangeEvent | Callback to invoke on value change. | | onGroupChange | event: { originalEvent: Event; value?: unknown; isFocus?: boolean } | Callback to invoke when a group changes. | | onShow | event: CascadeSelectShowEvent | Callback to invoke when the overlay is shown. | | onHide | value: any | Callback to invoke when the overlay is hidden. | | onClear | event: MouseEvent | Callback to invoke when the clear token is clicked. | | onBeforeShow | event: CascadeSelectBeforeShowEvent | Callback to invoke before overlay is shown. | | onBeforeHide | event: CascadeSelectBeforeHideEvent | Callback to invoke before overlay is hidden. | | onFocus | event: FocusEvent | Callback to invoke when input receives focus. | | onBlur | event: FocusEvent | Callback to invoke when input loses focus. | ### Templates | Name | Type | Description | |------|------|-------------| | value | TemplateRef> | Custom value template. | | option | TemplateRef> | Custom option template. | | header | TemplateRef | Custom header template. | | footer | TemplateRef | Custom footer template. | | triggericon | TemplateRef | Custom trigger icon template. | | loadingicon | TemplateRef | Custom loading icon template. | | groupicon | TemplateRef | Custom option group icon template. | | clearicon | TemplateRef | Custom clear icon template. | ## Pass Through Options | Name | Type | Description | |------|------|-------------| | root | PassThroughOption | Used to pass attributes to the root's DOM element. | | hiddenInputWrapper | PassThroughOption | Used to pass attributes to the hidden input wrapper's DOM element. | | hiddenInput | PassThroughOption | Used to pass attributes to the hidden input's DOM element. | | label | PassThroughOption | Used to pass attributes to the label's DOM element. | | dropdown | PassThroughOption | Used to pass attributes to the dropdown's DOM element. | | loadingIcon | PassThroughOption | Used to pass attributes to the loading icon's DOM element. | | dropdownIcon | PassThroughOption | Used to pass attributes to the dropdown icon's DOM element. | | clearIcon | PassThroughOption | Used to pass attributes to the clear icon's DOM element. | | overlay | PassThroughOption | Used to pass attributes to the overlay's DOM element. | | listContainer | PassThroughOption | Used to pass attributes to the list container's DOM element. | | list | PassThroughOption | Used to pass attributes to the list's DOM element. | | optionList | PassThroughOption | Used to pass attributes to the option list's DOM element. | | option | PassThroughOption | Used to pass attributes to the option's DOM element. | | optionContent | PassThroughOption | Used to pass attributes to the option content's DOM element. | | optionText | PassThroughOption | Used to pass attributes to the option text's DOM element. | | groupIcon | PassThroughOption | Used to pass attributes to the group icon's DOM element. | ## Theming ### CSS Classes | Class | Description | |-------|-------------| | p-cascadeselect | Class name of the root element | | p-cascadeselect-label | Class name of the label element | | p-cascadeselect-dropdown | Class name of the dropdown element | | p-cascadeselect-loading-icon | Class name of the loading icon element | | p-cascadeselect-clear-icon | Class name of the dropdown icon element | | p-cascadeselect-dropdown-icon | Class name of the dropdown icon element | | p-cascadeselect-overlay | Class name of the overlay element | | p-cascadeselect-list-container | Class name of the list container element | | p-cascadeselect-list | Class name of the list element | | p-cascadeselect-item | Class name of the item element | | p-cascadeselect-item-content | Class name of the item content element | | p-cascadeselect-item-text | Class name of the item text element | | p-cascadeselect-group-icon | Class name of the group icon element | | p-cascadeselect-item-list | Class name of the item list element | ### Design Tokens | Token | CSS Variable | Description | |-------|--------------|-------------| | cascadeselect.background | --p-cascadeselect-background | Background of root | | cascadeselect.disabled.background | --p-cascadeselect-disabled-background | Disabled background of root | | cascadeselect.filled.background | --p-cascadeselect-filled-background | Filled background of root | | cascadeselect.filled.hover.background | --p-cascadeselect-filled-hover-background | Filled hover background of root | | cascadeselect.filled.focus.background | --p-cascadeselect-filled-focus-background | Filled focus background of root | | cascadeselect.border.color | --p-cascadeselect-border-color | Border color of root | | cascadeselect.hover.border.color | --p-cascadeselect-hover-border-color | Hover border color of root | | cascadeselect.focus.border.color | --p-cascadeselect-focus-border-color | Focus border color of root | | cascadeselect.invalid.border.color | --p-cascadeselect-invalid-border-color | Invalid border color of root | | cascadeselect.color | --p-cascadeselect-color | Color of root | | cascadeselect.disabled.color | --p-cascadeselect-disabled-color | Disabled color of root | | cascadeselect.placeholder.color | --p-cascadeselect-placeholder-color | Placeholder color of root | | cascadeselect.invalid.placeholder.color | --p-cascadeselect-invalid-placeholder-color | Invalid placeholder color of root | | cascadeselect.shadow | --p-cascadeselect-shadow | Shadow of root | | cascadeselect.padding.x | --p-cascadeselect-padding-x | Padding x of root | | cascadeselect.padding.y | --p-cascadeselect-padding-y | Padding y of root | | cascadeselect.border.radius | --p-cascadeselect-border-radius | Border radius of root | | cascadeselect.focus.ring.width | --p-cascadeselect-focus-ring-width | Focus ring width of root | | cascadeselect.focus.ring.style | --p-cascadeselect-focus-ring-style | Focus ring style of root | | cascadeselect.focus.ring.color | --p-cascadeselect-focus-ring-color | Focus ring color of root | | cascadeselect.focus.ring.offset | --p-cascadeselect-focus-ring-offset | Focus ring offset of root | | cascadeselect.focus.ring.shadow | --p-cascadeselect-focus-ring-shadow | Focus ring shadow of root | | cascadeselect.transition.duration | --p-cascadeselect-transition-duration | Transition duration of root | | cascadeselect.sm.font.size | --p-cascadeselect-sm-font-size | Sm font size of root | | cascadeselect.sm.padding.x | --p-cascadeselect-sm-padding-x | Sm padding x of root | | cascadeselect.sm.padding.y | --p-cascadeselect-sm-padding-y | Sm padding y of root | | cascadeselect.lg.font.size | --p-cascadeselect-lg-font-size | Lg font size of root | | cascadeselect.lg.padding.x | --p-cascadeselect-lg-padding-x | Lg padding x of root | | cascadeselect.lg.padding.y | --p-cascadeselect-lg-padding-y | Lg padding y of root | | cascadeselect.font.weight | --p-cascadeselect-font-weight | Font weight of current value | | cascadeselect.font.size | --p-cascadeselect-font-size | Font size of current value | | cascadeselect.dropdown.width | --p-cascadeselect-dropdown-width | Width of dropdown | | cascadeselect.dropdown.color | --p-cascadeselect-dropdown-color | Color of dropdown | | cascadeselect.overlay.background | --p-cascadeselect-overlay-background | Background of overlay | | cascadeselect.overlay.border.color | --p-cascadeselect-overlay-border-color | Border color of overlay | | cascadeselect.overlay.border.radius | --p-cascadeselect-overlay-border-radius | Border radius of overlay | | cascadeselect.overlay.color | --p-cascadeselect-overlay-color | Color of overlay | | cascadeselect.overlay.shadow | --p-cascadeselect-overlay-shadow | Shadow of overlay | | cascadeselect.list.padding | --p-cascadeselect-list-padding | Padding of list | | cascadeselect.list.gap | --p-cascadeselect-list-gap | Gap of list | | cascadeselect.list.mobile.indent | --p-cascadeselect-list-mobile-indent | Mobile indent of list | | cascadeselect.option.focus.background | --p-cascadeselect-option-focus-background | Focus background of option | | cascadeselect.option.selected.background | --p-cascadeselect-option-selected-background | Selected background of option | | cascadeselect.option.selected.focus.background | --p-cascadeselect-option-selected-focus-background | Selected focus background of option | | cascadeselect.option.color | --p-cascadeselect-option-color | Color of option | | cascadeselect.option.focus.color | --p-cascadeselect-option-focus-color | Focus color of option | | cascadeselect.option.selected.color | --p-cascadeselect-option-selected-color | Selected color of option | | cascadeselect.option.selected.focus.color | --p-cascadeselect-option-selected-focus-color | Selected focus color of option | | cascadeselect.option.selected.font.weight | --p-cascadeselect-option-selected-font-weight | Font weight of a selected option | | cascadeselect.option.padding | --p-cascadeselect-option-padding | Padding of option | | cascadeselect.option.border.radius | --p-cascadeselect-option-border-radius | Border radius of option | | cascadeselect.option.icon.color | --p-cascadeselect-option-icon-color | Icon color of option | | cascadeselect.option.icon.focus.color | --p-cascadeselect-option-icon-focus-color | Icon focus color of option | | cascadeselect.option.icon.size | --p-cascadeselect-option-icon-size | Icon size of option | | cascadeselect.option.font.weight | --p-cascadeselect-option-font-weight | Font weight of option | | cascadeselect.option.font.size | --p-cascadeselect-option-font-size | Font size of option | | cascadeselect.clear.icon.color | --p-cascadeselect-clear-icon-color | Color of clear icon | --- # Angular Chart Component Chart components are based on Charts.js 3.3.2+, an open source HTML5 based charting library. ## Accessibility Screen Reader Chart components internally use canvas element, refer to the Chart.js accessibility guide for more information. ## Basic A chart is configured with 3 properties; type , data and options . Chart type is defined using the type property that accepts pie , doughtnut , line , bar , radar and polarArea as a value. The data defines datasets represented with the chart and the options provide numerous customization options to customize the presentation. **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { ChartModule } from 'primeng/chart'; @Component({ template: ` `, standalone: true, imports: [ChartModule] }) export class ChartBasicDemo implements OnInit { basicData: any; basicOptions: any; platformId = inject(PLATFORM_ID); configService = inject(AppConfigService); designerService = inject(DesignerService); ngOnInit() { this.initChart(); } initChart() { if (isPlatformBrowser(this.platformId)) { const documentStyle = getComputedStyle(document.documentElement); const textColor = documentStyle.getPropertyValue('--p-text-color'); const textColorSecondary = documentStyle.getPropertyValue('--p-text-muted-color'); const surfaceBorder = documentStyle.getPropertyValue('--p-content-border-color'); this.basicData = { labels: ['Q1', 'Q2', 'Q3', 'Q4'], datasets: [ { label: 'Sales', data: [540, 325, 702, 620], backgroundColor: ['rgba(249, 115, 22, 0.2)', 'rgba(6, 182, 212, 0.2)', 'rgb(107, 114, 128, 0.2)', 'rgba(139, 92, 246, 0.2)'], borderColor: ['rgb(249, 115, 22)', 'rgb(6, 182, 212)', 'rgb(107, 114, 128)', 'rgb(139, 92, 246)'], borderWidth: 1 } ] }; this.basicOptions = { maintainAspectRatio: false, aspectRatio: 0.8, plugins: { legend: { labels: { color: textColor } } }, scales: { x: { ticks: { color: textColorSecondary }, grid: { color: surfaceBorder } }, y: { beginAtZero: true, ticks: { color: textColorSecondary }, grid: { color: surfaceBorder } } } }; this.cd.markForCheck(); } } } ``` ## Chart.js To begin with, first you must install the charts.js package using npm and then include it in your project. An example with CLI would be; ## Combo Different chart types can be combined in the same graph using the type option of a dataset. **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { ChartModule } from 'primeng/chart'; @Component({ template: ` `, standalone: true, imports: [ChartModule] }) export class ChartComboDemo implements OnInit { data: any; options: any; platformId = inject(PLATFORM_ID); configService = inject(AppConfigService); designerService = inject(DesignerService); ngOnInit() { this.initChart(); } initChart() { if (isPlatformBrowser(this.platformId)) { const documentStyle = getComputedStyle(document.documentElement); const textColor = documentStyle.getPropertyValue('--p-text-color'); const textColorSecondary = documentStyle.getPropertyValue('--p-text-muted-color'); const surfaceBorder = documentStyle.getPropertyValue('--p-content-border-color'); this.data = { labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], datasets: [ { type: 'line', label: 'Dataset 1', borderColor: documentStyle.getPropertyValue('--p-orange-500'), borderWidth: 2, fill: false, tension: 0.4, data: [50, 25, 12, 48, 56, 76, 42] }, { type: 'bar', label: 'Dataset 2', backgroundColor: documentStyle.getPropertyValue('--p-gray-500'), data: [21, 84, 24, 75, 37, 65, 34], borderColor: 'white', borderWidth: 2 }, { type: 'bar', label: 'Dataset 3', backgroundColor: documentStyle.getPropertyValue('--p-cyan-500'), data: [41, 52, 24, 74, 23, 21, 32] } ] }; this.options = { maintainAspectRatio: false, aspectRatio: 0.6, plugins: { legend: { labels: { color: textColor } } }, scales: { x: { ticks: { color: textColorSecondary }, grid: { color: surfaceBorder } }, y: { ticks: { color: textColorSecondary }, grid: { color: surfaceBorder } } } }; this.cd.markForCheck(); } } } ``` ## Doughnut A doughnut chart is a variant of the pie chart, with a blank center allowing for additional information about the data as a whole to be included. **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { ChartModule } from 'primeng/chart'; @Component({ template: `
`, standalone: true, imports: [ChartModule] }) export class ChartDoughnutDemo implements OnInit { data: any; options: any; platformId = inject(PLATFORM_ID); configService = inject(AppConfigService); designerService = inject(DesignerService); ngOnInit() { this.initChart(); } initChart() { if (isPlatformBrowser(this.platformId)) { const documentStyle = getComputedStyle(document.documentElement); const textColor = documentStyle.getPropertyValue('--p-text-color'); this.data = { labels: ['A', 'B', 'C'], datasets: [ { data: [300, 50, 100], backgroundColor: [documentStyle.getPropertyValue('--p-cyan-500'), documentStyle.getPropertyValue('--p-orange-500'), documentStyle.getPropertyValue('--p-gray-500')], hoverBackgroundColor: [documentStyle.getPropertyValue('--p-cyan-400'), documentStyle.getPropertyValue('--p-orange-400'), documentStyle.getPropertyValue('--p-gray-400')] } ] }; this.options = { cutout: '60%', plugins: { legend: { labels: { color: textColor } } } }; this.cd.markForCheck(); } } } ``` ## Horizontal Bar A bar chart is rendered horizontally when indexAxis option is set as y . **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { ChartModule } from 'primeng/chart'; @Component({ template: ` `, standalone: true, imports: [ChartModule] }) export class ChartHorizontalBarDemo implements OnInit { data: any; options: any; platformId = inject(PLATFORM_ID); configService = inject(AppConfigService); designerService = inject(DesignerService); ngOnInit() { this.initChart(); } initChart() { if (isPlatformBrowser(this.platformId)) { const documentStyle = getComputedStyle(document.documentElement); const textColor = documentStyle.getPropertyValue('--p-text-color'); const textColorSecondary = documentStyle.getPropertyValue('--p-text-muted-color'); const surfaceBorder = documentStyle.getPropertyValue('--p-content-border-color'); this.data = { labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], datasets: [ { label: 'My First dataset', backgroundColor: documentStyle.getPropertyValue('--p-cyan-500'), borderColor: documentStyle.getPropertyValue('--p-cyan-500'), data: [65, 59, 80, 81, 56, 55, 40] }, { label: 'My Second dataset', backgroundColor: documentStyle.getPropertyValue('--p-gray-500'), borderColor: documentStyle.getPropertyValue('--p-gray-500'), data: [28, 48, 40, 19, 86, 27, 90] } ] }; this.options = { indexAxis: 'y', maintainAspectRatio: false, aspectRatio: 0.8, plugins: { legend: { labels: { color: textColor } } }, scales: { x: { ticks: { color: textColorSecondary, font: { weight: 500 } }, grid: { color: surfaceBorder, drawBorder: false } }, y: { ticks: { color: textColorSecondary }, grid: { color: surfaceBorder, drawBorder: false } } } }; this.cd.markForCheck(); } } } ``` ## Line A line chart or line graph is a type of chart which displays information as a series of data points called 'markers' connected by straight line segments. **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { ChartModule } from 'primeng/chart'; @Component({ template: ` `, standalone: true, imports: [ChartModule] }) export class ChartLineDemo implements OnInit { data: any; options: any; platformId = inject(PLATFORM_ID); configService = inject(AppConfigService); designerService = inject(DesignerService); ngOnInit() { this.initChart(); } initChart() { if (isPlatformBrowser(this.platformId)) { const documentStyle = getComputedStyle(document.documentElement); const textColor = documentStyle.getPropertyValue('--p-text-color'); const textColorSecondary = documentStyle.getPropertyValue('--p-text-muted-color'); const surfaceBorder = documentStyle.getPropertyValue('--p-content-border-color'); this.data = { labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], datasets: [ { label: 'First Dataset', data: [65, 59, 80, 81, 56, 55, 40], fill: false, borderColor: documentStyle.getPropertyValue('--p-cyan-500'), tension: 0.4 }, { label: 'Second Dataset', data: [28, 48, 40, 19, 86, 27, 90], fill: false, borderColor: documentStyle.getPropertyValue('--p-gray-500'), tension: 0.4 } ] }; this.options = { maintainAspectRatio: false, aspectRatio: 0.6, plugins: { legend: { labels: { color: textColor } } }, scales: { x: { ticks: { color: textColorSecondary }, grid: { color: surfaceBorder, drawBorder: false } }, y: { ticks: { color: textColorSecondary }, grid: { color: surfaceBorder, drawBorder: false } } } }; this.cd.markForCheck(); } } } ``` ## linestyle-doc Various styles of a line series can be customized to display customizations like an area chart. **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { ChartModule } from 'primeng/chart'; @Component({ template: ` `, standalone: true, imports: [ChartModule] }) export class ChartLineStyleDemo implements OnInit { data: any; options: any; platformId = inject(PLATFORM_ID); configService = inject(AppConfigService); designerService = inject(DesignerService); ngOnInit() { this.initChart(); } initChart() { if (isPlatformBrowser(this.platformId)) { const documentStyle = getComputedStyle(document.documentElement); const textColor = documentStyle.getPropertyValue('--p-text-color'); const textColorSecondary = documentStyle.getPropertyValue('--p-text-muted-color'); const surfaceBorder = documentStyle.getPropertyValue('--p-content-border-color'); this.data = { labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], datasets: [ { label: 'First Dataset', data: [65, 59, 80, 81, 56, 55, 40], fill: false, tension: 0.4, borderColor: documentStyle.getPropertyValue('--p-cyan-500') }, { label: 'Second Dataset', data: [28, 48, 40, 19, 86, 27, 90], fill: false, borderDash: [5, 5], tension: 0.4, borderColor: documentStyle.getPropertyValue('--p-orange-500') }, { label: 'Third Dataset', data: [12, 51, 62, 33, 21, 62, 45], fill: true, borderColor: documentStyle.getPropertyValue('--p-gray-500'), tension: 0.4, backgroundColor: 'rgba(107, 114, 128, 0.2)' } ] }; this.options = { maintainAspectRatio: false, aspectRatio: 0.6, plugins: { legend: { labels: { color: textColor } } }, scales: { x: { ticks: { color: textColorSecondary }, grid: { color: surfaceBorder } }, y: { ticks: { color: textColorSecondary }, grid: { color: surfaceBorder } } } }; this.cd.markForCheck(); } } } ``` ## methods-doc **Example:** ```typescript import { Component } from '@angular/core'; @Component({ template: `
Name Parameters Description
refresh - Redraws the graph with new data.
reinit - Destroys the graph first and then creates it again.
generateLegend - Returns an HTML string of a legend for that chart. The legend is generated from the legendCallback in the options.
`, standalone: true, imports: [] }) export class ChartMethodsDemo {} ``` ## MultiAxis Multiple axes can be added using the scales option. **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { ChartModule } from 'primeng/chart'; @Component({ template: ` `, standalone: true, imports: [ChartModule] }) export class ChartMultiAxisDemo implements OnInit { data: any; options: any; platformId = inject(PLATFORM_ID); configService = inject(AppConfigService); designerService = inject(DesignerService); ngOnInit() { this.initChart(); } initChart() { if (isPlatformBrowser(this.platformId)) { const documentStyle = getComputedStyle(document.documentElement); const textColor = documentStyle.getPropertyValue('--p-text-color'); const textColorSecondary = documentStyle.getPropertyValue('--p-text-muted-color'); const surfaceBorder = documentStyle.getPropertyValue('--p-content-border-color'); this.data = { labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], datasets: [ { label: 'Dataset 1', fill: false, borderColor: documentStyle.getPropertyValue('--p-cyan-500'), yAxisID: 'y', tension: 0.4, data: [65, 59, 80, 81, 56, 55, 10] }, { label: 'Dataset 2', fill: false, borderColor: documentStyle.getPropertyValue('--p-gray-500'), yAxisID: 'y1', tension: 0.4, data: [28, 48, 40, 19, 86, 27, 90] } ] }; this.options = { stacked: false, maintainAspectRatio: false, aspectRatio: 0.6, plugins: { legend: { labels: { color: textColor } } }, scales: { x: { ticks: { color: textColorSecondary }, grid: { color: surfaceBorder } }, y: { type: 'linear', display: true, position: 'left', ticks: { color: textColorSecondary }, grid: { color: surfaceBorder } }, y1: { type: 'linear', display: true, position: 'right', ticks: { color: textColorSecondary }, grid: { drawOnChartArea: false, color: surfaceBorder } } } }; this.cd.markForCheck(); } } } ``` ## Pie A pie chart is a circular statistical graphic which is divided into slices to illustrate numerical proportion. **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { ChartModule } from 'primeng/chart'; @Component({ template: `
`, standalone: true, imports: [ChartModule] }) export class ChartPieDemo implements OnInit { data: any; options: any; platformId = inject(PLATFORM_ID); configService = inject(AppConfigService); designerService = inject(DesignerService); ngOnInit() { this.initChart(); } initChart() { if (isPlatformBrowser(this.platformId)) { const documentStyle = getComputedStyle(document.documentElement); const textColor = documentStyle.getPropertyValue('--text-color'); this.data = { labels: ['A', 'B', 'C'], datasets: [ { data: [540, 325, 702], backgroundColor: [documentStyle.getPropertyValue('--p-cyan-500'), documentStyle.getPropertyValue('--p-orange-500'), documentStyle.getPropertyValue('--p-gray-500')], hoverBackgroundColor: [documentStyle.getPropertyValue('--p-cyan-400'), documentStyle.getPropertyValue('--p-orange-400'), documentStyle.getPropertyValue('--p-gray-400')] } ] }; this.options = { plugins: { legend: { labels: { usePointStyle: true, color: textColor } } } }; this.cd.markForCheck(); } } } ``` ## Polar Area Polar area charts are similar to pie charts, but each segment has the same angle - the radius of the segment differs depending on the value. **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { ChartModule } from 'primeng/chart'; @Component({ template: `
`, standalone: true, imports: [ChartModule] }) export class ChartPolarAreaDemo implements OnInit { data: any; options: any; platformId = inject(PLATFORM_ID); configService = inject(AppConfigService); designerService = inject(DesignerService); ngOnInit() { this.initChart(); } initChart() { if (isPlatformBrowser(this.platformId)) { const documentStyle = getComputedStyle(document.documentElement); const textColor = documentStyle.getPropertyValue('--p-text-color'); const surfaceBorder = documentStyle.getPropertyValue('--p-content-border-color'); this.data = { datasets: [ { data: [11, 16, 7, 3, 14], backgroundColor: [ documentStyle.getPropertyValue('--p-pink-500'), documentStyle.getPropertyValue('--p-gray-500'), documentStyle.getPropertyValue('--p-orange-500'), documentStyle.getPropertyValue('--p-purple-500'), documentStyle.getPropertyValue('--p-cyan-500') ], label: 'My dataset' } ], labels: ['Pink', 'Gray', 'Orange', 'Purple', 'Cyan'] }; this.options = { plugins: { legend: { labels: { color: textColor } } }, scales: { r: { grid: { color: surfaceBorder } } } }; this.cd.markForCheck(); } } } ``` ## props-doc **Example:** ```typescript import { Component } from '@angular/core'; @Component({ template: `
Name Type Default Description
type string null Type of the chart.
data any null Data to display.
options any null Options to customize the chart.
plugins any[] null Array of per-chart plugins to customize the chart behaviour.
width string null Width of the chart.
height string null Height of the chart.
responsive boolean true Whether the chart is redrawn on screen size change.
onDataSelect function null Callback to execute when an element on chart is clicked.
`, standalone: true, imports: [] }) export class ChartPropsDemo {} ``` ## radar-doc A radar chart is a graphical method of displaying multivariate data in the form of a two-dimensional chart of three or more quantitative variables represented on axes starting from the same point. **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { ChartModule } from 'primeng/chart'; @Component({ template: `
`, standalone: true, imports: [ChartModule] }) export class ChartRadarDemo implements OnInit { data: any; options: any; platformId = inject(PLATFORM_ID); configService = inject(AppConfigService); designerService = inject(DesignerService); ngOnInit() { this.initChart(); } initChart() { if (isPlatformBrowser(this.platformId)) { const documentStyle = getComputedStyle(document.documentElement); const textColor = documentStyle.getPropertyValue('--p-text-color'); const textColorSecondary = documentStyle.getPropertyValue('--p-text-muted-color'); this.data = { labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'], datasets: [ { label: 'My First dataset', borderColor: documentStyle.getPropertyValue('--p-gray-400'), pointBackgroundColor: documentStyle.getPropertyValue('--p-gray-400'), pointBorderColor: documentStyle.getPropertyValue('--p-gray-400'), pointHoverBackgroundColor: textColor, pointHoverBorderColor: documentStyle.getPropertyValue('--p-gray-400'), data: [65, 59, 90, 81, 56, 55, 40] }, { label: 'My Second dataset', borderColor: documentStyle.getPropertyValue('--p-cyan-400'), pointBackgroundColor: documentStyle.getPropertyValue('--p-cyan-400'), pointBorderColor: documentStyle.getPropertyValue('--p-cyan-400'), pointHoverBackgroundColor: textColor, pointHoverBorderColor: documentStyle.getPropertyValue('--p-cyan-400'), data: [28, 48, 40, 19, 96, 27, 100] } ] }; this.options = { plugins: { legend: { labels: { color: textColor } } }, scales: { r: { grid: { color: textColorSecondary } } } }; } this.cd.markForCheck(); } } ``` ## Stacked Bar Bars can be stacked on top of each other when stacked option of a scale is enabled. **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { ChartModule } from 'primeng/chart'; @Component({ template: ` `, standalone: true, imports: [ChartModule] }) export class ChartStackedBarDemo implements OnInit { data: any; options: any; platformId = inject(PLATFORM_ID); configService = inject(AppConfigService); designerService = inject(DesignerService); ngOnInit() { this.initChart(); } initChart() { if (isPlatformBrowser(this.platformId)) { const documentStyle = getComputedStyle(document.documentElement); const textColor = documentStyle.getPropertyValue('--p-text-color'); const textColorSecondary = documentStyle.getPropertyValue('--p-text-muted-color'); const surfaceBorder = documentStyle.getPropertyValue('--p-content-border-color'); this.data = { labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], datasets: [ { type: 'bar', label: 'Dataset 1', backgroundColor: documentStyle.getPropertyValue('--p-cyan-500'), data: [50, 25, 12, 48, 90, 76, 42] }, { type: 'bar', label: 'Dataset 2', backgroundColor: documentStyle.getPropertyValue('--p-gray-500'), data: [21, 84, 24, 75, 37, 65, 34] }, { type: 'bar', label: 'Dataset 3', backgroundColor: documentStyle.getPropertyValue('--p-orange-500'), data: [41, 52, 24, 74, 23, 21, 32] } ] }; this.options = { maintainAspectRatio: false, aspectRatio: 0.8, plugins: { tooltip: { mode: 'index', intersect: false }, legend: { labels: { color: textColor } } }, scales: { x: { stacked: true, ticks: { color: textColorSecondary }, grid: { color: surfaceBorder, drawBorder: false } }, y: { stacked: true, ticks: { color: textColorSecondary }, grid: { color: surfaceBorder, drawBorder: false } } } }; this.cd.markForCheck(); } } } ``` ## Vertical Bar A bar chart or bar graph is a chart that presents grouped data with rectangular bars with lengths proportional to the values that they represent. **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { ChartModule } from 'primeng/chart'; @Component({ template: ` `, standalone: true, imports: [ChartModule] }) export class ChartVerticalBarDemo implements OnInit { data: any; options: any; platformId = inject(PLATFORM_ID); configService = inject(AppConfigService); designerService = inject(DesignerService); ngOnInit() { this.initChart(); } initChart() { if (isPlatformBrowser(this.platformId)) { const documentStyle = getComputedStyle(document.documentElement); const textColor = documentStyle.getPropertyValue('--p-text-color'); const textColorSecondary = documentStyle.getPropertyValue('--p-text-muted-color'); const surfaceBorder = documentStyle.getPropertyValue('--p-content-border-color'); this.data = { labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], datasets: [ { label: 'My First dataset', backgroundColor: documentStyle.getPropertyValue('--p-cyan-500'), borderColor: documentStyle.getPropertyValue('--p-cyan-500'), data: [65, 59, 80, 81, 56, 55, 40] }, { label: 'My Second dataset', backgroundColor: documentStyle.getPropertyValue('--p-gray-500'), borderColor: documentStyle.getPropertyValue('--p-gray-500'), data: [28, 48, 40, 19, 86, 27, 90] } ] }; this.options = { maintainAspectRatio: false, aspectRatio: 0.8, plugins: { legend: { labels: { color: textColor } } }, scales: { x: { ticks: { color: textColorSecondary, font: { weight: 500 } }, grid: { color: surfaceBorder, drawBorder: false } }, y: { ticks: { color: textColorSecondary }, grid: { color: surfaceBorder, drawBorder: false } } } }; this.cd.markForCheck(); } } } ``` ## U I Chart Chart groups a collection of contents in tabs. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | | type | "bar" \| "line" \| "scatter" \| "bubble" \| "pie" \| "doughnut" \| "polarArea" \| "radar" | - | Type of the chart. | | plugins | ChartPlugin[] | - | Array of per-chart plugins to customize the chart behaviour. | | width | string | - | Width of the chart. | | height | string | - | Height of the chart. | | responsive | boolean | - | Whether the chart is redrawn on screen size change. | | ariaLabel | string | - | Used to define a string that autocomplete attribute the current element. | | ariaLabelledBy | string | - | Establishes relationships between the component and label(s) where its value should be one or more element IDs. | | data | ChartData | - | Data to display. | | options | _DeepPartialObject & ElementChartOptions & PluginChartOptions & DatasetChartOptions & ScaleChartOptions> | - | Options to customize the chart. | ### Emits | Name | Parameters | Description | |------|------------|-------------| | onDataSelect | event: ChartDataSelectEvent | Callback to execute when an element on chart is clicked. | ## Pass Through Options | Name | Type | Description | |------|------|-------------| | host | PassThroughOption | Used to pass attributes to the host's DOM element. | | root | PassThroughOption | Used to pass attributes to the root's DOM element. | | canvas | PassThroughOption | Used to pass attributes to the canvas DOM element. | ## Theming ### CSS Classes | Class | Description | |-------|-------------| | p-chart | Class name of the root element | --- # Angular Checkbox Component Checkbox is an extension to standard checkbox element with theming. ## Accessibility Screen Reader Checkbox component uses a hidden native checkbox element internally that is only visible to screen readers. Value to describe the component can either be provided via label tag combined with inputId prop or using ariaLabelledBy , ariaLabel props. ## Basic Binary checkbox is used as a controlled input with ngModel and binary properties. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { CheckboxModule } from 'primeng/checkbox'; @Component({ template: `
`, standalone: true, imports: [CheckboxModule, FormsModule] }) export class CheckboxBasicDemo { checked: any = null; } ``` ## Disabled When disabled is present, the element cannot be edited and focused. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { CheckboxModule } from 'primeng/checkbox'; @Component({ template: `
`, standalone: true, imports: [CheckboxModule, FormsModule] }) export class CheckboxDisabledDemo { checked1: boolean = false; checked2: boolean = true; } ``` ## Dynamic Checkboxes can be generated using a list of values. **Example:** ```typescript import { Component, OnInit } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { CheckboxModule } from 'primeng/checkbox'; @Component({ template: `
@for (category of categories; track category.key) {
}
`, standalone: true, imports: [CheckboxModule, FormsModule] }) export class CheckboxDynamicDemo implements OnInit { selectedCategories: any[] = []; categories: any[] = [ { name: 'Accounting', key: 'A' }, { name: 'Marketing', key: 'M' }, { name: 'Production', key: 'P' }, { name: 'Research', key: 'R' } ]; ngOnInit() { this.selectedCategories = [this.categories[1]]; } } ``` ## Filled Specify the variant property as filled to display the component with a higher visual emphasis than the default outlined style. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { CheckboxModule } from 'primeng/checkbox'; @Component({ template: `
`, standalone: true, imports: [CheckboxModule, FormsModule] }) export class CheckboxFilledDemo { checked: boolean = false; } ``` ## Indeterminate The indeterminate state indicates that a checkbox is neither "on" or "off". **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { CheckboxModule } from 'primeng/checkbox'; @Component({ template: `
`, standalone: true, imports: [CheckboxModule, FormsModule] }) export class CheckboxIndeterminateDemo { checked: any = null; } ``` ## Invalid The invalid state is applied using the ⁠invalid property to indicate failed validation, which can be integrated with Angular Forms. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { CheckboxModule } from 'primeng/checkbox'; @Component({ template: `
`, standalone: true, imports: [CheckboxModule, FormsModule] }) export class CheckboxInvalidDemo { checked: boolean = false; } ``` ## label-doc The label attribute provides a label text for the checkbox. This label is also clickable and toggles the checked state. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { CheckboxModule } from 'primeng/checkbox'; @Component({ template: `
`, standalone: true, imports: [CheckboxModule, FormsModule] }) export class CheckboxLabelDemo { selectedValues: string[] = []; } ``` ## multiple-doc Multiple checkboxes can be grouped together. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { CheckboxModule } from 'primeng/checkbox'; @Component({ template: `
`, standalone: true, imports: [CheckboxModule, FormsModule] }) export class CheckboxMultipleDemo { pizza: string[] = []; } ``` ## reactiveforms-doc Checkbox can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control. **Example:** ```typescript import { Component, inject } from '@angular/core'; import { ReactiveFormsModule } from '@angular/forms'; import { CheckboxModule } from 'primeng/checkbox'; import { MessageModule } from 'primeng/message'; import { ButtonModule } from 'primeng/button'; import { MessageService } from 'primeng/api'; @Component({ template: `
@for (item of formKeys; track item) {
}
@if (hasAnyInvalid()) { At least one ingredient must be selected. }
`, standalone: true, imports: [CheckboxModule, MessageModule, ButtonModule, ReactiveFormsModule] }) export class CheckboxReactiveFormsDemo { messageService = inject(MessageService); formSubmitted: boolean = false; exampleForm: FormGroup; constructor() { this.exampleForm = this.fb.group( { cheese: [false], mushroom: [false], pepper: [false], onion: [false] }, { validators: this.atLeastOneSelectedValidator } ); } atLeastOneSelectedValidator(group: FormGroup) { [key: string]: any } | null { const anySelected = Object.values(group.controls).some((control) => control.value === true); return anySelected ? null : { atLeastOneRequired: true }; } hasAnyInvalid(): boolean { return this.formSubmitted && this.exampleForm.hasError('atLeastOneRequired'); } isInvalid(controlName: string): boolean { const control = this.exampleForm.get(controlName); return this.formSubmitted && this.exampleForm.hasError('atLeastOneRequired') && control?.value === false; } onSubmit() { this.formSubmitted = true; if (this.exampleForm.valid) { this.messageService.add({ severity: 'success', summary: 'Success', detail: 'Form is submitted', life: 3000 }); this.exampleForm.reset({ cheese: false, mushroom: false, pepper: false, onion: false }); this.formSubmitted = false; } } } ``` ## Sizes Checkbox provides small and large sizes as alternatives to the base. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { CheckboxModule } from 'primeng/checkbox'; @Component({ template: `
`, standalone: true, imports: [CheckboxModule, FormsModule] }) export class CheckboxSizesDemo { size: any = null; } ``` ## templatedrivenforms-doc **Example:** ```typescript import { Component, inject } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { CheckboxModule } from 'primeng/checkbox'; import { MessageModule } from 'primeng/message'; import { ButtonModule } from 'primeng/button'; import { MessageService } from 'primeng/api'; @Component({ template: `
@for (item of formKeys; track item) {
}
@if (isInvalid()) { At least one ingredient must be selected. }
`, standalone: true, imports: [CheckboxModule, MessageModule, ButtonModule, FormsModule] }) export class CheckboxTemplateDrivenFormsDemo { messageService = inject(MessageService); formSubmitted: boolean = false; formModel: any = { cheese: false, mushroom: false, pepper: false, onion: false }; isInvalid(): boolean { return this.formSubmitted && !this.isAtLeastOneSelected(); } isAtLeastOneSelected(): boolean { return Object.values(this.formModel).some((value) => value === true); } onSubmit(form: NgForm) { this.formSubmitted = true; if (this.isAtLeastOneSelected()) { this.messageService.add({ severity: 'success', summary: 'Success', detail: 'Form is submitted', life: 3000 }); this.formModel = { cheese: false, mushroom: false, pepper: false, onion: false }; form.resetForm(this.formModel); this.formSubmitted = false; } } } ``` ## Checkbox Checkbox is an extension to standard checkbox element with theming. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | | required | boolean | false | There must be a value (if set). | | invalid | boolean | false | When present, it specifies that the component should have invalid state style. | | disabled | boolean | false | When present, it specifies that the component should have disabled state style. | | name | string | undefined | When present, it specifies that the name of the input. | | value | any | - | Value of the checkbox. | | binary | boolean | - | Allows to select a boolean value instead of multiple values. | | ariaLabelledBy | string | - | Establishes relationships between the component and label(s) where its value should be one or more element IDs. | | ariaLabel | string | - | Used to define a string that labels the input element. | | tabindex | number | - | Index of the element in tabbing order. | | inputId | string | - | Identifier of the focus input to match a label defined for the component. | | inputStyle | Partial | - | Inline style of the input element. | | inputClass | string | - | Style class of the input element. | | indeterminate | boolean | - | When present, it specifies input state as indeterminate. | | formControl | FormControl | - | Form control value. | | checkboxIcon | string | - | Icon class of the checkbox icon. | | readonly | boolean | - | When present, it specifies that the component cannot be edited. | | autofocus | boolean | - | When present, it specifies that the component should automatically get focus on load. | | trueValue | any | - | Value in checked state. | | falseValue | any | - | Value in unchecked state. | | variant | "filled" \| "outlined" | undefined | Specifies the input variant of the component. | | size | "small" \| "large" | undefined | Specifies the size of the component. | ### Emits | Name | Parameters | Description | |------|------------|-------------| | onChange | event: CheckboxChangeEvent | Callback to invoke on value change. | | onFocus | event: Event | Callback to invoke when the receives focus. | | onBlur | event: Event | Callback to invoke when the loses focus. | ### Templates | Name | Type | Description | |------|------|-------------| | icon | TemplateRef | Custom checkbox icon template. | ## Pass Through Options | Name | Type | Description | |------|------|-------------| | root | PassThroughOption | Used to pass attributes to the root's DOM element. | | input | PassThroughOption | Used to pass attributes to the input's DOM element. | | box | PassThroughOption | Used to pass attributes to the box's DOM element. | | icon | PassThroughOption | Used to pass attributes to the icon's DOM element. | ## Theming ### CSS Classes | Class | Description | |-------|-------------| | p-checkbox | Class name of the root element | | p-checkbox-box | Class name of the box element | | p-checkbox-input | Class name of the input element | | p-checkbox-icon | Class name of the icon element | ### Design Tokens | Token | CSS Variable | Description | |-------|--------------|-------------| | checkbox.border.radius | --p-checkbox-border-radius | Border radius of root | | checkbox.width | --p-checkbox-width | Width of root | | checkbox.height | --p-checkbox-height | Height of root | | checkbox.background | --p-checkbox-background | Background of root | | checkbox.checked.background | --p-checkbox-checked-background | Checked background of root | | checkbox.checked.hover.background | --p-checkbox-checked-hover-background | Checked hover background of root | | checkbox.disabled.background | --p-checkbox-disabled-background | Disabled background of root | | checkbox.filled.background | --p-checkbox-filled-background | Filled background of root | | checkbox.border.color | --p-checkbox-border-color | Border color of root | | checkbox.hover.border.color | --p-checkbox-hover-border-color | Hover border color of root | | checkbox.focus.border.color | --p-checkbox-focus-border-color | Focus border color of root | | checkbox.checked.border.color | --p-checkbox-checked-border-color | Checked border color of root | | checkbox.checked.hover.border.color | --p-checkbox-checked-hover-border-color | Checked hover border color of root | | checkbox.checked.focus.border.color | --p-checkbox-checked-focus-border-color | Checked focus border color of root | | checkbox.checked.disabled.border.color | --p-checkbox-checked-disabled-border-color | Checked disabled border color of root | | checkbox.invalid.border.color | --p-checkbox-invalid-border-color | Invalid border color of root | | checkbox.shadow | --p-checkbox-shadow | Shadow of root | | checkbox.focus.ring.width | --p-checkbox-focus-ring-width | Focus ring width of root | | checkbox.focus.ring.style | --p-checkbox-focus-ring-style | Focus ring style of root | | checkbox.focus.ring.color | --p-checkbox-focus-ring-color | Focus ring color of root | | checkbox.focus.ring.offset | --p-checkbox-focus-ring-offset | Focus ring offset of root | | checkbox.focus.ring.shadow | --p-checkbox-focus-ring-shadow | Focus ring shadow of root | | checkbox.transition.duration | --p-checkbox-transition-duration | Transition duration of root | | checkbox.sm.width | --p-checkbox-sm-width | Sm width of root | | checkbox.sm.height | --p-checkbox-sm-height | Sm height of root | | checkbox.lg.width | --p-checkbox-lg-width | Lg width of root | | checkbox.lg.height | --p-checkbox-lg-height | Lg height of root | | checkbox.icon.size | --p-checkbox-icon-size | Size of icon | | checkbox.icon.color | --p-checkbox-icon-color | Color of icon | | checkbox.icon.checked.color | --p-checkbox-icon-checked-color | Checked color of icon | | checkbox.icon.checked.hover.color | --p-checkbox-icon-checked-hover-color | Checked hover color of icon | | checkbox.icon.disabled.color | --p-checkbox-icon-disabled-color | Disabled color of icon | | checkbox.icon.sm.size | --p-checkbox-icon-sm-size | Sm size of icon | | checkbox.icon.lg.size | --p-checkbox-icon-lg-size | Lg size of icon | --- # Angular Chip Component Chip represents entities using icons, labels and images. ## Accessibility Screen Reader Chip uses the label property as the default aria-label , since any attribute is passed to the root element aria-labelledby or aria-label can be used to override the default behavior. Removable chips have a tabindex and focusable with the tab key. Keyboard Support Key Function backspace Hides removable. enter Hides removable. ## Basic A basic chip with a text is created with the label property. In addition when removable is added, a delete icon is displayed to remove a chip, the optional onRemove event is available to get notified when a chip is hidden. **Example:** ```typescript import { Component } from '@angular/core'; import { ChipModule } from 'primeng/chip'; @Component({ template: `
`, standalone: true, imports: [ChipModule] }) export class ChipBasicDemo {} ``` ## Icon A font icon next to the label can be displayed with the icon property. **Example:** ```typescript import { Component } from '@angular/core'; import { ChipModule } from 'primeng/chip'; @Component({ template: `
`, standalone: true, imports: [ChipModule] }) export class ChipIconDemo {} ``` ## Image The image property is used to display an image like an avatar. **Example:** ```typescript import { Component } from '@angular/core'; import { ChipModule } from 'primeng/chip'; @Component({ template: `
`, standalone: true, imports: [ChipModule] }) export class ChipImageDemo {} ``` ## Template Content can easily be customized with the dynamic content instead of using the built-in modes. **Example:** ```typescript import { Component } from '@angular/core'; import { ChipModule } from 'primeng/chip'; @Component({ template: ` P PRIME `, standalone: true, imports: [ChipModule] }) export class ChipTemplateDemo {} ``` ## Chip Chip represents people using icons, labels and images. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | | label | string | - | Defines the text to display. | | icon | string | - | Defines the icon to display. | | image | string | - | Defines the image to display. | | alt | string | - | Alt attribute of the image. | | disabled | boolean | - | When present, it specifies that the element should be disabled. | | removable | boolean | - | Whether to display a remove icon. | | removeIcon | string | - | Icon of the remove element. | | chipProps | ChipProps | - | Used to pass all properties of the chipProps to the Chip component. | ### Emits | Name | Parameters | Description | |------|------------|-------------| | onRemove | event: MouseEvent | Callback to invoke when a chip is removed. | | onImageError | event: Event | This event is triggered if an error occurs while loading an image file. | ### Templates | Name | Type | Description | |------|------|-------------| | removeicon | TemplateRef | Custom remove icon template. | ## Pass Through Options | Name | Type | Description | |------|------|-------------| | host | PassThroughOption | Used to pass attributes to the host's DOM element. | | root | PassThroughOption | Used to pass attributes to the root's DOM element. | | image | PassThroughOption | Used to pass attributes to the image's DOM element. | | icon | PassThroughOption | Used to pass attributes to the icon's DOM element. | | label | PassThroughOption | Used to pass attributes to the label's DOM element. | | removeIcon | PassThroughOption | Used to pass attributes to the remove icon's DOM element. | ## Theming ### CSS Classes | Class | Description | |-------|-------------| | p-chip | Class name of the root element | | p-chip-image | Class name of the image element | | p-chip-icon | Class name of the icon element | | p-chip-label | Class name of the label element | | p-chip-remove-icon | Class name of the remove icon element | ### Design Tokens | Token | CSS Variable | Description | |-------|--------------|-------------| | chip.border.radius | --p-chip-border-radius | Border radius of root | | chip.padding.x | --p-chip-padding-x | Padding x of root | | chip.padding.y | --p-chip-padding-y | Padding y of root | | chip.gap | --p-chip-gap | Gap of root | | chip.transition.duration | --p-chip-transition-duration | Transition duration of root | | chip.background | --p-chip-background | Background of root | | chip.focus.background | --p-chip-focus-background | Focus background of root | | chip.color | --p-chip-color | Color of root | | chip.image.width | --p-chip-image-width | Width of image | | chip.image.height | --p-chip-image-height | Height of image | | chip.icon.size | --p-chip-icon-size | Size of icon | | chip.icon.color | --p-chip-icon-color | Color of icon | | chip.label.font.weight | --p-chip-label-font-weight | Font weight of label | | chip.label.font.size | --p-chip-label-font-size | Font size of label | | chip.remove.icon.size | --p-chip-remove-icon-size | Size of remove icon | | chip.remove.icon.focus.ring.width | --p-chip-remove-icon-focus-ring-width | Focus ring width of remove icon | | chip.remove.icon.focus.ring.style | --p-chip-remove-icon-focus-ring-style | Focus ring style of remove icon | | chip.remove.icon.focus.ring.color | --p-chip-remove-icon-focus-ring-color | Focus ring color of remove icon | | chip.remove.icon.focus.ring.offset | --p-chip-remove-icon-focus-ring-offset | Focus ring offset of remove icon | | chip.remove.icon.focus.ring.shadow | --p-chip-remove-icon-focus-ring-shadow | Focus ring shadow of remove icon | | chip.remove.icon.color | --p-chip-remove-icon-color | Color of remove icon | --- # Angular ColorPicker Component ColorPicker is an input component to select a color. ## Accessibility Screen Reader Specification does not cover a color picker yet and using a semantic native color picker is not consistent across browsers so currently component is not compatible with screen readers. In the upcoming versions, text fields will be introduced below the slider section to be able to pick a color using accessible text boxes in hsl, rgba and hex formats. ## Basic ColorPicker is used as a controlled input with ngModel property. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { ColorPickerModule } from 'primeng/colorpicker'; @Component({ template: `
`, standalone: true, imports: [ColorPickerModule, FormsModule] }) export class ColorPickerBasicDemo { color: string | undefined; } ``` ## Disabled When disabled is present, the element cannot be edited and focused. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { ColorPickerModule } from 'primeng/colorpicker'; @Component({ template: `
`, standalone: true, imports: [ColorPickerModule, FormsModule] }) export class ColorPickerDisabledDemo { color: string | undefined; } ``` ## Format Default color format to use in value binding is hex and other possible values can be rgb and hsb using the format property. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { ColorPickerModule } from 'primeng/colorpicker'; @Component({ template: `
{{ color }}
{{ 'r:' + colorRGB.r + ' g:' + colorRGB.g + ' b:' + colorRGB.b }}
{{ 'h:' + colorHSB.h + ' s:' + colorHSB.s + ' b:' + colorHSB.b }}
`, standalone: true, imports: [ColorPickerModule, FormsModule] }) export class ColorPickerFormatDemo { color: string = '#6466f1'; colorRGB: any = { r: 100, g: 102, b: 241 }; colorHSB: any = { h: 239, s: 59, b: 95 }; } ``` ## Inline ColorPicker is displayed as a popup by default, add inline property to customize this behavior. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { ColorPickerModule } from 'primeng/colorpicker'; @Component({ template: `
`, standalone: true, imports: [ColorPickerModule, FormsModule] }) export class ColorPickerInlineDemo { color: string | undefined; } ``` ## reactiveforms-doc ColorPicker can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control. **Example:** ```typescript import { Component, inject } from '@angular/core'; import { ReactiveFormsModule } from '@angular/forms'; import { ColorPickerModule } from 'primeng/colorpicker'; import { MessageModule } from 'primeng/message'; import { ButtonModule } from 'primeng/button'; import { MessageService } from 'primeng/api'; @Component({ template: `
@if (isInvalid('color')) { Color is required. }
`, standalone: true, imports: [ColorPickerModule, MessageModule, ButtonModule, ReactiveFormsModule] }) export class ColorPickerReactiveFormsDemo { messageService = inject(MessageService); exampleForm: FormGroup; formSubmitted: boolean = false; constructor() { this.exampleForm = this.fb.group({ color: ['', Validators.required] }); } onSubmit() { this.formSubmitted = true; if (this.exampleForm.valid) { this.messageService.add({ severity: 'success', summary: 'Success', detail: 'Form is submitted', life: 3000 }); this.exampleForm.reset(); this.formSubmitted = false; } } isInvalid(controlName: string) { const control = this.exampleForm.get(controlName); return control?.invalid && this.formSubmitted; } } ``` ## templatedrivenforms-doc **Example:** ```typescript import { Component, inject } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { ColorPickerModule } from 'primeng/colorpicker'; import { MessageModule } from 'primeng/message'; import { ButtonModule } from 'primeng/button'; import { MessageService } from 'primeng/api'; @Component({ template: `
@if (colorModel.invalid && (colorModel.touched || exampleForm.submitted)) { Color is required. }
`, standalone: true, imports: [ColorPickerModule, MessageModule, ButtonModule, FormsModule] }) export class ColorPickerTemplateDrivenFormsDemo { messageService = inject(MessageService); color: string | undefined; onSubmit(form: any) { if (form.valid) { this.messageService.add({ severity: 'success', summary: 'Success', detail: 'Form is submitted', life: 3000 }); form.resetForm(); } } } ``` ## Color Picker ColorPicker groups a collection of contents in tabs. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | | required | boolean | false | There must be a value (if set). | | invalid | boolean | false | When present, it specifies that the component should have invalid state style. | | disabled | boolean | false | When present, it specifies that the component should have disabled state style. | | name | string | undefined | When present, it specifies that the name of the input. | | inline | boolean | - | Whether to display as an overlay or not. | | format | "hex" \| "rgb" \| "hsb" | - | Format to use in value binding. | | tabindex | string | - | Index of the element in tabbing order. | | inputId | string | - | Identifier of the focus input to match a label defined for the dropdown. | | autoZIndex | boolean | - | Whether to automatically manage layering. | | autofocus | boolean | - | When present, it specifies that the component should automatically get focus on load. | | defaultColor | string | - | Default color to display initially when model value is not present. | | appendTo | HTMLElement \| ElementRef \| TemplateRef \| "self" \| "body" \| null \| undefined | 'self' | Target element to attach the overlay, valid values are "body" or a local ng-template variable of another element (note: use binding with brackets for template variables, e.g. [appendTo]="mydiv" for a div element having #mydiv as variable name). | | overlayOptions | OverlayOptions | - | Whether to use overlay API feature. The properties of overlay API can be used like an object in it. | | motionOptions | MotionOptions | - | The motion options. | ### Emits | Name | Parameters | Description | |------|------------|-------------| | onChange | event: ColorPickerChangeEvent | Callback to invoke on value change. | | onShow | value: any | Callback to invoke on panel is shown. | | onHide | value: any | Callback to invoke on panel is hidden. | ## Pass Through Options | Name | Type | Description | |------|------|-------------| | host | PassThroughOption | Used to pass attributes to the host's DOM element. | | root | PassThroughOption | Used to pass attributes to the root's DOM element. | | preview | PassThroughOption | Used to pass attributes to the preview input's DOM element. | | panel | PassThroughOption | Used to pass attributes to the panel's DOM element. | | content | PassThroughOption | Used to pass attributes to the content's DOM element. | | colorSelector | PassThroughOption | Used to pass attributes to the color selector's DOM element. | | colorBackground | PassThroughOption | Used to pass attributes to the color background's DOM element. | | colorHandle | PassThroughOption | Used to pass attributes to the color handle's DOM element. | | hue | PassThroughOption | Used to pass attributes to the hue's DOM element. | | hueHandle | PassThroughOption | Used to pass attributes to the hue handle's DOM element. | | motion | MotionOptions | Used to pass options to the motion component/directive. | ## Theming ### CSS Classes | Class | Description | |-------|-------------| | p-colorpicker | Class name of the root element | | p-colorpicker-preview | Class name of the preview element | | p-colorpicker-panel | Class name of the panel element | | p-colorpicker-color-selector | Class name of the color selector element | | p-colorpicker-color-background | Class name of the color background element | | p-colorpicker-color-handle | Class name of the color handle element | | p-colorpicker-hue | Class name of the hue element | | p-colorpicker-hue-handle | Class name of the hue handle element | ### Design Tokens | Token | CSS Variable | Description | |-------|--------------|-------------| | colorpicker.transition.duration | --p-colorpicker-transition-duration | Transition duration of root | | colorpicker.preview.width | --p-colorpicker-preview-width | Width of preview | | colorpicker.preview.height | --p-colorpicker-preview-height | Height of preview | | colorpicker.preview.border.radius | --p-colorpicker-preview-border-radius | Border radius of preview | | colorpicker.preview.focus.ring.width | --p-colorpicker-preview-focus-ring-width | Focus ring width of preview | | colorpicker.preview.focus.ring.style | --p-colorpicker-preview-focus-ring-style | Focus ring style of preview | | colorpicker.preview.focus.ring.color | --p-colorpicker-preview-focus-ring-color | Focus ring color of preview | | colorpicker.preview.focus.ring.offset | --p-colorpicker-preview-focus-ring-offset | Focus ring offset of preview | | colorpicker.preview.focus.ring.shadow | --p-colorpicker-preview-focus-ring-shadow | Focus ring shadow of preview | | colorpicker.panel.shadow | --p-colorpicker-panel-shadow | Shadow of panel | | colorpicker.panel.border.radius | --p-colorpicker-panel-border-radius | Border radius of panel | | colorpicker.panel.background | --p-colorpicker-panel-background | Background of panel | | colorpicker.panel.border.color | --p-colorpicker-panel-border-color | Border color of panel | | colorpicker.handle.color | --p-colorpicker-handle-color | Color of handle | --- # Angular CommandMenu Component CommandMenu is a search-driven command palette component. ## Accessibility Screen Reader The search input has a combobox role with aria-expanded , aria-controls and aria-activedescendant attributes. The list element uses the listbox role and each item has an option role. Value to describe the component can be provided via ariaLabel prop. ## Basic CommandMenu requires a collection of options via the options property. Use group to display grouped commands with optionGroupLabel and optionGroupChildren . **Example:** ```typescript import { Component, OnInit } from '@angular/core'; import { ArrowUp } from '@primeicons/angular/arrow-up'; import { ArrowDown } from '@primeicons/angular/arrow-down'; @Component({ template: ` No results found
Navigate ↵ Select
`, standalone: true, imports: [ArrowUp, ArrowDown] }) export class CommandmenuBasicDemo implements OnInit { commands!: any[]; ngOnInit() { this.commands = [ { group: 'Recents', items: [ { label: 'Check For Updates', value: 'check for updates', keywords: ['check', 'updates'] }, { label: 'Open Settings', value: 'open settings' }, { label: 'Search Files', value: 'search files' }, { label: 'Open Terminal', value: 'open terminal' }, { label: 'View History', value: 'view history', keywords: ['history', 'recent'] }, { label: 'Open Chat', value: 'open chat' } ] }, { group: 'Files', items: [ { label: 'New File', value: 'new file' }, { label: 'New Folder', value: 'new folder' }, { label: 'Save All', value: 'save-all' }, { label: 'Change Theme', value: 'change theme' }, { label: 'Run Task', value: 'run-task' }, { label: 'Stop Task', value: 'stop task' }, { label: 'Export Project', value: 'export project' }, { label: 'Import Project', value: 'import project' }, { label: 'Delete File', value: 'delete file' }, { label: 'Duplicate File', value: 'duplicate file' } ] }, { group: 'Source', items: [ { label: 'Git: Commit', value: 'git commit' }, { label: 'Git: Push', value: 'git push' }, { label: 'Git: Pull', value: 'git pull' }, { label: 'Switch Account', value: 'switch account' }, { label: 'Open Documentation', value: 'open documentation' }, { label: 'Git: Sync', value: 'git sync' }, { label: 'Git: Create Branch', value: 'git create branch' }, { label: 'Git: Create Tag', value: 'git create tag' } ] }, { group: 'Editor', items: [ { label: 'Align Left', value: 'align left' }, { label: 'Align Center', value: 'align center' }, { label: 'Align Right', value: 'align right' }, { label: 'Toggle Bold', value: 'toggle bold' }, { label: 'Toggle Italic', value: 'toggle italic' }, { label: 'Insert Link', value: 'insert link' }, { label: 'Insert Image', value: 'insert image' }, { label: 'Insert List', value: 'insert list' } ] }, { group: 'Navigation', items: [ { label: 'Go to Home', value: 'go to home' }, { label: 'Go Back', value: 'go back' }, { label: 'Go Forward', value: 'go forward' }, { label: 'Open Explorer', value: 'open explorer' }, { label: 'View Bookmarks', value: 'view bookmarks' }, { label: 'Open Minimap', value: 'open minimap' } ] }, { group: 'View', items: [ { label: 'Toggle Preview', value: 'toggle preview' }, { label: 'Maximize Window', value: 'maximize window' }, { label: 'Minimize Window', value: 'minimize window' }, { label: 'Grid View', value: 'grid view' }, { label: 'List View', value: 'list view' }, { label: 'Light Mode', value: 'light mode' }, { label: 'Dark Mode', value: 'dark mode' } ] }, { group: 'Tools', items: [ { label: 'Open Calculator', value: 'open calculator' }, { label: 'Open Calendar', value: 'open calendar' }, { label: 'Open Timer', value: 'open timer' }, { label: 'View Analytics', value: 'view analytics' }, { label: 'View Trends', value: 'view trends' }, { label: 'Open Database', value: 'open database' } ] } ]; } } ``` ## Controlled The search value can be controlled with two-way binding using [(search)] . An empty template customizes the message when no results are found. **Example:** ```typescript import { Component, OnInit } from '@angular/core'; import { ArrowUp } from '@primeicons/angular/arrow-up'; import { ArrowDown } from '@primeicons/angular/arrow-down'; @Component({ template: ` No results found for "{{ search }}"
Navigate ↵ Select
`, standalone: true, imports: [ArrowUp, ArrowDown] }) export class CommandmenuControlledDemo implements OnInit { commands!: any[]; searchValue: string = ''; ngOnInit() { this.commands = [ { group: 'Recents', items: [ { label: 'Check For Updates', value: 'check for updates', keywords: ['check', 'updates'] }, { label: 'Open Settings', value: 'open settings' }, { label: 'Search Files', value: 'search files' }, { label: 'Open Terminal', value: 'open terminal' }, { label: 'View History', value: 'view history', keywords: ['history', 'recent'] }, { label: 'Open Chat', value: 'open chat' } ] }, { group: 'Files', items: [ { label: 'New File', value: 'new file' }, { label: 'New Folder', value: 'new folder' }, { label: 'Save All', value: 'save-all' }, { label: 'Change Theme', value: 'change theme' }, { label: 'Run Task', value: 'run-task' }, { label: 'Stop Task', value: 'stop task' }, { label: 'Export Project', value: 'export project' }, { label: 'Import Project', value: 'import project' }, { label: 'Delete File', value: 'delete file' }, { label: 'Duplicate File', value: 'duplicate file' } ] }, { group: 'Source', items: [ { label: 'Git: Commit', value: 'git commit' }, { label: 'Git: Push', value: 'git push' }, { label: 'Git: Pull', value: 'git pull' }, { label: 'Switch Account', value: 'switch account' }, { label: 'Open Documentation', value: 'open documentation' }, { label: 'Git: Sync', value: 'git sync' }, { label: 'Git: Create Branch', value: 'git create branch' }, { label: 'Git: Create Tag', value: 'git create tag' } ] }, { group: 'Editor', items: [ { label: 'Align Left', value: 'align left' }, { label: 'Align Center', value: 'align center' }, { label: 'Align Right', value: 'align right' }, { label: 'Toggle Bold', value: 'toggle bold' }, { label: 'Toggle Italic', value: 'toggle italic' }, { label: 'Insert Link', value: 'insert link' }, { label: 'Insert Image', value: 'insert image' }, { label: 'Insert List', value: 'insert list' } ] }, { group: 'Navigation', items: [ { label: 'Go to Home', value: 'go to home' }, { label: 'Go Back', value: 'go back' }, { label: 'Go Forward', value: 'go forward' }, { label: 'Open Explorer', value: 'open explorer' }, { label: 'View Bookmarks', value: 'view bookmarks' }, { label: 'Open Minimap', value: 'open minimap' } ] }, { group: 'View', items: [ { label: 'Toggle Preview', value: 'toggle preview' }, { label: 'Maximize Window', value: 'maximize window' }, { label: 'Minimize Window', value: 'minimize window' }, { label: 'Grid View', value: 'grid view' }, { label: 'List View', value: 'list view' }, { label: 'Light Mode', value: 'light mode' }, { label: 'Dark Mode', value: 'dark mode' } ] }, { group: 'Tools', items: [ { label: 'Open Calculator', value: 'open calculator' }, { label: 'Open Calendar', value: 'open calendar' }, { label: 'Open Timer', value: 'open timer' }, { label: 'View Analytics', value: 'view analytics' }, { label: 'View Trends', value: 'view trends' }, { label: 'Open Database', value: 'open database' } ] } ]; } } ``` ## Custom Custom content can be displayed for each item using the item template. **Example:** ```typescript import { Component, OnInit } from '@angular/core'; import { ArrowUp } from '@primeicons/angular/arrow-up'; import { ArrowDown } from '@primeicons/angular/arrow-down'; @Component({ template: `
{{ item.label }} {{ item.category }}
No results found
Navigate ↵ Select
`, standalone: true, imports: [ArrowUp, ArrowDown] }) export class CommandmenuCustomDemo implements OnInit { commands!: any[]; ngOnInit() { this.commands = [ { group: 'Recents', items: [ { icon: 'pi-refresh', label: 'Check For Updates', category: 'Command', color: 'bg-[linear-gradient(rgb(245,83,84),rgb(235,70,70))]', value: 'check for updates', keywords: ['check', 'updates'] }, { icon: 'pi-cog', label: 'Open Settings', category: 'Command', color: 'bg-[linear-gradient(rgb(96,165,250),rgb(59,130,246))]', value: 'open settings' }, { icon: 'pi-search', label: 'Search Files', category: 'Command', color: 'bg-[linear-gradient(rgb(167,139,250),rgb(139,92,246))]', value: 'search files' }, { icon: 'pi-terminal', label: 'Open Terminal', category: 'View', color: 'bg-[linear-gradient(rgb(148,163,184),rgb(100,116,139))]', value: 'open terminal' }, { icon: 'pi-history', label: 'View History', category: 'View', color: 'bg-[linear-gradient(rgb(192,132,252),rgb(168,85,247))]', value: 'view history', keywords: ['history', 'recent'] }, { icon: 'pi-comments', label: 'Open Chat', category: 'Communication', color: 'bg-[linear-gradient(rgb(34,211,238),rgb(6,182,212))]', value: 'open chat' } ] }, { group: 'Files', items: [ { icon: 'pi-file', label: 'New File', category: 'File', color: 'bg-[linear-gradient(rgb(52,211,153),rgb(16,185,129))]', value: 'new file' }, { icon: 'pi-folder', label: 'New Folder', category: 'File', color: 'bg-[linear-gradient(rgb(251,191,36),rgb(245,158,11))]', value: 'new folder' }, { icon: 'pi-save', label: 'Save All', category: 'File', color: 'bg-[linear-gradient(rgb(34,197,94),rgb(22,163,74))]', value: 'save-all' }, { icon: 'pi-palette', label: 'Change Theme', category: 'Appearance', color: 'bg-[linear-gradient(rgb(251,146,60),rgb(249,115,22))]', value: 'change theme' }, { icon: 'pi-play', label: 'Run Task', category: 'Command', color: 'bg-[linear-gradient(rgb(34,197,94),rgb(21,128,61))]', value: 'run-task' }, { icon: 'pi-stop', label: 'Stop Task', category: 'Command', color: 'bg-[linear-gradient(rgb(239,68,68),rgb(220,38,38))]', value: 'stop task' }, { icon: 'pi-file-export', label: 'Export Project', category: 'File', color: 'bg-[linear-gradient(rgb(147,51,234),rgb(126,34,206))]', value: 'export project' }, { icon: 'pi-file-import', label: 'Import Project', category: 'File', color: 'bg-[linear-gradient(rgb(99,102,241),rgb(79,70,229))]', value: 'import project' }, { icon: 'pi-trash', label: 'Delete File', category: 'File', color: 'bg-[linear-gradient(rgb(239,68,68),rgb(185,28,28))]', value: 'delete file' }, { icon: 'pi-copy', label: 'Duplicate File', category: 'File', color: 'bg-[linear-gradient(rgb(156,163,175),rgb(107,114,128))]', value: 'duplicate file' } ] }, { group: 'Source', items: [ { icon: 'pi-git', label: 'Git: Commit', category: 'Source Control', color: 'bg-[linear-gradient(rgb(249,115,22),rgb(234,88,12))]', value: 'git commit' }, { icon: 'pi-upload', label: 'Git: Push', category: 'Source Control', color: 'bg-[linear-gradient(rgb(14,165,233),rgb(2,132,199))]', value: 'git push' }, { icon: 'pi-download', label: 'Git: Pull', category: 'Source Control', color: 'bg-[linear-gradient(rgb(59,130,246),rgb(37,99,235))]', value: 'git pull' }, { icon: 'pi-users', label: 'Switch Account', category: 'Account', color: 'bg-[linear-gradient(rgb(236,72,153),rgb(219,39,119))]', value: 'switch account' }, { icon: 'pi-book', label: 'Open Documentation', category: 'Help', color: 'bg-[linear-gradient(rgb(147,197,253),rgb(96,165,250))]', value: 'open documentation' }, { icon: 'pi-sync', label: 'Git: Sync', category: 'Source Control', color: 'bg-[linear-gradient(rgb(74,222,128),rgb(34,197,94))]', value: 'git sync' }, { icon: 'pi-code-branch', label: 'Git: Create Branch', category: 'Source Control', color: 'bg-[linear-gradient(rgb(251,146,60),rgb(249,115,22))]', value: 'git create branch' }, { icon: 'pi-tag', label: 'Git: Create Tag', category: 'Source Control', color: 'bg-[linear-gradient(rgb(196,181,253),rgb(167,139,250))]', value: 'git create tag' } ] }, { group: 'Editor', items: [ { icon: 'pi-align-left', label: 'Align Left', category: 'Editor', color: 'bg-[linear-gradient(rgb(147,197,253),rgb(59,130,246))]', value: 'align left' }, { icon: 'pi-align-center', label: 'Align Center', category: 'Editor', color: 'bg-[linear-gradient(rgb(147,197,253),rgb(59,130,246))]', value: 'align center' }, { icon: 'pi-align-right', label: 'Align Right', category: 'Editor', color: 'bg-[linear-gradient(rgb(147,197,253),rgb(59,130,246))]', value: 'align right' }, { icon: 'pi-bold', label: 'Toggle Bold', category: 'Editor', color: 'bg-[linear-gradient(rgb(30,41,59),rgb(15,23,42))]', value: 'toggle bold' }, { icon: 'pi-italic', label: 'Toggle Italic', category: 'Editor', color: 'bg-[linear-gradient(rgb(71,85,105),rgb(51,65,85))]', value: 'toggle italic' }, { icon: 'pi-link', label: 'Insert Link', category: 'Editor', color: 'bg-[linear-gradient(rgb(59,130,246),rgb(37,99,235))]', value: 'insert link' }, { icon: 'pi-image', label: 'Insert Image', category: 'Editor', color: 'bg-[linear-gradient(rgb(168,85,247),rgb(147,51,234))]', value: 'insert image' }, { icon: 'pi-list', label: 'Insert List', category: 'Editor', color: 'bg-[linear-gradient(rgb(34,197,94),rgb(22,163,74))]', value: 'insert list' } ] }, { group: 'Navigation', items: [ { icon: 'pi-home', label: 'Go to Home', category: 'Navigation', color: 'bg-[linear-gradient(rgb(96,165,250),rgb(59,130,246))]', value: 'go to home' }, { icon: 'pi-arrow-left', label: 'Go Back', category: 'Navigation', color: 'bg-[linear-gradient(rgb(148,163,184),rgb(100,116,139))]', value: 'go back' }, { icon: 'pi-arrow-right', label: 'Go Forward', category: 'Navigation', color: 'bg-[linear-gradient(rgb(148,163,184),rgb(100,116,139))]', value: 'go forward' }, { icon: 'pi-compass', label: 'Open Explorer', category: 'Navigation', color: 'bg-[linear-gradient(rgb(251,191,36),rgb(245,158,11))]', value: 'open explorer' }, { icon: 'pi-bookmark', label: 'View Bookmarks', category: 'Navigation', color: 'bg-[linear-gradient(rgb(249,115,22),rgb(234,88,12))]', value: 'view bookmarks' }, { icon: 'pi-map', label: 'Open Minimap', category: 'Navigation', color: 'bg-[linear-gradient(rgb(52,211,153),rgb(16,185,129))]', value: 'open minimap' } ] }, { group: 'View', items: [ { icon: 'pi-eye', label: 'Toggle Preview', category: 'View', color: 'bg-[linear-gradient(rgb(147,51,234),rgb(126,34,206))]', value: 'toggle preview' }, { icon: 'pi-window-maximize', label: 'Maximize Window', category: 'View', color: 'bg-[linear-gradient(rgb(100,116,139),rgb(71,85,105))]', value: 'maximize window' }, { icon: 'pi-window-minimize', label: 'Minimize Window', category: 'View', color: 'bg-[linear-gradient(rgb(148,163,184),rgb(100,116,139))]', value: 'minimize window' }, { icon: 'pi-th-large', label: 'Grid View', category: 'View', color: 'bg-[linear-gradient(rgb(34,197,94),rgb(22,163,74))]', value: 'grid view' }, { icon: 'pi-bars', label: 'List View', category: 'View', color: 'bg-[linear-gradient(rgb(59,130,246),rgb(37,99,235))]', value: 'list view' }, { icon: 'pi-sun', label: 'Light Mode', category: 'View', color: 'bg-[linear-gradient(rgb(253,224,71),rgb(250,204,21))]', value: 'light mode' }, { icon: 'pi-moon', label: 'Dark Mode', category: 'View', color: 'bg-[linear-gradient(rgb(30,41,59),rgb(15,23,42))]', value: 'dark mode' } ] }, { group: 'Tools', items: [ { icon: 'pi-calculator', label: 'Open Calculator', category: 'Tools', color: 'bg-[linear-gradient(rgb(148,163,184),rgb(100,116,139))]', value: 'open calculator' }, { icon: 'pi-calendar', label: 'Open Calendar', category: 'Tools', color: 'bg-[linear-gradient(rgb(96,165,250),rgb(59,130,246))]', value: 'open calendar' }, { icon: 'pi-clock', label: 'Open Timer', category: 'Tools', color: 'bg-[linear-gradient(rgb(251,146,60),rgb(249,115,22))]', value: 'open timer' }, { icon: 'pi-chart-bar', label: 'View Analytics', category: 'Tools', color: 'bg-[linear-gradient(rgb(34,197,94),rgb(22,163,74))]', value: 'view analytics' }, { icon: 'pi-chart-line', label: 'View Trends', category: 'Tools', color: 'bg-[linear-gradient(rgb(59,130,246),rgb(37,99,235))]', value: 'view trends' }, { icon: 'pi-database', label: 'Open Database', category: 'Tools', color: 'bg-[linear-gradient(rgb(168,85,247),rgb(147,51,234))]', value: 'open database' } ] } ]; } } ``` ## Filter A custom filter function can be provided with the filter property. The function receives the label, search term, and optional keywords, and should return a score (0 means no match). **Example:** ```typescript import { Component, OnInit } from '@angular/core'; import { ArrowUp } from '@primeicons/angular/arrow-up'; import { ArrowDown } from '@primeicons/angular/arrow-down'; @Component({ template: ` No results found.
Navigate ↵ Select
`, standalone: true, imports: [ArrowUp, ArrowDown] }) export class CommandmenuFilterDemo implements OnInit { commands!: any[]; ngOnInit() { this.commands = [ { group: 'Recents', items: [ { label: 'Check For Updates', value: 'check for updates', keywords: ['check', 'updates'] }, { label: 'Open Settings', value: 'open settings' }, { label: 'Search Files', value: 'search files' }, { label: 'Open Terminal', value: 'open terminal' }, { label: 'View History', value: 'view history', keywords: ['history', 'recent'] }, { label: 'Open Chat', value: 'open chat' } ] }, { group: 'Files', items: [ { label: 'New File', value: 'new file' }, { label: 'New Folder', value: 'new folder' }, { label: 'Save All', value: 'save-all' }, { label: 'Change Theme', value: 'change theme' }, { label: 'Run Task', value: 'run-task' }, { label: 'Stop Task', value: 'stop task' }, { label: 'Export Project', value: 'export project' }, { label: 'Import Project', value: 'import project' }, { label: 'Delete File', value: 'delete file' }, { label: 'Duplicate File', value: 'duplicate file' } ] }, { group: 'Source', items: [ { label: 'Git: Commit', value: 'git commit' }, { label: 'Git: Push', value: 'git push' }, { label: 'Git: Pull', value: 'git pull' }, { label: 'Switch Account', value: 'switch account' }, { label: 'Open Documentation', value: 'open documentation' }, { label: 'Git: Sync', value: 'git sync' }, { label: 'Git: Create Branch', value: 'git create branch' }, { label: 'Git: Create Tag', value: 'git create tag' } ] }, { group: 'Editor', items: [ { label: 'Align Left', value: 'align left' }, { label: 'Align Center', value: 'align center' }, { label: 'Align Right', value: 'align right' }, { label: 'Toggle Bold', value: 'toggle bold' }, { label: 'Toggle Italic', value: 'toggle italic' }, { label: 'Insert Link', value: 'insert link' }, { label: 'Insert Image', value: 'insert image' }, { label: 'Insert List', value: 'insert list' } ] }, { group: 'Navigation', items: [ { label: 'Go to Home', value: 'go to home' }, { label: 'Go Back', value: 'go back' }, { label: 'Go Forward', value: 'go forward' }, { label: 'Open Explorer', value: 'open explorer' }, { label: 'View Bookmarks', value: 'view bookmarks' }, { label: 'Open Minimap', value: 'open minimap' } ] }, { group: 'View', items: [ { label: 'Toggle Preview', value: 'toggle preview' }, { label: 'Maximize Window', value: 'maximize window' }, { label: 'Minimize Window', value: 'minimize window' }, { label: 'Grid View', value: 'grid view' }, { label: 'List View', value: 'list view' }, { label: 'Light Mode', value: 'light mode' }, { label: 'Dark Mode', value: 'dark mode' } ] }, { group: 'Tools', items: [ { label: 'Open Calculator', value: 'open calculator' }, { label: 'Open Calendar', value: 'open calendar' }, { label: 'Open Timer', value: 'open timer' }, { label: 'View Analytics', value: 'view analytics' }, { label: 'View Trends', value: 'view trends' }, { label: 'Open Database', value: 'open database' } ] } ]; } fuzzyFilter(value: string, search: string): number { if (!search) return 1; value = value.toLowerCase(); search = search.toLowerCase(); let tIndex = 0; let sIndex = 0; let score = 0; while (tIndex < value.length && sIndex < search.length) { if (value[tIndex] === search[sIndex]) { score += 1; sIndex++; } tIndex++; } return sIndex === search.length ? score / value.length : 0; } } ``` ## With Dialog CommandMenu can be used inside a Dialog to create a command palette experience. Press Ctrl+K (or Cmd+K on Mac) to open. **Example:** ```typescript import { Component, OnInit } from '@angular/core'; import { Dialog, DialogModule } from 'primeng/dialog'; import { ArrowUp } from '@primeicons/angular/arrow-up'; import { ArrowDown } from '@primeicons/angular/arrow-down'; @Component({ template: `
Press CTRL/⌘ + K
No results found for "{{ search }}"
Navigate ↵ Select
`, standalone: true, imports: [DialogModule, ArrowUp, ArrowDown] }) export class CommandmenuWithDialogDemo implements OnInit { visible: boolean = false; searchValue: string = ''; commands!: any[]; ngOnInit() { this.commands = [ { group: 'Recents', items: [ { label: 'Check For Updates', value: 'check for updates', keywords: ['check', 'updates'] }, { label: 'Open Settings', value: 'open settings' }, { label: 'Search Files', value: 'search files' }, { label: 'Open Terminal', value: 'open terminal' }, { label: 'View History', value: 'view history', keywords: ['history', 'recent'] }, { label: 'Open Chat', value: 'open chat' } ] }, { group: 'Files', items: [ { label: 'New File', value: 'new file' }, { label: 'New Folder', value: 'new folder' }, { label: 'Save All', value: 'save-all' }, { label: 'Change Theme', value: 'change theme' }, { label: 'Run Task', value: 'run-task' }, { label: 'Stop Task', value: 'stop task' }, { label: 'Export Project', value: 'export project' }, { label: 'Import Project', value: 'import project' }, { label: 'Delete File', value: 'delete file' }, { label: 'Duplicate File', value: 'duplicate file' } ] }, { group: 'Source', items: [ { label: 'Git: Commit', value: 'git commit' }, { label: 'Git: Push', value: 'git push' }, { label: 'Git: Pull', value: 'git pull' }, { label: 'Switch Account', value: 'switch account' }, { label: 'Open Documentation', value: 'open documentation' }, { label: 'Git: Sync', value: 'git sync' }, { label: 'Git: Create Branch', value: 'git create branch' }, { label: 'Git: Create Tag', value: 'git create tag' } ] }, { group: 'Editor', items: [ { label: 'Align Left', value: 'align left' }, { label: 'Align Center', value: 'align center' }, { label: 'Align Right', value: 'align right' }, { label: 'Toggle Bold', value: 'toggle bold' }, { label: 'Toggle Italic', value: 'toggle italic' }, { label: 'Insert Link', value: 'insert link' }, { label: 'Insert Image', value: 'insert image' }, { label: 'Insert List', value: 'insert list' } ] }, { group: 'Navigation', items: [ { label: 'Go to Home', value: 'go to home' }, { label: 'Go Back', value: 'go back' }, { label: 'Go Forward', value: 'go forward' }, { label: 'Open Explorer', value: 'open explorer' }, { label: 'View Bookmarks', value: 'view bookmarks' }, { label: 'Open Minimap', value: 'open minimap' } ] }, { group: 'View', items: [ { label: 'Toggle Preview', value: 'toggle preview' }, { label: 'Maximize Window', value: 'maximize window' }, { label: 'Minimize Window', value: 'minimize window' }, { label: 'Grid View', value: 'grid view' }, { label: 'List View', value: 'list view' }, { label: 'Light Mode', value: 'light mode' }, { label: 'Dark Mode', value: 'dark mode' } ] }, { group: 'Tools', items: [ { label: 'Open Calculator', value: 'open calculator' }, { label: 'Open Calendar', value: 'open calendar' }, { label: 'Open Timer', value: 'open timer' }, { label: 'View Analytics', value: 'view analytics' }, { label: 'View Trends', value: 'view trends' }, { label: 'Open Database', value: 'open database' } ] } ]; } handleKeyboardEvent(event: KeyboardEvent) { if ((event.metaKey || event.ctrlKey) && event.key === 'k') { event.preventDefault(); event.stopPropagation(); this.visible = !this.visible; } } onDialogShow() { this.commandmenu.focusInput(); } } ``` ## Command Menu CommandMenu is a search-driven command palette component. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | | options | any[] | - | An array of objects to display. | | optionLabel | string | - | Name of the label field of an option. | | optionValue | string | - | Name of the value field of an option. | | optionDisabled | string \| ((item: any) => boolean) | - | Name of the disabled field of an option or function to determine disabled state. | | optionGroupLabel | string | 'label' | Name of the label field of an option group. | | optionGroupChildren | string | 'items' | Name of the options field of an option group. | | optionKeywords | string | - | Name of the keywords field of an option used for searching. | | search | string | - | Two-way bound search value. | | focusOnHover | boolean | true | When enabled, the hovered option will be focused. | | highlightOnSelect | boolean | false | Whether to highlight the selected option. | | group | boolean | - | Whether to display options as grouped. | | striped | boolean | false | Whether to displays rows with alternating colors. | | checkmark | boolean | false | Whether the selected option will be shown with a check mark. | | readonly | boolean | - | When present, it specifies that the element value cannot be changed. | | virtualScroll | boolean | - | Whether the data should be loaded on demand during scroll. | | virtualScrollItemSize | number | - | Height of an item in the list for VirtualScrolling. | | virtualScrollOptions | any | - | Whether to use the scroller feature. The properties of scroller component can be used like an object in it. | | multiple | boolean | - | When specified, allows selecting multiple values. | | dataKey | string | - | A property to uniquely identify a value in options. | | autoOptionFocus | boolean | true | Whether to focus on the first visible or selected element. | | scrollHeight | string | '25rem' | Height of the viewport, a scrollbar is defined if height of list exceeds this value. | | emptyMessage | string | - | Text to display when there are no results. Defaults to global value in i18n translation configuration. | | filter | (label: string, search: string, keywords?: string[]) => number | - | Custom filter function. Receives (label, search, keywords?) and returns a number (0 = no match). | | placeholder | string | - | Placeholder text for the search input. | | ariaLabel | string | - | Defines a string that labels the input for accessibility. | ### Emits | Name | Parameters | Description | |------|------------|-------------| | onItemSelect | event: CommandMenuItemSelectEvent | Callback to invoke when an item is selected. | | onSearchChange | event: CommandMenuSearchChangeEvent | Callback to invoke when the search value changes. | ### Templates | Name | Type | Description | |------|------|-------------| | item | TemplateRef> | Custom item template. | | group | TemplateRef> | Custom group template. | | header | TemplateRef | Custom header template. | | footer | TemplateRef | Custom footer template. | | empty | TemplateRef | Custom empty template. | ### Methods | Name | Parameters | Return Type | Description | |------|------------|-------------|-------------| | focusInput | | void | Focuses the search input. | ## Pass Through Options | Name | Type | Description | |------|------|-------------| | root | PassThroughOption | Used to pass attributes to the root's DOM element. | | header | PassThroughOption | Used to pass attributes to the header's DOM element. | | input | PassThroughOption | Used to pass attributes to the input's DOM element. | | pcListbox | any | Used to pass attributes to the Listbox component. | | empty | PassThroughOption | Used to pass attributes to the empty message's DOM element. | | footer | PassThroughOption | Used to pass attributes to the footer's DOM element. | ## Theming ### CSS Classes | Class | Description | |-------|-------------| | p-commandmenu | Class name of the root element | | p-commandmenu-header | Class name of the header element | | p-commandmenu-input | Class name of the input element | | p-commandmenu-empty | Class name of the empty message element | | p-commandmenu-footer | Class name of the footer element | ### Design Tokens | Token | CSS Variable | Description | |-------|--------------|-------------| | commandmenu.background | --p-commandmenu-background | Background of root | | commandmenu.border.color | --p-commandmenu-border-color | Border color of root | | commandmenu.border.radius | --p-commandmenu-border-radius | Border radius of root | | commandmenu.height | --p-commandmenu-height | Height of root | | commandmenu.header.padding | --p-commandmenu-header-padding | Padding of header | | commandmenu.header.background | --p-commandmenu-header-background | Background of header | | commandmenu.header.border.color | --p-commandmenu-header-border-color | Border color of header | | commandmenu.input.padding | --p-commandmenu-input-padding | Padding of input | | commandmenu.input.font.size | --p-commandmenu-input-font-size | Font size of input | | commandmenu.input.font.weight | --p-commandmenu-input-font-weight | Font weight of input | | commandmenu.input.color | --p-commandmenu-input-color | Color of input | | commandmenu.input.placeholder.color | --p-commandmenu-input-placeholder-color | Placeholder color of input | | commandmenu.list.padding | --p-commandmenu-list-padding | Padding of list | | commandmenu.empty.padding | --p-commandmenu-empty-padding | Padding of empty | | commandmenu.empty.color | --p-commandmenu-empty-color | Color of empty | | commandmenu.footer.padding | --p-commandmenu-footer-padding | Padding of footer | | commandmenu.footer.background | --p-commandmenu-footer-background | Background of footer | | commandmenu.footer.border.color | --p-commandmenu-footer-border-color | Border color of footer | --- # Angular ConfirmDialog Component ConfirmDialog is backed by a service utilizing Observables to display confirmation windows easily that can be shared by multiple actions on the same component. ## Accessibility Screen Reader ConfirmDialog component uses alertdialog role along with aria-labelledby referring to the header element however any attribute is passed to the root element so you may use aria-labelledby to override this default behavior. In addition aria-modal is added since focus is kept within the popup. It is recommended to use a trigger component that can be accessed with keyboard such as a button, if not adding tabIndex would be necessary. When confirm function is used and a trigger is passed as a parameter, ConfirmDialog adds aria-expanded state attribute and aria-controls to the trigger so that the relation between the trigger and the popup is defined. If the dialog is controlled with the visible property aria-expanded and aria-controls need to be handled explicitly. Overlay Keyboard Support Key Function tab Moves focus to the next the focusable element within the popup. shift + tab Moves focus to the previous the focusable element within the popup. escape Closes the popup and moves focus to the trigger. Buttons Keyboard Support Key Function enter Triggers the action, closes the popup and moves focus to the trigger. space Triggers the action, closes the popup and moves focus to the trigger. ## Basic ConfirmDialog is defined using p-confirmdialog tag and an instance of ConfirmationService is required to display it bycalling confirm method. **Example:** ```typescript import { Component, inject } from '@angular/core'; import { ButtonModule } from 'primeng/button'; import { MessageService, ConfirmationService } from 'primeng/api'; @Component({ template: `
`, standalone: true, imports: [ButtonModule], providers: [ConfirmationService, MessageService] }) export class ConfirmDialogBasicDemo { private confirmationService = inject(ConfirmationService); private messageService = inject(MessageService); confirm2(event: Event) { this.confirmationService.confirm({ target: event.target as EventTarget, message: 'Do you want to delete this record?', header: 'Danger Zone', icon: 'pi pi-info-circle', rejectLabel: 'Cancel', rejectButtonProps: { label: 'Cancel', severity: 'secondary', outlined: true }, acceptButtonProps: { label: 'Delete', severity: 'danger' }, accept: () => { this.messageService.add({ severity: 'info', summary: 'Confirmed', detail: 'Record deleted' }); }, reject: () => { this.messageService.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected' }); } }); } } ``` ## Headless Headless mode allows you to customize the entire user interface instead of the default elements. **Example:** ```typescript import { Component, inject } from '@angular/core'; import { ButtonModule } from 'primeng/button'; import { MessageService, ConfirmationService } from 'primeng/api'; @Component({ template: `
`, standalone: true, imports: [ButtonModule], providers: [ConfirmationService, MessageService] }) export class ConfirmDialogHeadlessDemo { private confirmationService = inject(ConfirmationService); private messageService = inject(MessageService); } ``` ## Position The position property of the confirm options is used to display a Dialog at all edges and corners of the screen. **Example:** ```typescript import { Component, inject } from '@angular/core'; import { ButtonModule } from 'primeng/button'; import { MessageService, ConfirmationService } from 'primeng/api'; import { Dialog } from 'primeng/dialog'; @Component({ template: `
`, standalone: true, imports: [ButtonModule], providers: [ConfirmationService, MessageService] }) export class ConfirmDialogPositionDemo { private confirmationService = inject(ConfirmationService); private messageService = inject(MessageService); } ``` ## Template Properties of the dialog are defined in two ways, message , icon , header properties can either be defined using confirm method or declaratively on p-confirmDialog ng-template by header , message , icon and footer templates. If these values are unlikely to change then declarative approach would be useful, still properties defined in a ng-template can be overridden with confirm method call. In addition, buttons at footer section can be customized by passing your own UI, important note to make confirmation work with a custom UI is defining a local ng-template variable for the dialog and assign accept()-reject() methods to your own buttons. **Example:** ```typescript import { Component, inject } from '@angular/core'; import { ButtonModule } from 'primeng/button'; import { MessageService, ConfirmationService } from 'primeng/api'; @Component({ template: `
`, standalone: true, imports: [ButtonModule], providers: [ConfirmationService, MessageService] }) export class ConfirmDialogTemplateDemo { private confirmationService = inject(ConfirmationService); private messageService = inject(MessageService); } ``` ## Confirm Dialog ConfirmDialog uses a Dialog UI that is integrated with the Confirmation API. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | | header | string | - | Title text of the dialog. | | icon | string | - | Icon to display next to message. | | message | string | - | Message of the confirmation. | | style | Partial | - | Inline style of the element. | | styleClass | string | - | Class of the element. | | maskStyleClass | string | - | Specify the CSS class(es) for styling the mask element | | acceptIcon | string | - | Icon of the accept button. | | acceptLabel | string | - | Label of the accept button. | | closeAriaLabel | string | - | Defines a string that labels the close button for accessibility. | | acceptAriaLabel | string | - | Defines a string that labels the accept button for accessibility. | | acceptVisible | boolean | - | Visibility of the accept button. | | rejectIcon | string | - | Icon of the reject button. | | rejectLabel | string | - | Label of the reject button. | | rejectAriaLabel | string | - | Defines a string that labels the reject button for accessibility. | | rejectVisible | boolean | - | Visibility of the reject button. | | acceptButtonStyleClass | string | - | Style class of the accept button. | | rejectButtonStyleClass | string | - | Style class of the reject button. | | closeOnEscape | boolean | - | Specifies if pressing escape key should hide the dialog. | | dismissableMask | boolean | - | Specifies if clicking the modal background should hide the dialog. | | blockScroll | boolean | - | Determines whether scrolling behavior should be blocked within the component. | | rtl | boolean | - | When enabled dialog is displayed in RTL direction. | | closable | boolean | - | Adds a close icon to the header to hide the dialog. | | appendTo | HTMLElement \| ElementRef \| TemplateRef \| "self" \| "body" \| null \| undefined | 'body' | Target element to attach the overlay, valid values are "body" or a local ng-template variable of another element (note: use binding with brackets for template variables, e.g. [appendTo]="mydiv" for a div element having #mydiv as variable name). | | key | string | - | Optional key to match the key of confirm object, necessary to use when component tree has multiple confirm dialogs. | | autoZIndex | boolean | - | Whether to automatically manage layering. | | baseZIndex | number | - | Base zIndex value to use in layering. | | motionOptions | MotionOptions | - | The motion options. | | maskMotionOptions | MotionOptions | - | The motion options for the mask. | | focusTrap | boolean | - | When enabled, can only focus on elements inside the confirm dialog. | | defaultFocus | "accept" \| "reject" \| "close" \| "none" | - | Element to receive the focus when the dialog gets visible. | | breakpoints | Record | - | Object literal to define widths per screen size. | | modal | boolean | - | Defines if background should be blocked when dialog is displayed. | | visible | boolean | - | Current visible state as a boolean. | | position | "center" \| "top" \| "bottom" \| "left" \| "right" \| "topleft" \| "topright" \| "bottomleft" \| "bottomright" | - | Allows getting the position of the component. | | draggable | boolean | - | Enables dragging to change the position using header. | ### Emits | Name | Parameters | Description | |------|------------|-------------| | onHide | event: ConfirmEventType | Callback to invoke when dialog is hidden. | ### Templates | Name | Type | Description | |------|------|-------------| | header | TemplateRef | Custom header template. | | footer | TemplateRef | Custom footer template. | | rejecticon | TemplateRef | Custom reject icon template. | | accepticon | TemplateRef | Custom accept icon template. | | message | TemplateRef | Custom message template. | | icon | TemplateRef | Custom icon template. | | headless | TemplateRef | Custom headless template. | ## Pass Through Options | Name | Type | Description | |------|------|-------------| | host | PassThroughOption | Used to pass attributes to the host's DOM element. | | root | DialogPassThrough | Used to pass attributes to the root's DOM element. | | mask | PassThroughOption | Used to pass attributes to the mask's DOM element. | | icon | PassThroughOption | Used to pass attributes to the icon's DOM element. | | message | PassThroughOption | Used to pass attributes to the message's DOM element. | | resizeHandle | PassThroughOption | Used to pass attributes to the resize handle's DOM element. | | header | PassThroughOption | Used to pass attributes to the header's DOM element. | | title | PassThroughOption | Used to pass attributes to the title's DOM element. | | headerActions | PassThroughOption | Used to pass attributes to the header actions' DOM element. | | pcCloseButton | ButtonPassThrough | Used to pass attributes to the close Button component. | | content | PassThroughOption | Used to pass attributes to the content's DOM element. | | footer | PassThroughOption | Used to pass attributes to the footer's DOM element. | | pcAcceptButton | ButtonPassThrough | Used to pass attributes to the accept Button component. | | pcRejectButton | ButtonPassThrough | Used to pass attributes to the reject Button component. | | motion | MotionOptions | Used to pass options to the motion component/directive. | | maskMotion | MotionOptions | Used to pass motion options for the mask animation. | ## Theming ### CSS Classes | Class | Description | |-------|-------------| | p-confirmdialog | Class name of the root element | | p-confirmdialog-icon | Class name of the icon element | | p-confirmdialog-message | Class name of the message element | | p-confirmdialog-reject-button | Class name of the reject button element | | p-confirmdialog-accept-button | Class name of the accept button element | ### Design Tokens | Token | CSS Variable | Description | |-------|--------------|-------------| | confirmdialog.icon.size | --p-confirmdialog-icon-size | Size of icon | | confirmdialog.icon.color | --p-confirmdialog-icon-color | Color of icon | | confirmdialog.content.gap | --p-confirmdialog-content-gap | Gap of content | | confirmdialog.message.color | --p-confirmdialog-message-color | Color of message | | confirmdialog.message.font.weight | --p-confirmdialog-message-font-weight | Font weight of message | | confirmdialog.message.font.size | --p-confirmdialog-message-font-size | Font size of message | --- # Angular ConfirmPopup Component ConfirmPopup displays a confirmation overlay displayed relatively to its target. ## Accessibility Screen Reader ConfirmPopup component uses alertdialog role and since any attribute is passed to the root element you may define attributes like aria-label or aria-labelledby to describe the popup contents. In addition aria-modal is added since focus is kept within the popup. It is recommended to use a trigger component that can be accessed with keyboard such as a button, if not adding tabIndex would be necessary. ConfirmPopup adds aria-expanded state attribute and aria-controls to the trigger so that the relation between the trigger and the popup is defined. Overlay Keyboard Support When the popup gets opened, the first focusable element receives the focus and this can be customized by adding autofocus to an element within the popup. Key Function tab Moves focus to the next the focusable element within the popup. shift + tab Moves focus to the previous the focusable element within the popup. escape Closes the popup and moves focus to the trigger. Buttons Keyboard Support Key Function enter Triggers the action, closes the popup and moves focus to the trigger. space Triggers the action, closes the popup and moves focus to the trigger. ## Basic ConfirmPopup is defined using p-confirmpopup tag and an instance of ConfirmationService is required to display it bycalling confirm method. **Example:** ```typescript import { Component, inject } from '@angular/core'; import { ButtonModule } from 'primeng/button'; import { MessageService, ConfirmationService } from 'primeng/api'; @Component({ template: `
`, standalone: true, imports: [ButtonModule], providers: [ConfirmationService, MessageService] }) export class ConfirmPopupBasicDemo { private confirmationService = inject(ConfirmationService); private messageService = inject(MessageService); confirm2(event: Event) { this.confirmationService.confirm({ target: event.currentTarget as EventTarget, message: 'Do you want to delete this record?', icon: 'pi pi-info-circle', rejectButtonProps: { label: 'Cancel', severity: 'secondary', outlined: true }, acceptButtonProps: { label: 'Delete', severity: 'danger' }, accept: () => { this.messageService.add({ severity: 'info', summary: 'Confirmed', detail: 'Record deleted', life: 3000 }); }, reject: () => { this.messageService.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 }); } }); } } ``` ## confirmationapi-doc **Example:** ```typescript import { Component } from '@angular/core'; @Component({ template: `
Name Type Default Description
message string null Message of the confirmation.
key string null Optional key to match the key of the confirm popup, necessary to use when component tree has multiple confirm popups.
icon string null Icon to display next to the message.
accept Function null Callback to execute when action is confirmed.
reject Function null Callback to execute when action is rejected.
acceptLabel string null Label of the accept button.
rejectLabel string null Label of the reject button.
acceptIcon string null Icon of the accept button.
rejectIcon string null Icon of the reject button.
acceptVisible boolean true Visibility of the accept button.
rejectVisible boolean true Visibility of the reject button.
acceptButtonStyleClass string null Style class of the accept button.
rejectButtonStyleClass string null Style class of the reject button.
defaultFocus string accept Element to receive the focus when the popup gets visible, valid values are "accept", "reject", and "none".
`, standalone: true, imports: [] }) export class ConfirmPopupConfirmationApiDemo {} ``` ## Headless Headless mode allows you to customize the entire user interface instead of the default elements. **Example:** ```typescript import { Component, inject } from '@angular/core'; import { ButtonModule } from 'primeng/button'; import { MessageService, ConfirmationService } from 'primeng/api'; @Component({ template: `
`, standalone: true, imports: [ButtonModule], providers: [ConfirmationService, MessageService] }) export class ConfirmPopupHeadlessDemo { private confirmationService = inject(ConfirmationService); private messageService = inject(MessageService); } ``` ## props-doc **Example:** ```typescript import { Component } from '@angular/core'; @Component({ template: `
Name Type Default Description
key string null Optional key to match the key of confirm object, necessary to use when component tree has multiple confirm dialogs.
autoZIndex boolean true Whether to automatically manage layering.
baseZIndex number 0 Base zIndex value to use in layering.
style string null Inline style of the component.
styleClass string null Style class of the component.
`, standalone: true, imports: [] }) export class ConfirmPopupPropsDemo {} ``` ## Template Content section can be customized using content template. **Example:** ```typescript import { Component, inject } from '@angular/core'; import { ButtonModule } from 'primeng/button'; import { MessageService, ConfirmationService } from 'primeng/api'; @Component({ template: `
`, standalone: true, imports: [ButtonModule], providers: [ConfirmationService, MessageService] }) export class ConfirmPopupTemplateDemo { private confirmationService = inject(ConfirmationService); private messageService = inject(MessageService); } ``` ## templates-doc **Example:** ```typescript import { Component } from '@angular/core'; @Component({ template: `
Name Parameters
accepticon -
rejecticon -
`, standalone: true, imports: [] }) export class ConfirmPopupTemplatesDemo {} ``` ## Confirm Popup ConfirmPopup displays a confirmation overlay displayed relatively to its target. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | | key | string | - | Optional key to match the key of confirm object, necessary to use when component tree has multiple confirm dialogs. | | defaultFocus | "accept" \| "reject" \| "none" | - | Element to receive the focus when the popup gets visible, valid values are "accept", "reject", and "none". | | autoZIndex | boolean | - | Whether to automatically manage layering. | | baseZIndex | number | - | Base zIndex value to use in layering. | | style | Partial | - | Inline style of the component. | | styleClass | string | - | Style class of the component. | | visible | boolean | - | Defines if the component is visible. | | motionOptions | MotionOptions | - | The motion options. | | appendTo | HTMLElement \| ElementRef \| TemplateRef \| "self" \| "body" \| null \| undefined | 'body' | Target element to attach the overlay, valid values are "body" or a local ng-template variable of another element (note: use binding with brackets for template variables, e.g. [appendTo]="mydiv" for a div element having #mydiv as variable name). | ### Templates | Name | Type | Description | |------|------|-------------| | content | TemplateRef | Custom content template. | | accepticon | TemplateRef | Custom accept icon template. | | rejecticon | TemplateRef | Custom reject icon template. | | headless | TemplateRef | Custom headless template. | ## Pass Through Options | Name | Type | Description | |------|------|-------------| | host | PassThroughOption | Used to pass attributes to the host's DOM element. | | root | PassThroughOption | Used to pass attributes to the root's DOM element. | | content | PassThroughOption | Used to pass attributes to the content's DOM element. | | icon | PassThroughOption | Used to pass attributes to the icon's DOM element. | | message | PassThroughOption | Used to pass attributes to the message's DOM element. | | footer | PassThroughOption | Used to pass attributes to the footer's DOM element. | | pcRejectButton | ButtonPassThrough | Used to pass attributes to the reject Button component. | | pcAcceptButton | ButtonPassThrough | Used to pass attributes to the accept Button component. | | motion | MotionOptions | Used to pass options to the motion component/directive. | ## Theming ### CSS Classes | Class | Description | |-------|-------------| | p-confirmpopup | Class name of the root element | | p-confirmpopup-content | Class name of the content element | | p-confirmpopup-icon | Class name of the icon element | | p-confirmpopup-message | Class name of the message element | | p-confirmpopup-footer | Class name of the footer element | | p-confirmpopup-reject-button | Class name of the reject button element | | p-confirmpopup-accept-button | Class name of the accept button element | ### Design Tokens | Token | CSS Variable | Description | |-------|--------------|-------------| | confirmpopup.background | --p-confirmpopup-background | Background of root | | confirmpopup.border.color | --p-confirmpopup-border-color | Border color of root | | confirmpopup.color | --p-confirmpopup-color | Color of root | | confirmpopup.border.radius | --p-confirmpopup-border-radius | Border radius of root | | confirmpopup.shadow | --p-confirmpopup-shadow | Shadow of root | | confirmpopup.gutter | --p-confirmpopup-gutter | Gutter of root | | confirmpopup.arrow.offset | --p-confirmpopup-arrow-offset | Arrow offset of root | | confirmpopup.content.padding | --p-confirmpopup-content-padding | Padding of content | | confirmpopup.content.gap | --p-confirmpopup-content-gap | Gap of content | | confirmpopup.icon.size | --p-confirmpopup-icon-size | Size of icon | | confirmpopup.icon.color | --p-confirmpopup-icon-color | Color of icon | | confirmpopup.message.color | --p-confirmpopup-message-color | Color of message | | confirmpopup.message.font.weight | --p-confirmpopup-message-font-weight | Font weight of message | | confirmpopup.message.font.size | --p-confirmpopup-message-font-size | Font size of message | | confirmpopup.footer.gap | --p-confirmpopup-footer-gap | Gap of footer | | confirmpopup.footer.padding | --p-confirmpopup-footer-padding | Padding of footer | --- # Angular ContextMenu Component ContextMenu displays an overlay menu on right click of its target. ## Accessibility Screen Reader ContextMenu component uses the menubar role with aria-orientation set to "vertical" and the value to describe the menu can either be provided with aria-labelledby or aria-label props. Each list item has a presentation role whereas anchor elements have a menuitem role with aria-label referring to the label of the item and aria-disabled defined if the item is disabled. A submenu within a ContextMenu uses the menu role with an aria-labelledby defined as the id of the submenu root menuitem label. In addition, menuitems that open a submenu have aria-haspopup , aria-expanded and aria-controls to define the relation between the item and the submenu. Keyboard Support Key Function tab When focus is in the menu, closes the context menu and moves focus to the next focusable element in the page sequence. enter If menuitem has a submenu, toggles the visibility of the submenu otherwise activates the menuitem and closes all open overlays. space If menuitem has a submenu, toggles the visibility of the submenu otherwise activates the menuitem and closes all open overlays. escape Closes the context menu. down arrow If focus is not inside the menu and menu is open, add focus to the first item. If an item is already focused, moves focus to the next menuitem within the submenu. up arrow If focus is not inside the menu and menu is open, add focus to the last item. If an item is already focused, moves focus to the next menuitem within the submenu. right arrow Opens a submenu if there is one available and moves focus to the first item. left arrow Closes a submenu and moves focus to the root item of the closed submenu. home Moves focus to the first menuitem within the submenu. end Moves focus to the last menuitem within the submenu. ## Basic ContextMenu can be attached to a particular element whose local template variable name is defined using the target property. **Example:** ```typescript import { Component, OnInit } from '@angular/core'; import { ContextMenu, ContextMenuModule } from 'primeng/contextmenu'; import { MenuItem } from 'primeng/api'; import { ContextMenu } from 'primeng/contextmenu'; @Component({ template: `
Logo
`, standalone: true, imports: [ContextMenuModule] }) export class ContextMenuBasicDemo implements OnInit { items: MenuItem[] | undefined; ngOnInit() { this.items = [ { label: 'Copy', icon: 'pi pi-copy' }, { label: 'Rename', icon: 'pi pi-file-edit' } ]; } } ``` ## Command The function to invoke when an item is clicked is defined using the command property. **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { ContextMenu, ContextMenuModule } from 'primeng/contextmenu'; import { TagModule } from 'primeng/tag'; import { MenuItem, MessageService } from 'primeng/api'; import { ContextMenu } from 'primeng/contextmenu'; interface Users { id: number; name: string; image: string; role: string; } @Component({ template: `
    @for (user of users; track user.id) {
  • {{ user.name }}
    • }
`, standalone: true, imports: [ContextMenuModule, TagModule], providers: [MessageService] }) export class ContextMenuCommandDemo implements OnInit { private messageService = inject(MessageService); items: MenuItem[] | undefined; selectedUser: Users; users: Users[]; ngOnInit() { this.users = [ { id: 0, name: 'Amy Elsner', image: 'amyelsner.png', role: 'Admin' }, { id: 1, name: 'Anna Fali', image: 'annafali.png', role: 'Member' }, { id: 2, name: 'Asiya Javayant', image: 'asiyajavayant.png', role: 'Member' }, { id: 3, name: 'Bernardo Dominic', image: 'bernardodominic.png', role: 'Guest' }, { id: 4, name: 'Elwin Sharvill', image: 'elwinsharvill.png', role: 'Member' } ]; this.items = [ { label: 'Roles', icon: 'pi pi-users', items: [ { label: 'Admin', command: () => { this.selectedUser.role = 'Admin'; } }, { label: 'Member', command: () => { this.selectedUser.role = 'Member'; } }, { label: 'Guest', command: () => { this.selectedUser.role = 'Guest'; } } ] }, { label: 'Invite', icon: 'pi pi-user-plus', command: () => { this.messageService.add({ severity: 'success', summary: 'Success', detail: 'Invitation sent!', life: 3000 }); } } ]; } getBadge(user) { if (user.role === 'Member') return 'info'; else if (user.role === 'Guest') return 'warn'; else return null; } onContextMenu(event, user) { this.selectedUser = user; this.cm.show(event); } onHide() { this.selectedUser = null; } } ``` ## Document Setting global property to true attaches the context menu to the document. **Example:** ```typescript import { Component, OnInit } from '@angular/core'; import { ContextMenu, ContextMenuModule } from 'primeng/contextmenu'; import { MenuItem } from 'primeng/api'; import { ContextMenu } from 'primeng/contextmenu'; @Component({ template: `

Right-Click anywhere on this page to view the global ContextMenu.

`, standalone: true, imports: [ContextMenuModule] }) export class ContextMenuDocumentDemo implements OnInit { items: MenuItem[] | undefined; ngOnInit() { this.items = [ { label: 'Translate', icon: 'pi pi-language' }, { label: 'Speech', icon: 'pi pi-volume-up', items: [ { label: 'Start', icon: 'pi pi-caret-right' }, { label: 'Stop', icon: 'pi pi-pause' } ] }, { separator: true }, { label: 'Print', icon: 'pi pi-print' } ]; } } ``` ## Router Menu items support navigation via routerLink, programmatic routing using commands, or external URLs. **Example:** ```typescript import { Component, OnInit } from '@angular/core'; import { ContextMenuModule } from 'primeng/contextmenu'; import { MenuItem } from 'primeng/api'; @Component({ template: `
`, standalone: true, imports: [ContextMenuModule] }) export class ContextMenuRouterDemo implements OnInit { items: MenuItem[] | undefined; ngOnInit() { this.items = [ { label: 'Router Link', icon: 'pi pi-palette', routerLink: '/theming' }, { label: 'Programmatic', icon: 'pi pi-link', command: () => { this.router.navigate(['/installation']); } }, { label: 'External', icon: 'pi pi-home', url: 'https://angular.io//' } ]; } } ``` ## Table Table has built-in support for ContextMenu, see the ContextMenu demo for an example. ## Template ContextMenu offers item customization with the item template that receives the menuitem instance from the model as a parameter. **Example:** ```typescript import { Component, OnInit } from '@angular/core'; import { BadgeModule } from 'primeng/badge'; import { ContextMenu, ContextMenuModule } from 'primeng/contextmenu'; import { RippleModule } from 'primeng/ripple'; import { MenuItem } from 'primeng/api'; import { Product } from '@/domain/product'; import { ContextMenu } from 'primeng/contextmenu'; @Component({ template: `
    @for (product of data; track product.id) {
  • {{ product.name }}
    {{ product.category }}
    ${{ product.price }}
    • }
{{ item.label }} @if (item.badge) { } @if (item.shortcut) { {{ item.shortcut }} } @if (item.items) { }
`, standalone: true, imports: [BadgeModule, ContextMenuModule, RippleModule] }) export class ContextMenuTemplateDemo implements OnInit { items: MenuItem[] | undefined; selectedId!: string; data: any[] = [ { id: '1000', code: 'f230fh0g3', name: 'Bamboo Watch', description: 'Product Description', image: 'bamboo-watch.jpg', price: 65, category: 'Accessories', quantity: 24, inventoryStatus: 'INSTOCK', rating: 5 }, { id: '1001', code: 'nvklal433', name: 'Black Watch', description: 'Product Description', image: 'black-watch.jpg', price: 72, category: 'Accessories', quantity: 61, inventoryStatus: 'INSTOCK', rating: 4 }, { id: '1002', code: 'zz21cz3c1', name: 'Blue Band', description: 'Product Description', image: 'blue-band.jpg', price: 79, category: 'Fitness', quantity: 2, inventoryStatus: 'LOWSTOCK', rating: 3 }, { id: '1003', code: '244wgerg2', name: 'Blue T-Shirt', description: 'Product Description', image: 'blue-t-shirt.jpg', price: 29, category: 'Clothing', quantity: 25, inventoryStatus: 'INSTOCK', rating: 5 }, { id: '1004', code: 'h456wer53', name: 'Bracelet', description: 'Product Description', image: 'bracelet.jpg', price: 15, category: 'Accessories', quantity: 73, inventoryStatus: 'INSTOCK', rating: 4 } ]; ngOnInit() { this.items = [ { label: 'Favorite', icon: 'pi pi-star', shortcut: '⌘+D' }, { label: 'Add', icon: 'pi pi-shopping-cart', shortcut: '⌘+A' }, { separator: true }, { label: 'Share', icon: 'pi pi-share-alt', items: [ { label: 'Whatsapp', icon: 'pi pi-whatsapp', badge: '2' }, { label: 'Instagram', icon: 'pi pi-instagram', badge: '3' } ] } ]; } onContextMenu(event) { this.cm.target = event.currentTarget; this.cm.show(event); } onHide() { this.selectedId = undefined; } } ``` ## Context Menu ContextMenu displays an overlay menu on right click of its target. Note that components like Table has special integration with ContextMenu. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | | model | MenuItem[] | - | An array of menuitems. | | triggerEvent | string | - | Event for which the menu must be displayed. | | target | string \| HTMLElement | - | Local template variable name of the element to attach the context menu. | | global | boolean | - | Attaches the menu to document instead of a particular item. | | style | Partial | - | Inline style of the component. | | styleClass | string | - | Style class of the component. | | autoZIndex | boolean | - | Whether to automatically manage layering. | | baseZIndex | number | - | Base zIndex value to use in layering. | | id | string | - | Current id state as a string. | | breakpoint | string | - | The breakpoint to define the maximum width boundary. | | ariaLabel | string | - | Defines a string value that labels an interactive element. | | ariaLabelledBy | string | - | Identifier of the underlying input element. | | pressDelay | number | - | Press delay in touch devices as miliseconds. | | appendTo | HTMLElement \| ElementRef \| TemplateRef \| "self" \| "body" \| null \| undefined | 'self' | Target element to attach the overlay, valid values are "body" or a local ng-template variable of another element (note: use binding with brackets for template variables, e.g. [appendTo]="mydiv" for a div element having #mydiv as variable name). | | motionOptions | MotionOptions | - | The motion options. | ### Emits | Name | Parameters | Description | |------|------------|-------------| | onShow | value: void | Callback to invoke when overlay menu is shown. | | onHide | value: void | Callback to invoke when overlay menu is hidden. | ### Templates | Name | Type | Description | |------|------|-------------| | item | TemplateRef | Custom item template. | | submenuicon | TemplateRef | Custom submenu icon template. | ## Pass Through Options | Name | Type | Description | |------|------|-------------| | root | PassThroughOption | Used to pass attributes to the root's DOM element. | | rootList | PassThroughOption | Used to pass attributes to the root list's DOM element. | | submenu | PassThroughOption | Used to pass attributes to the submenu's DOM element. | | separator | PassThroughOption | Used to pass attributes to the separator's DOM element. | | item | PassThroughOption | Used to pass attributes to the item's DOM element. | | itemContent | PassThroughOption | Used to pass attributes to the item content's DOM element. | | itemLink | PassThroughOption | Used to pass attributes to the item link's DOM element. | | itemIcon | PassThroughOption | Used to pass attributes to the item icon's DOM element. | | itemLabel | PassThroughOption | Used to pass attributes to the item label's DOM element. | | submenuIcon | PassThroughOption | Used to pass attributes to the submenu icon's DOM element. | | motion | MotionOptions | Used to pass options to the motion component/directive. | ## Theming ### CSS Classes | Class | Description | |-------|-------------| | p-contextmenu | Class name of the root element | | p-contextmenu-root-list | Class name of the root list element | | p-contextmenu-item | Class name of the item element | | p-contextmenu-item-content | Class name of the item content element | | p-contextmenu-item-link | Class name of the item link element | | p-contextmenu-item-icon | Class name of the item icon element | | p-contextmenu-item-label | Class name of the item label element | | p-contextmenu-submenu-icon | Class name of the submenu icon element | | p-contextmenu-submenu | Class name of the submenu element | | p-contextmenu-separator | Class name of the separator element | ### Design Tokens | Token | CSS Variable | Description | |-------|--------------|-------------| | contextmenu.background | --p-contextmenu-background | Background of root | | contextmenu.border.color | --p-contextmenu-border-color | Border color of root | | contextmenu.color | --p-contextmenu-color | Color of root | | contextmenu.border.radius | --p-contextmenu-border-radius | Border radius of root | | contextmenu.shadow | --p-contextmenu-shadow | Shadow of root | | contextmenu.transition.duration | --p-contextmenu-transition-duration | Transition duration of root | | contextmenu.list.padding | --p-contextmenu-list-padding | Padding of list | | contextmenu.list.gap | --p-contextmenu-list-gap | Gap of list | | contextmenu.item.focus.background | --p-contextmenu-item-focus-background | Focus background of item | | contextmenu.item.active.background | --p-contextmenu-item-active-background | Active background of item | | contextmenu.item.color | --p-contextmenu-item-color | Color of item | | contextmenu.item.focus.color | --p-contextmenu-item-focus-color | Focus color of item | | contextmenu.item.active.color | --p-contextmenu-item-active-color | Active color of item | | contextmenu.item.padding | --p-contextmenu-item-padding | Padding of item | | contextmenu.item.border.radius | --p-contextmenu-item-border-radius | Border radius of item | | contextmenu.item.gap | --p-contextmenu-item-gap | Gap of item | | contextmenu.item.icon.color | --p-contextmenu-item-icon-color | Icon color of item | | contextmenu.item.icon.focus.color | --p-contextmenu-item-icon-focus-color | Icon focus color of item | | contextmenu.item.icon.active.color | --p-contextmenu-item-icon-active-color | Icon active color of item | | contextmenu.item.icon.size | --p-contextmenu-item-icon-size | Icon size of item | | contextmenu.item.label.font.weight | --p-contextmenu-item-label-font-weight | Font weight of item label | | contextmenu.item.label.font.size | --p-contextmenu-item-label-font-size | Font size of item label | | contextmenu.submenu.mobile.indent | --p-contextmenu-submenu-mobile-indent | Mobile indent of submenu | | contextmenu.submenu.label.padding | --p-contextmenu-submenu-label-padding | Padding of submenu label | | contextmenu.submenu.label.font.weight | --p-contextmenu-submenu-label-font-weight | Font weight of submenu label | | contextmenu.submenu.label.font.size | --p-contextmenu-submenu-label-font-size | Font size of submenu label | | contextmenu.submenu.label.background | --p-contextmenu-submenu-label-background | Background of submenu label | | contextmenu.submenu.label.color | --p-contextmenu-submenu-label-color | Color of submenu label | | contextmenu.submenu.icon.size | --p-contextmenu-submenu-icon-size | Size of submenu icon | | contextmenu.submenu.icon.color | --p-contextmenu-submenu-icon-color | Color of submenu icon | | contextmenu.submenu.icon.focus.color | --p-contextmenu-submenu-icon-focus-color | Focus color of submenu icon | | contextmenu.submenu.icon.active.color | --p-contextmenu-submenu-icon-active-color | Active color of submenu icon | | contextmenu.separator.border.color | --p-contextmenu-separator-border-color | Border color of separator | --- # Angular DataView Component DataView displays data in grid grid-cols-12 gap-4 or list layout with pagination and sorting features. ## Accessibility Screen Reader The container element that wraps the layout options buttons has a group role whereas each button element uses button role and aria-pressed is updated depending on selection state. Values to describe the buttons are derived from the aria.listView and aria.gridView properties of the locale API respectively. Refer to paginator accessibility documentation for the paginator of the component. Keyboard Support Key Function tab Moves focus to the buttons. space Toggles the checked state of a button. ## Basic DataView requires a value to display along with a list template that receives an object in the collection to return content. **Example:** ```typescript import { Component, OnInit, inject, signal } from '@angular/core'; import { ButtonModule } from 'primeng/button'; import { DataViewModule } from 'primeng/dataview'; import { TagModule } from 'primeng/tag'; import { ProductService } from '@/service/productservice'; import { Product } from '@/domain/product'; @Component({ template: `
@for (item of items; track item.id; let first = $first) {
{{ item.category }}
{{ item.name }}
{{ item.rating }}
{{ '$' + item.price }}
}
`, standalone: true, imports: [ButtonModule, DataViewModule, TagModule], providers: [ProductService] }) export class DataViewBasicDemo implements OnInit { private productService = inject(ProductService); products = signal([]); productService = inject(ProductService); ngOnInit() { this.productService.getProducts().then((data) => { const d = data.slice(0, 5); this.products.set([...d]); }); } getSeverity(product: Product) { switch (product.inventoryStatus) { case 'INSTOCK': return 'success'; case 'LOWSTOCK': return 'warn'; case 'OUTOFSTOCK': return 'danger'; default: return null; } } } ``` ## Layout DataView supports list and grid display modes defined with the layout property. The grid mode is not built-in for flexibility purposes and requires a library with CSS grid features like Tailwind. **Example:** ```typescript import { Component, OnInit, inject, signal } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { DataViewModule } from 'primeng/dataview'; import { SelectButtonModule } from 'primeng/selectbutton'; import { TagModule } from 'primeng/tag'; import { ButtonModule } from 'primeng/button'; import { ProductService } from '@/service/productservice'; import { Product } from '@/domain/product'; @Component({ template: `
@for (item of items; track item.id; let first = $first) {
{{ item.category }}
{{ item.name }}
{{ item.rating }}
{{ item.price | currency: 'USD' }}
}
@for (product of items; track product.id) {
{{ product.category }}
{{ product.name }}
{{ product.rating }}
{{ product.price | currency: 'USD' }}
}
`, standalone: true, imports: [DataViewModule, SelectButtonModule, TagModule, ButtonModule, FormsModule], providers: [ProductService] }) export class DataViewLayoutDemo implements OnInit { private productService = inject(ProductService); products = signal([]); options: any[] = ['list', 'grid']; ngOnInit() { this.productService.getProducts().then((data) => { this.products.set([...data.slice(0, 12)]); }); } } ``` ## Loading While data is being loaded. Skeleton component may be used to indicate the busy state. **Example:** ```typescript import { Component, OnInit, inject, signal } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { DataViewModule } from 'primeng/dataview'; import { SelectButtonModule } from 'primeng/selectbutton'; import { SkeletonModule } from 'primeng/skeleton'; import { ProductService } from '@/service/productservice'; import { Product } from '@/domain/product'; @Component({ template: `
@for (i of counterArray(6); track $index; let first = $first) {
}
@for (i of counterArray(6); track $index) {
}
`, standalone: true, imports: [DataViewModule, SelectButtonModule, SkeletonModule, FormsModule], providers: [ProductService] }) export class DataViewLoadingDemo implements OnInit { private productService = inject(ProductService); products = signal([]); options: string[] = ['list', 'grid']; ngOnInit() { this.productService.getProducts().then((data) => this.products.set([...data.slice(0, 12)])); } counterArray(n: number): any[] { return Array(n); } } ``` ## Pagination Pagination is enabled with the paginator and rows properties. Refer to the Paginator for more information about customizing the paginator. **Example:** ```typescript import { Component, OnInit, inject, signal } from '@angular/core'; import { ButtonModule } from 'primeng/button'; import { DataViewModule } from 'primeng/dataview'; import { TagModule } from 'primeng/tag'; import { ProductService } from '@/service/productservice'; import { Product } from '@/domain/product'; @Component({ template: `
@for (item of items; track item.id; let first = $first) {
{{ item.category }}
{{ item.name }}
{{ item.rating }}
{{ '$' + item.price }}
}
`, standalone: true, imports: [ButtonModule, DataViewModule, TagModule], providers: [ProductService] }) export class DataViewPaginationDemo implements OnInit { private productService = inject(ProductService); products = signal([]); ngOnInit() { this.productService.getProducts().then((data) => { this.products.set(data); }); } } ``` ## Sorting Built-in sorting is controlled by bindings sortField and sortOrder properties from a custom UI. **Example:** ```typescript import { Component, OnInit, inject, signal } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { ButtonModule } from 'primeng/button'; import { DataViewModule } from 'primeng/dataview'; import { SelectModule } from 'primeng/select'; import { TagModule } from 'primeng/tag'; import { ProductService } from '@/service/productservice'; import { SelectItem } from 'primeng/api'; import { Product } from '@/domain/product'; @Component({ template: `
@for (item of items; track item.id; let first = $first) {
{{ item.category }}
{{ item.name }}
{{ item.rating }}
{{ '$' + item.price }}
}
`, standalone: true, imports: [ButtonModule, DataViewModule, SelectModule, TagModule, FormsModule], providers: [ProductService] }) export class DataViewSortingDemo implements OnInit { private productService = inject(ProductService); sortOptions!: SelectItem[]; sortOrder!: number; sortField!: string; products = signal([]); ngOnInit() { this.productService.getProducts().then((data) => this.products.set(data.slice(0, 5))); this.sortOptions = [ { label: 'Price High to Low', value: '!price' }, { label: 'Price Low to High', value: 'price' } ]; } getSeverity(product: Product) { switch (product.inventoryStatus) { case 'INSTOCK': return 'success'; case 'LOWSTOCK': return 'warn'; case 'OUTOFSTOCK': return 'danger'; default: return null; } } } ``` ## Data View DataView displays data in grid or list layout with pagination and sorting features. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | | paginator | boolean | - | When specified as true, enables the pagination. | | rows | number | - | Number of rows to display per page. | | totalRecords | number | - | Number of total records, defaults to length of value when not defined. | | pageLinks | number | - | Number of page links to display in paginator. | | rowsPerPageOptions | any[] \| number[] | - | Array of integer/object values to display inside rows per page dropdown of paginator | | paginatorPosition | "top" \| "bottom" \| "both" | - | Position of the paginator. | | paginatorStyleClass | string | - | Custom style class for paginator | | alwaysShowPaginator | boolean | - | Whether to show it even there is only one page. | | paginatorDropdownAppendTo | HTMLElement \| ElementRef \| TemplateRef \| "self" \| "body" \| null \| undefined | - | Target element to attach the paginator dropdown overlay, valid values are "body" or a local ng-template variable of another element (note: use binding with brackets for template variables, e.g. [appendTo]="mydiv" for a div element having #mydiv as variable name). | | paginatorDropdownScrollHeight | string | - | Paginator dropdown height of the viewport in pixels, a scrollbar is defined if height of list exceeds this value. | | currentPageReportTemplate | string | - | Template of the current page report element. Available placeholders are {currentPage},{totalPages},{rows},{first},{last} and {totalRecords} | | showCurrentPageReport | boolean | - | Whether to display current page report. | | showJumpToPageDropdown | boolean | - | Whether to display a dropdown to navigate to any page. | | showFirstLastIcon | boolean | - | When enabled, icons are displayed on paginator to go first and last page. | | showPageLinks | boolean | - | Whether to show page links. | | lazy | boolean | - | Defines if data is loaded and interacted with in lazy manner. | | lazyLoadOnInit | boolean | - | Whether to call lazy loading on initialization. | | emptyMessage | string | - | Text to display when there is no data. Defaults to global value in i18n translation configuration. | | gridStyleClass | string | - | Style class of the grid. | | trackBy | Function | - | Function to optimize the dom operations by delegating to ngForTrackBy, default algorithm checks for object identity. | | filterBy | string | - | Comma separated list of fields in the object graph to search against. | | filterLocale | string | - | Locale to use in filtering. The default locale is the host environment's current locale. | | loading | boolean | - | Displays a loader to indicate data load is in progress. | | loadingIcon | string | - | The icon to show while indicating data load is in progress. | | first | number | - | Index of the first row to be displayed. | | sortField | string | - | Property name of data to use in sorting by default. | | sortOrder | number | - | Order to sort the data by default. | | value | any[] | - | An array of objects to display. | | layout | "list" \| "grid" | - | Defines the layout mode. | ### Emits | Name | Parameters | Description | |------|------------|-------------| | onLazyLoad | event: DataViewLazyLoadEvent | Callback to invoke when paging, sorting or filtering happens in lazy mode. | | onPage | event: DataViewPageEvent | Callback to invoke when pagination occurs. | | onSort | event: DataViewSortEvent | Callback to invoke when sorting occurs. | | onChangeLayout | event: DataViewLayoutChangeEvent | Callback to invoke when changing layout. | ### Templates | Name | Type | Description | |------|------|-------------| | list | TemplateRef> | Template for the list layout. | | grid | TemplateRef> | Template for grid layout. | | header | TemplateRef | Template for the header section. | | emptymessage | TemplateRef | Template for the empty message section. | | footer | TemplateRef | Template for the footer section. | | paginatorleft | TemplateRef | Template for the left side of paginator. | | paginatorright | TemplateRef | Template for the right side of paginator. | | paginatordropdownitem | TemplateRef | Template for items in paginator dropdown. | | loadingicon | TemplateRef | Template for loading icon. | | listicon | TemplateRef | Template for list icon. | | gridicon | TemplateRef | Template for grid icon. | ## Pass Through Options | Name | Type | Description | |------|------|-------------| | host | PassThroughOption | Used to pass attributes to the host's DOM element. | | root | PassThroughOption | Used to pass attributes to the root's DOM element. | | loading | PassThroughOption | Used to pass attributes to the loading container's DOM element. | | loadingOverlay | PassThroughOption | Used to pass attributes to the loading overlay's DOM element. | | loadingIcon | PassThroughOption | Used to pass attributes to the loading icon's DOM element. | | header | PassThroughOption | Used to pass attributes to the header's DOM element. | | content | PassThroughOption | Used to pass attributes to the content container's DOM element. | | emptyMessage | PassThroughOption | Used to pass attributes to the empty message's DOM element. | | footer | PassThroughOption | Used to pass attributes to the footer's DOM element. | | pcPaginator | PaginatorPassThrough | Used to pass attributes to the Paginator component. | ## Theming ### CSS Classes | Class | Description | |-------|-------------| | p-dataview | Class name of the root element | | p-dataview-header | Class name of the header element | | p-dataview-loading | Class name of the loading element | | p-dataview-loading-overlay | Class name of the loading overlay element | | p-dataview-loading-icon | Class name of the loading icon element | | p-dataview-paginator-[position] | Class name of the paginator element | | p-dataview-content | Class name of the content element | | p-dataview-empty-message | Class name of the empty message element | | p-dataview-footer | Class name of the footer element | ### Design Tokens | Token | CSS Variable | Description | |-------|--------------|-------------| | dataview.border.color | --p-dataview-border-color | Border color of root | | dataview.border.width | --p-dataview-border-width | Border width of root | | dataview.border.radius | --p-dataview-border-radius | Border radius of root | | dataview.padding | --p-dataview-padding | Padding of root | | dataview.header.background | --p-dataview-header-background | Background of header | | dataview.header.color | --p-dataview-header-color | Color of header | | dataview.header.border.color | --p-dataview-header-border-color | Border color of header | | dataview.header.border.width | --p-dataview-header-border-width | Border width of header | | dataview.header.padding | --p-dataview-header-padding | Padding of header | | dataview.header.border.radius | --p-dataview-header-border-radius | Border radius of header | | dataview.content.background | --p-dataview-content-background | Background of content | | dataview.content.color | --p-dataview-content-color | Color of content | | dataview.content.border.color | --p-dataview-content-border-color | Border color of content | | dataview.content.border.width | --p-dataview-content-border-width | Border width of content | | dataview.content.padding | --p-dataview-content-padding | Padding of content | | dataview.content.border.radius | --p-dataview-content-border-radius | Border radius of content | | dataview.footer.background | --p-dataview-footer-background | Background of footer | | dataview.footer.color | --p-dataview-footer-color | Color of footer | | dataview.footer.border.color | --p-dataview-footer-border-color | Border color of footer | | dataview.footer.border.width | --p-dataview-footer-border-width | Border width of footer | | dataview.footer.padding | --p-dataview-footer-padding | Padding of footer | | dataview.footer.border.radius | --p-dataview-footer-border-radius | Border radius of footer | | dataview.paginator.top.border.color | --p-dataview-paginator-top-border-color | Border color of paginator top | | dataview.paginator.top.border.width | --p-dataview-paginator-top-border-width | Border width of paginator top | | dataview.paginator.bottom.border.color | --p-dataview-paginator-bottom-border-color | Border color of paginator bottom | | dataview.paginator.bottom.border.width | --p-dataview-paginator-bottom-border-width | Border width of paginator bottom | --- # Angular DatePicker Component DatePicker is an input component to select a date. ## Accessibility Screen Reader Value to describe the component can either be provided via label tag combined with inputId prop or using aria-labelledby , aria-label props. The input element has combobox role in addition to aria-autocomplete as "none", aria-haspopup as "dialog" and aria-expanded attributes. The relation between the input and the popup is created with aria-controls attribute that refers to the id of the popup. The optional DatePicker button requires includes aria-haspopup , aria-expanded for states along with aria-controls to define the relation between the popup and the button. The value to read is retrieved from the chooseDate key of the aria property from the locale API. This label is also used for the aria-label of the popup as well. When there is a value selected, it is formatted and appended to the label to be able to notify users about the current value. Popup has a dialog role along with aria-modal and aria-label . The navigation buttons at the header has an aria-label retrieved from the prevYear , nextYear , prevMonth , nextMonth , prevDecade and nextDecade keys of the locale aria API. Similarly month picker button uses the chooseMonth and year picker button uses the chooseYear keys. Main date table uses grid role that contains th elements with col as the scope along with abbr tag resolving to the full name of the month. Each date cell has an aria-label referring to the full date value. Buttons at the footer utilize their readable labels as aria-label as well. Selected date also receives the aria-selected attribute. Timepicker spinner buttons get their labels for aria-label from the aria locale API using the prevHour , nextHour , prevMinute , nextMinute , prevSecond , nextSecond , am and pm keys. DatePicker also includes a hidden section that is only available to screen readers with aria-live as "polite". This element is updated when the selected date changes to instruct the user about the current date selected. ## Basic Two-way value binding is defined using the standard ngModel directive referencing to a Date property. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { DatePickerModule } from 'primeng/datepicker'; @Component({ template: `
`, standalone: true, imports: [DatePickerModule, FormsModule] }) export class DatePickerBasicDemo { date: Date | undefined; } ``` ## Button Bar When showButtonBar is present, today and clear buttons are displayed at the footer. The content can be fully customized with the buttonbar template as well. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { ButtonModule } from 'primeng/button'; import { DatePickerModule } from 'primeng/datepicker'; @Component({ template: `
`, standalone: true, imports: [ButtonModule, DatePickerModule, FormsModule] }) export class DatePickerButtonBarDemo { date: Date | undefined; dates: Date[] | undefined; } ``` ## Clear Icon When showClear is enabled, a clear icon is displayed to clear the value. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { DatePickerModule } from 'primeng/datepicker'; @Component({ template: `
`, standalone: true, imports: [DatePickerModule, FormsModule] }) export class DatePickerClearIconDemo { date: Date | undefined; } ``` ## Date Template Custom content can be placed inside date cells with the ng-template property that takes a Date as a parameter. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { DatePickerModule } from 'primeng/datepicker'; @Component({ template: `
@if (date.day > 10 && date.day < 15) { {{ date.day }} } @else { {{ date.day }} }
`, standalone: true, imports: [DatePickerModule, FormsModule] }) export class DatePickerDateTemplateDemo { date: Date[] | undefined; } ``` ## Disabled When disabled is present, the element cannot be edited and focused. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { DatePickerModule } from 'primeng/datepicker'; @Component({ template: `
`, standalone: true, imports: [DatePickerModule, FormsModule] }) export class DatePickerDisabledDemo { date: Date | undefined; } ``` ## events-doc **Example:** ```typescript import { Component } from '@angular/core'; @Component({ template: `
Name Parameters Description
onSelect value: Selected value Callback to invoke when a date is selected. Note that this event is not called when the value is entered from the input manually.
onBlur event: Blur event Callback to invoke on blur of input field.
onFocus event: Focus event Callback to invoke on focus of input field.
onClose event: Close event Callback to invoke when datepicker panel is closed.
onShow event: Animation event Callback to invoke when datepicker panel is visible.
onClickOutside event: Click event Callback to invoke when click outside of datepicker panel.
onInput event: Input event Callback to invoke when input field is being typed.
onTodayClick event: Click event Callback to invoke when today button is clicked.
onClearClick event: Click event Callback to invoke when clear button is clicked.
onMonthChange event.month: New month
event.year: New year 		Callback to invoke when a month is changed using the navigators.
onYearChange event.month: New month
event.year: New year 		Callback to invoke when a year is changed using the navigators.
onClear - Callback to invoke when input field is cleared.
`, standalone: true, imports: [] }) export class DatePickerEventsDemo {} ``` ## Filled Specify the variant property as filled to display the component with a higher visual emphasis than the default outlined style. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { DatePickerModule } from 'primeng/datepicker'; @Component({ template: `
`, standalone: true, imports: [DatePickerModule, FormsModule] }) export class DatePickerFilledDemo { date: Date[] | undefined; } ``` ## Float Label A floating label appears on top of the input field when focused. Visit FloatLabel documentation for more information. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { DatePickerModule } from 'primeng/datepicker'; import { FloatLabelModule } from 'primeng/floatlabel'; @Component({ template: `
`, standalone: true, imports: [DatePickerModule, FloatLabelModule, FormsModule] }) export class DatePickerFloatLabelDemo { value1: Date | undefined; value2: Date | undefined; value3: Date | undefined; } ``` ## Fluid The fluid prop makes the component take up the full width of its container when set to true. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { DatePickerModule } from 'primeng/datepicker'; @Component({ template: ` `, standalone: true, imports: [DatePickerModule, FormsModule] }) export class DatePickerFluidDemo { date: Date | undefined; } ``` ## Format Default date format is mm/dd/yy which can be customized using the dateFormat property. Following options can be a part of the format. d - day of month (no leading zero) dd - day of month (two digit) o - day of the year (no leading zeros) oo - day of the year (three digit) D - day name short DD - day name long m - month of year (no leading zero) mm - month of year (two digit) M - month name short MM - month name long y - year (two digit) yy - year (four digit) @ - Unix timestamp (ms since 01/01/1970) ! - Windows ticks (100ns since 01/01/0001) '...' - literal text '' - single quote anything else - literal text **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { DatePickerModule } from 'primeng/datepicker'; @Component({ template: `
`, standalone: true, imports: [DatePickerModule, FormsModule] }) export class DatePickerFormatDemo { date: Date | undefined; } ``` ## Icon An additional icon is displayed next to the input field when showIcon is present. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { DatePickerModule } from 'primeng/datepicker'; @Component({ template: `
`, standalone: true, imports: [DatePickerModule, FormsModule] }) export class DatePickerIconDemo { date1: Date | undefined; date2: Date | undefined; date3: Date | undefined; } ``` ## Ifta Label IftaLabel is used to create infield top aligned labels. Visit IftaLabel documentation for more information. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { DatePickerModule } from 'primeng/datepicker'; import { IftaLabelModule } from 'primeng/iftalabel'; @Component({ template: `
`, standalone: true, imports: [DatePickerModule, IftaLabelModule, FormsModule] }) export class DatePickerIftaLabelDemo { value: Date | undefined; } ``` ## Inline DatePicker is displayed as a popup by default, add inline property to customize this behavior. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { DatePickerModule } from 'primeng/datepicker'; @Component({ template: `
`, standalone: true, imports: [DatePickerModule, FormsModule] }) export class DatePickerInlineDemo { date: Date[] | undefined; } ``` ## Invalid The invalid state is applied using the ⁠invalid property to indicate failed validation, which can be integrated with Angular Forms. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { DatePickerModule } from 'primeng/datepicker'; @Component({ template: `
`, standalone: true, imports: [DatePickerModule, FormsModule] }) export class DatePickerInvalidDemo { date1: Date | undefined; date2: Date | undefined; } ``` ## Locale Locale for different languages and formats is defined globally, refer to the PrimeNG Locale configuration for more information. ## Mask DatePicker can be used with the pInputMask directive to enforce a specific input format. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { DatePickerModule } from 'primeng/datepicker'; import { InputMaskModule } from 'primeng/inputmask'; @Component({ template: `
`, standalone: true, imports: [DatePickerModule, InputMaskModule, FormsModule] }) export class DatePickerMaskDemo { date: Date | undefined; } ``` ## methods-doc **Example:** ```typescript import { Component } from '@angular/core'; @Component({ template: `
Name Parameters Description
toggle - Toggles the visibility of the calendar.
`, standalone: true, imports: [] }) export class DatePickerMethodsDemo {} ``` ## Min / Max Boundaries for the permitted dates that can be entered are defined with minDate and maxDate properties. **Example:** ```typescript import { Component, OnInit } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { DatePickerModule } from 'primeng/datepicker'; @Component({ template: `
`, standalone: true, imports: [DatePickerModule, FormsModule] }) export class DatePickerMinMaxDemo implements OnInit { date: Date | undefined; minDate: Date | undefined; maxDate: Date | undefined; ngOnInit() { let today = new Date(); let month = today.getMonth(); let year = today.getFullYear(); let prevMonth = month === 0 ? 11 : month - 1; let prevYear = prevMonth === 11 ? year - 1 : year; let nextMonth = month === 11 ? 0 : month + 1; let nextYear = nextMonth === 0 ? year + 1 : year; this.minDate = new Date(); this.minDate.setMonth(prevMonth); this.minDate.setFullYear(prevYear); this.maxDate = new Date(); this.maxDate.setMonth(nextMonth); this.maxDate.setFullYear(nextYear); } } ``` ## month-doc Month only picker is enabled by specifying view as month in addition to a suitable dateFormat . **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { DatePickerModule } from 'primeng/datepicker'; @Component({ template: `
`, standalone: true, imports: [DatePickerModule, FormsModule] }) export class DatePickerMonthDemo { date: Date[] | undefined; } ``` ## Multiple In order to choose multiple dates, set selectionMode as multiple . In this mode, the value binding should be an array. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { DatePickerModule } from 'primeng/datepicker'; @Component({ template: `
`, standalone: true, imports: [DatePickerModule, FormsModule] }) export class DatePickerMultipleDemo { dates: Date[] | undefined; } ``` ## Multiple Months Number of months to display is configured with the numberOfMonths property. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { DatePickerModule } from 'primeng/datepicker'; @Component({ template: `
`, standalone: true, imports: [DatePickerModule, FormsModule] }) export class DatePickerMultipleMonthsDemo { date: Date[] | undefined; } ``` ## Range A range of dates can be selected by defining selectionMode as range , in this case the bound value would be an array with two values where first date is the start of the range and second date is the end. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { DatePickerModule } from 'primeng/datepicker'; @Component({ template: `
`, standalone: true, imports: [DatePickerModule, FormsModule] }) export class DatePickerRangeDemo { rangeDates: Date[] | undefined; } ``` ## reactiveforms-doc DatePicker can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control. **Example:** ```typescript import { Component, inject } from '@angular/core'; import { ReactiveFormsModule } from '@angular/forms'; import { DatePickerModule } from 'primeng/datepicker'; import { MessageModule } from 'primeng/message'; import { ButtonModule } from 'primeng/button'; import { MessageService } from 'primeng/api'; @Component({ template: `
@if (isInvalid('selectedDate')) { Date is required. }
`, standalone: true, imports: [DatePickerModule, MessageModule, ButtonModule, ReactiveFormsModule] }) export class DatePickerReactiveFormsDemo { messageService = inject(MessageService); exampleForm: FormGroup | undefined; formSubmitted: boolean = false; constructor() { this.exampleForm = this.fb.group({ selectedDate: ['', Validators.required] }); } onSubmit() { this.formSubmitted = true; if (this.exampleForm.valid) { this.messageService.add({ severity: 'success', summary: 'Success', detail: 'Form is submitted', life: 3000 }); this.exampleForm.reset(); this.formSubmitted = false; } } isInvalid(controlName: string) { const control = this.exampleForm.get(controlName); return control?.invalid && (control.touched || this.formSubmitted); } } ``` ## Sizes DatePicker provides small and large sizes as alternatives to the base. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { DatePickerModule } from 'primeng/datepicker'; @Component({ template: `
`, standalone: true, imports: [DatePickerModule, FormsModule] }) export class DatePickerSizesDemo { value1: Date | undefined; value2: Date | undefined; value3: Date | undefined; } ``` ## template-doc Calendar UI accepts custom content using header and footer templates. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; @Component({ template: `
Header Footer
`, standalone: true, imports: [FormsModule] }) export class DatePickerTemplateDemo { date: Date[] | undefined; } ``` ## templatedrivenforms-doc **Example:** ```typescript import { Component, inject } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { DatePickerModule } from 'primeng/datepicker'; import { MessageModule } from 'primeng/message'; import { ButtonModule } from 'primeng/button'; import { MessageService } from 'primeng/api'; @Component({ template: `
@if (dateModel.invalid && (dateModel.touched || exampleForm.submitted)) { Date is required. }
`, standalone: true, imports: [DatePickerModule, MessageModule, ButtonModule, FormsModule] }) export class DatePickerTemplateDrivenFormsDemo { messageService = inject(MessageService); date: Date | undefined; onSubmit(form: any) { if (form.valid) { this.messageService.add({ severity: 'success', summary: 'Success', detail: 'Form is submitted', life: 3000 }); form.resetForm(); } } } ``` ## templates-doc **Example:** ```typescript import { Component } from '@angular/core'; @Component({ template: `
Name Parameters
header -
footer -
date $implicit: Value of the component
decade $implicit: An array containing the start and and year of a decade to display at header of the year picker.
previousicon -
nexticon -
triggericon -
clearicon -
incrementicon -
decrementicon -
`, standalone: true, imports: [] }) export class DatePickerTemplatesDemo {} ``` ## Time A time picker is displayed when showTime is enabled where 12/24 hour format is configured with hourFormat property. In case, only time needs to be selected, add timeOnly to hide the date section. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { DatePickerModule } from 'primeng/datepicker'; @Component({ template: `
`, standalone: true, imports: [DatePickerModule, FormsModule] }) export class DatePickerTimeDemo { datetime12h: Date[] | undefined; datetime24h: Date[] | undefined; time: Date[] | undefined; } ``` ## touchui-doc When touchUI is enabled, overlay is displayed as optimized for touch devices. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { DatePickerModule } from 'primeng/datepicker'; @Component({ template: `
`, standalone: true, imports: [DatePickerModule, FormsModule] }) export class DatePickerTouchUiDemo { date: Date[] | undefined; } ``` ## year-doc Specifying view as year in addition to a suitable dateFormat enables the year picker. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { DatePickerModule } from 'primeng/datepicker'; @Component({ template: `
`, standalone: true, imports: [DatePickerModule, FormsModule] }) export class DatePickerYearDemo { date: Date[] | undefined; } ``` ## Date Picker DatePicker is a form component to work with dates. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | | required | boolean | false | There must be a value (if set). | | invalid | boolean | false | When present, it specifies that the component should have invalid state style. | | disabled | boolean | false | When present, it specifies that the component should have disabled state style. | | name | string | undefined | When present, it specifies that the name of the input. | | fluid | boolean | false | Spans 100% width of the container when enabled. | | variant | "filled" \| "outlined" | 'outlined' | Specifies the input variant of the component. | | size | "small" \| "large" | undefined | Specifies the size of the component. | | inputSize | number | undefined | Specifies the visible width of the input element in characters. | | pattern | string | undefined | Specifies the value must match the pattern. | | min | number | undefined | The value must be greater than or equal to the value. | | max | number | undefined | The value must be less than or equal to the value. | | step | number | undefined | Unless the step is set to the any literal, the value must be min + an integral multiple of the step. | | minlength | number | undefined | The number of characters (code points) must not be less than the value of the attribute, if non-empty. | | maxlength | number | undefined | The number of characters (code points) must not exceed the value of the attribute. | | iconDisplay | "input" \| "button" | - | Icon display mode. | | inputStyle | Partial | - | Inline style of the input field. | | inputId | string | - | Identifier of the focus input to match a label defined for the component. | | inputStyleClass | string | - | Style class of the input field. | | placeholder | string | - | Placeholder text for the input. | | ariaLabelledBy | string | - | Establishes relationships between the component and label(s) where its value should be one or more element IDs. | | ariaLabel | string | - | Defines a string that labels the input for accessibility. | | iconAriaLabel | string | - | Defines a string that labels the icon button for accessibility. | | dateFormat | string | - | Format of the date which can also be defined at locale settings. | | multipleSeparator | string | - | Separator for multiple selection mode. | | rangeSeparator | string | - | Separator for joining start and end dates on range selection mode. | | inline | boolean | - | When enabled, displays the datepicker as inline. Default is false for popup mode. | | showOtherMonths | boolean | - | Whether to display dates in other months (non-selectable) at the start or end of the current month. To make these days selectable use the selectOtherMonths option. | | selectOtherMonths | boolean | - | Whether days in other months shown before or after the current month are selectable. This only applies if the showOtherMonths option is set to true. | | showIcon | boolean | - | When enabled, displays a button with icon next to input. | | icon | string | - | Icon of the datepicker button. | | readonlyInput | boolean | - | When specified, prevents entering the date manually with keyboard. | | shortYearCutoff | any | - | The cutoff year for determining the century for a date. | | hourFormat | string | - | Specifies 12 or 24 hour format. | | timeOnly | boolean | - | Whether to display timepicker only. | | stepHour | number | - | Hours to change per step. | | stepMinute | number | - | Minutes to change per step. | | stepSecond | number | - | Seconds to change per step. | | showSeconds | boolean | - | Whether to show the seconds in time picker. | | showOnFocus | boolean | - | When disabled, datepicker will not be visible with input focus. | | showWeek | boolean | - | When enabled, datepicker will show week numbers. | | startWeekFromFirstDayOfYear | boolean | - | When enabled, datepicker will start week numbers from first day of the year. | | showClear | boolean | - | When enabled, a clear icon is displayed to clear the value. | | dataType | string | - | Type of the value to write back to ngModel, default is date and alternative is string. | | selectionMode | "single" \| "multiple" \| "range" | - | Defines the quantity of the selection, valid values are "single", "multiple" and "range". | | maxDateCount | number | - | Maximum number of selectable dates in multiple mode. | | showButtonBar | boolean | - | Whether to display today and clear buttons at the footer | | todayButtonStyleClass | string | - | Style class of the today button. | | clearButtonStyleClass | string | - | Style class of the clear button. | | autofocus | boolean | - | When present, it specifies that the component should automatically get focus on load. | | autoZIndex | boolean | - | Whether to automatically manage layering. | | baseZIndex | number | - | Base zIndex value to use in layering. | | panelStyleClass | string | - | Style class of the datetimepicker container element. | | panelStyle | any | - | Inline style of the datetimepicker container element. | | keepInvalid | boolean | - | Keep invalid value when input blur. | | hideOnDateTimeSelect | boolean | - | Whether to hide the overlay on date selection. | | touchUI | boolean | - | When enabled, datepicker overlay is displayed as optimized for touch devices. | | timeSeparator | string | - | Separator of time selector. | | focusTrap | boolean | - | When enabled, can only focus on elements inside the datepicker. | | tabindex | number | - | Index of the element in tabbing order. | | minDate | Date | - | The minimum selectable date. | | maxDate | Date | - | The maximum selectable date. | | disabledDates | Date[] | - | Array with dates that should be disabled (not selectable). | | disabledDays | number[] | - | Array with weekday numbers that should be disabled (not selectable). | | showTime | boolean | - | Whether to display timepicker. | | responsiveOptions | DatePickerResponsiveOptions[] | - | An array of options for responsive design. | | numberOfMonths | number | - | Number of months to display. | | firstDayOfWeek | number | - | Defines the first of the week for various date calculations. | | view | "date" \| "month" \| "year" | - | Type of view to display, valid values are "date" for datepicker and "month" for month picker. | | defaultDate | Date | - | Set the date to highlight on first opening if the field is blank. | | appendTo | HTMLElement \| ElementRef \| TemplateRef \| "self" \| "body" \| null \| undefined | 'self' | Target element to attach the overlay, valid values are "body" or a local ng-template variable of another element (note: use binding with brackets for template variables, e.g. [appendTo]="mydiv" for a div element having #mydiv as variable name). | | motionOptions | MotionOptions | - | The motion options. | ### Emits | Name | Parameters | Description | |------|------------|-------------| | onFocus | event: Event | Callback to invoke on focus of input field. | | onBlur | event: Event | Callback to invoke on blur of input field. | | onClose | value: HTMLElement | Callback to invoke when date panel closed. | | onSelect | value: Date | Callback to invoke on date select. | | onClear | value: any | Callback to invoke when input field cleared. | | onInput | value: any | Callback to invoke when input field is being typed. | | onTodayClick | value: Date | Callback to invoke when today button is clicked. | | onClearClick | value: any | Callback to invoke when clear button is clicked. | | onMonthChange | event: DatePickerMonthChangeEvent | Callback to invoke when a month is changed using the navigators. | | onYearChange | event: DatePickerYearChangeEvent | Callback to invoke when a year is changed using the navigators. | | onClickOutside | value: any | Callback to invoke when clicked outside of the date panel. | | onShow | value: HTMLElement | Callback to invoke when datepicker panel is shown. | ### Templates | Name | Type | Description | |------|------|-------------| | date | TemplateRef | Custom template for date cells. | | header | TemplateRef | Custom template for header section. | | footer | TemplateRef | Custom template for footer section. | | disableddate | TemplateRef | Custom template for disabled date cells. | | decade | TemplateRef | Custom template for decade view. | | previousicon | TemplateRef | Custom template for previous month icon. | | nexticon | TemplateRef | Custom template for next month icon. | | triggericon | TemplateRef | Custom template for trigger icon. | | clearicon | TemplateRef | Custom template for clear icon. | | decrementicon | TemplateRef | Custom template for decrement icon. | | incrementicon | TemplateRef | Custom template for increment icon. | | inputicon | TemplateRef | Custom template for input icon. | | buttonbar | TemplateRef | Custom template for button bar. | ## Pass Through Options | Name | Type | Description | |------|------|-------------| | root | PassThroughOption | Used to pass attributes to the root's DOM element. | | pcInputText | InputTextPassThrough | Used to pass attributes to the InputText component. | | dropdown | PassThroughOption | Used to pass attributes to the dropdown button's DOM element. | | dropdownIcon | PassThroughOption | Used to pass attributes to the dropdown icon's DOM element. | | inputIconContainer | PassThroughOption | Used to pass attributes to the input icon container's DOM element. | | inputIcon | PassThroughOption | Used to pass attributes to the input icon's DOM element. | | panel | PassThroughOption | Used to pass attributes to the panel's DOM element. | | calendarContainer | PassThroughOption | Used to pass attributes to the calendar container's DOM element. | | calendar | PassThroughOption | Used to pass attributes to the calendar's DOM element. | | header | PassThroughOption | Used to pass attributes to the header's DOM element. | | pcPrevButton | ButtonPassThrough | Used to pass attributes to the previous button component. | | title | PassThroughOption | Used to pass attributes to the title's DOM element. | | selectMonth | PassThroughOption | Used to pass attributes to the select month's DOM element. | | selectYear | PassThroughOption | Used to pass attributes to the select year's DOM element. | | decade | PassThroughOption | Used to pass attributes to the decade's DOM element. | | pcNextButton | ButtonPassThrough | Used to pass attributes to the next button component. | | dayView | PassThroughOption | Used to pass attributes to the day view's DOM element. | | table | PassThroughOption | Used to pass attributes to the table's DOM element. | | tableHeader | PassThroughOption | Used to pass attributes to the table header's DOM element. | | tableHeaderRow | PassThroughOption | Used to pass attributes to the table header row's DOM element. | | weekHeader | PassThroughOption | Used to pass attributes to the week header's DOM element. | | weekHeaderLabel | PassThroughOption | Used to pass attributes to the week header label's DOM element. | | tableHeaderCell | PassThroughOption | Used to pass attributes to the table header cell's DOM element. | | weekDayCell | PassThroughOption | Used to pass attributes to the week day cell's DOM element. | | weekDay | PassThroughOption | Used to pass attributes to the week day's DOM element. | | tableBody | PassThroughOption | Used to pass attributes to the table body's DOM element. | | tableBodyRow | PassThroughOption | Used to pass attributes to the table body row's DOM element. | | weekNumber | PassThroughOption | Used to pass attributes to the week number's DOM element. | | weekLabelContainer | PassThroughOption | Used to pass attributes to the week label container's DOM element. | | dayCell | PassThroughOption | Used to pass attributes to the day cell's DOM element. | | day | PassThroughOption | Used to pass attributes to the day's DOM element. | | monthView | PassThroughOption | Used to pass attributes to the month view's DOM element. | | month | PassThroughOption | Used to pass attributes to the month's DOM element. | | yearView | PassThroughOption | Used to pass attributes to the year view's DOM element. | | year | PassThroughOption | Used to pass attributes to the year's DOM element. | | timePicker | PassThroughOption | Used to pass attributes to the time picker's DOM element. | | hourPicker | PassThroughOption | Used to pass attributes to the hour picker's DOM element. | | hour | PassThroughOption | Used to pass attributes to the hour's DOM element. | | separatorContainer | PassThroughOption | Used to pass attributes to the separator container's DOM element. | | separator | PassThroughOption | Used to pass attributes to the separator's DOM element. | | minutePicker | PassThroughOption | Used to pass attributes to the minute picker's DOM element. | | minute | PassThroughOption | Used to pass attributes to the minute's DOM element. | | secondPicker | PassThroughOption | Used to pass attributes to the second picker's DOM element. | | second | PassThroughOption | Used to pass attributes to the second's DOM element. | | ampmPicker | PassThroughOption | Used to pass attributes to the ampm picker's DOM element. | | ampm | PassThroughOption | Used to pass attributes to the ampm's DOM element. | | buttonbar | PassThroughOption | Used to pass attributes to the buttonbar's DOM element. | | pcIncrementButton | ButtonPassThrough | Used to pass attributes to the increment button component. | | pcDecrementButton | ButtonPassThrough | Used to pass attributes to the decrement button component. | | pcTodayButton | ButtonPassThrough | Used to pass attributes to the today button component. | | pcClearButton | ButtonPassThrough | Used to pass attributes to the clear button component. | | hiddenSelectedDay | PassThroughOption | Used to pass attributes to the hidden selected day's DOM element. | | hiddenMonth | PassThroughOption | Used to pass attributes to the hidden month's DOM element. | | hiddenYear | PassThroughOption | Used to pass attributes to the hidden year's DOM element. | | motion | MotionOptions | Used to pass options to the motion component/directive. | ## Theming ### CSS Classes | Class | Description | |-------|-------------| | p-datepicker | Class name of the root element | | p-datepicker-input | Class name of the input element | | p-datepicker-dropdown | Class name of the dropdown element | | p-datepicker-input-icon-container | Class name of the input icon container element | | p-datepicker-input-icon | Class name of the input icon element | | p-datepicker-panel | Class name of the panel element | | p-datepicker-calendar-container | Class name of the calendar container element | | p-datepicker-calendar | Class name of the calendar element | | p-datepicker-header | Class name of the header element | | p-datepicker-prev-button | Class name of the previous button element | | p-datepicker-title | Class name of the title element | | p-datepicker-select-month | Class name of the select month element | | p-datepicker-select-year | Class name of the select year element | | p-datepicker-decade | Class name of the decade element | | p-datepicker-next-button | Class name of the next button element | | p-datepicker-day-view | Class name of the day view element | | p-datepicker-weekheader | Class name of the week header element | | p-datepicker-weeknumber | Class name of the week number element | | p-datepicker-weeklabel-container | Class name of the week label container element | | p-datepicker-weekday-cell | Class name of the week day cell element | | p-datepicker-weekday | Class name of the week day element | | p-datepicker-day-cell | Class name of the day cell element | | p-datepicker-day | Class name of the day element | | p-datepicker-month-view | Class name of the month view element | | p-datepicker-month | Class name of the month element | | p-datepicker-year-view | Class name of the year view element | | p-datepicker-year | Class name of the year element | | p-datepicker-time-picker | Class name of the time picker element | | p-datepicker-hour-picker | Class name of the hour picker element | | p-datepicker-increment-button | Class name of the increment button element | | p-datepicker-decrement-button | Class name of the decrement button element | | p-datepicker-separator | Class name of the separator element | | p-datepicker-minute-picker | Class name of the minute picker element | | p-datepicker-second-picker | Class name of the second picker element | | p-datepicker-ampm-picker | Class name of the ampm picker element | | p-datepicker-buttonbar | Class name of the buttonbar element | | p-datepicker-today-button | Class name of the today button element | | p-datepicker-clear-button | Class name of the clear button element | | p-datepicker-clear-icon | Class name of the clear icon | ### Design Tokens | Token | CSS Variable | Description | |-------|--------------|-------------| | datepicker.transition.duration | --p-datepicker-transition-duration | Transition duration of root | | datepicker.panel.background | --p-datepicker-panel-background | Background of panel | | datepicker.panel.border.color | --p-datepicker-panel-border-color | Border color of panel | | datepicker.panel.color | --p-datepicker-panel-color | Color of panel | | datepicker.panel.border.radius | --p-datepicker-panel-border-radius | Border radius of panel | | datepicker.panel.shadow | --p-datepicker-panel-shadow | Shadow of panel | | datepicker.panel.padding | --p-datepicker-panel-padding | Padding of panel | | datepicker.header.background | --p-datepicker-header-background | Background of header | | datepicker.header.border.color | --p-datepicker-header-border-color | Border color of header | | datepicker.header.color | --p-datepicker-header-color | Color of header | | datepicker.header.padding | --p-datepicker-header-padding | Padding of header | | datepicker.title.gap | --p-datepicker-title-gap | Gap of title | | datepicker.title.font.weight | --p-datepicker-title-font-weight | Font weight of title | | datepicker.title.font.size | --p-datepicker-title-font-size | Font size of title | | datepicker.dropdown.width | --p-datepicker-dropdown-width | Width of dropdown | | datepicker.dropdown.sm.width | --p-datepicker-dropdown-sm-width | Sm width of dropdown | | datepicker.dropdown.lg.width | --p-datepicker-dropdown-lg-width | Lg width of dropdown | | datepicker.dropdown.border.color | --p-datepicker-dropdown-border-color | Border color of dropdown | | datepicker.dropdown.hover.border.color | --p-datepicker-dropdown-hover-border-color | Hover border color of dropdown | | datepicker.dropdown.active.border.color | --p-datepicker-dropdown-active-border-color | Active border color of dropdown | | datepicker.dropdown.border.radius | --p-datepicker-dropdown-border-radius | Border radius of dropdown | | datepicker.dropdown.focus.ring.width | --p-datepicker-dropdown-focus-ring-width | Focus ring width of dropdown | | datepicker.dropdown.focus.ring.style | --p-datepicker-dropdown-focus-ring-style | Focus ring style of dropdown | | datepicker.dropdown.focus.ring.color | --p-datepicker-dropdown-focus-ring-color | Focus ring color of dropdown | | datepicker.dropdown.focus.ring.offset | --p-datepicker-dropdown-focus-ring-offset | Focus ring offset of dropdown | | datepicker.dropdown.focus.ring.shadow | --p-datepicker-dropdown-focus-ring-shadow | Focus ring shadow of dropdown | | datepicker.dropdown.background | --p-datepicker-dropdown-background | Background of dropdown | | datepicker.dropdown.hover.background | --p-datepicker-dropdown-hover-background | Hover background of dropdown | | datepicker.dropdown.active.background | --p-datepicker-dropdown-active-background | Active background of dropdown | | datepicker.dropdown.color | --p-datepicker-dropdown-color | Color of dropdown | | datepicker.dropdown.hover.color | --p-datepicker-dropdown-hover-color | Hover color of dropdown | | datepicker.dropdown.active.color | --p-datepicker-dropdown-active-color | Active color of dropdown | | datepicker.input.icon.color | --p-datepicker-input-icon-color | Color of input icon | | datepicker.select.month.hover.background | --p-datepicker-select-month-hover-background | Hover background of select month | | datepicker.select.month.color | --p-datepicker-select-month-color | Color of select month | | datepicker.select.month.hover.color | --p-datepicker-select-month-hover-color | Hover color of select month | | datepicker.select.month.padding | --p-datepicker-select-month-padding | Padding of select month | | datepicker.select.month.border.radius | --p-datepicker-select-month-border-radius | Border radius of select month | | datepicker.select.month.font.weight | --p-datepicker-select-month-font-weight | Font weight of select month | | datepicker.select.month.font.size | --p-datepicker-select-month-font-size | Font size of select month | | datepicker.select.year.hover.background | --p-datepicker-select-year-hover-background | Hover background of select year | | datepicker.select.year.color | --p-datepicker-select-year-color | Color of select year | | datepicker.select.year.hover.color | --p-datepicker-select-year-hover-color | Hover color of select year | | datepicker.select.year.padding | --p-datepicker-select-year-padding | Padding of select year | | datepicker.select.year.border.radius | --p-datepicker-select-year-border-radius | Border radius of select year | | datepicker.select.year.font.weight | --p-datepicker-select-year-font-weight | Font weight of select year | | datepicker.select.year.font.size | --p-datepicker-select-year-font-size | Font size of select year | | datepicker.group.border.color | --p-datepicker-group-border-color | Border color of group | | datepicker.group.gap | --p-datepicker-group-gap | Gap of group | | datepicker.day.view.margin | --p-datepicker-day-view-margin | Margin of day view | | datepicker.week.day.padding | --p-datepicker-week-day-padding | Padding of week day | | datepicker.week.day.font.weight | --p-datepicker-week-day-font-weight | Font weight of week day | | datepicker.week.day.font.size | --p-datepicker-week-day-font-size | Font size of week day | | datepicker.week.day.color | --p-datepicker-week-day-color | Color of week day | | datepicker.date.hover.background | --p-datepicker-date-hover-background | Hover background of date | | datepicker.date.selected.background | --p-datepicker-date-selected-background | Selected background of date | | datepicker.date.range.selected.background | --p-datepicker-date-range-selected-background | Range selected background of date | | datepicker.date.color | --p-datepicker-date-color | Color of date | | datepicker.date.hover.color | --p-datepicker-date-hover-color | Hover color of date | | datepicker.date.selected.color | --p-datepicker-date-selected-color | Selected color of date | | datepicker.date.range.selected.color | --p-datepicker-date-range-selected-color | Range selected color of date | | datepicker.date.width | --p-datepicker-date-width | Width of date | | datepicker.date.height | --p-datepicker-date-height | Height of date | | datepicker.date.border.radius | --p-datepicker-date-border-radius | Border radius of date | | datepicker.date.padding | --p-datepicker-date-padding | Padding of date | | datepicker.date.focus.ring.width | --p-datepicker-date-focus-ring-width | Focus ring width of date | | datepicker.date.focus.ring.style | --p-datepicker-date-focus-ring-style | Focus ring style of date | | datepicker.date.focus.ring.color | --p-datepicker-date-focus-ring-color | Focus ring color of date | | datepicker.date.focus.ring.offset | --p-datepicker-date-focus-ring-offset | Focus ring offset of date | | datepicker.date.focus.ring.shadow | --p-datepicker-date-focus-ring-shadow | Focus ring shadow of date | | datepicker.date.font.weight | --p-datepicker-date-font-weight | Font weight of date | | datepicker.date.font.size | --p-datepicker-date-font-size | Font size of date | | datepicker.month.view.margin | --p-datepicker-month-view-margin | Margin of month view | | datepicker.month.padding | --p-datepicker-month-padding | Padding of month | | datepicker.month.border.radius | --p-datepicker-month-border-radius | Border radius of month | | datepicker.year.view.margin | --p-datepicker-year-view-margin | Margin of year view | | datepicker.year.padding | --p-datepicker-year-padding | Padding of year | | datepicker.year.border.radius | --p-datepicker-year-border-radius | Border radius of year | | datepicker.buttonbar.padding | --p-datepicker-buttonbar-padding | Padding of buttonbar | | datepicker.buttonbar.border.color | --p-datepicker-buttonbar-border-color | Border color of buttonbar | | datepicker.time.picker.padding | --p-datepicker-time-picker-padding | Padding of time picker | | datepicker.time.picker.border.color | --p-datepicker-time-picker-border-color | Border color of time picker | | datepicker.time.picker.gap | --p-datepicker-time-picker-gap | Gap of time picker | | datepicker.time.picker.button.gap | --p-datepicker-time-picker-button-gap | Button gap of time picker | | datepicker.time.picker.color | --p-datepicker-time-picker-color | Color of time picker label | | datepicker.time.picker.font.weight | --p-datepicker-time-picker-font-weight | Font weight of time picker label | | datepicker.time.picker.font.size | --p-datepicker-time-picker-font-size | Font size of time picker label | | datepicker.today.background | --p-datepicker-today-background | Background of today | | datepicker.today.color | --p-datepicker-today-color | Color of today | --- # Angular Dialog Component Dialog is a container to display content in an overlay window. ## Accessibility Screen Reader Dialog component uses dialog role along with aria-labelledby referring to the header element however any attribute is passed to the root element so you may use aria-labelledby to override this default behavior. In addition aria-modal is added since focus is kept within the popup. It is recommended to use a trigger component that can be accessed with keyboard such as a button, if not adding tabIndex would be necessary. Trigger element also requires aria-expanded and aria-controls to be handled explicitly. Close element is a button with an aria-label that refers to the aria.close property of the locale API by default, you may use closeButtonProps to customize the element and override the default aria-label . Maximize element is a button with an aria-label that refers to the aria.maximizeLabel and aria.minimizeLabel property of the locale API. It cannot be customized using the maximizeButtonProps . Overlay Keyboard Support Key Function tab Moves focus to the next the focusable element within the dialog. shift + tab Moves focus to the previous the focusable element within the dialog. escape Closes the dialog if closeOnEscape is true. Close Button Keyboard Support Key Function enter Closes the dialog. space Closes the dialog. ## Basic Dialog is used as a container and visibility is controlled with visible property. **Example:** ```typescript import { Component } from '@angular/core'; import { ButtonModule } from 'primeng/button'; import { DialogModule } from 'primeng/dialog'; import { InputTextModule } from 'primeng/inputtext'; @Component({ template: `
Update your information.
`, standalone: true, imports: [ButtonModule, DialogModule, InputTextModule] }) export class DialogBasicDemo { visible: boolean = false; showDialog() { this.visible = true; } } ``` ## Headless Headless mode allows you to customize the entire user interface instead of the default elements. **Example:** ```typescript import { Component } from '@angular/core'; import { ButtonModule } from 'primeng/button'; import { DialogModule } from 'primeng/dialog'; import { InputTextModule } from 'primeng/inputtext'; @Component({ template: `
`, standalone: true, imports: [ButtonModule, DialogModule, InputTextModule] }) export class DialogHeadlessDemo { visible: boolean = false; showDialog() { this.visible = true; } closeDialog() { this.visible = false; } } ``` ## Long Content Dialog automatically displays a scroller when content exceeds viewport. **Example:** ```typescript import { Component } from '@angular/core'; import { ButtonModule } from 'primeng/button'; import { DialogModule } from 'primeng/dialog'; @Component({ template: `

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.

`, standalone: true, imports: [ButtonModule, DialogModule] }) export class DialogLongContentDemo { visible: boolean = false; showDialog() { this.visible = true; } } ``` ## Maximizable Setting maximizable property to true enables the full screen mode. **Example:** ```typescript import { Component } from '@angular/core'; import { ButtonModule } from 'primeng/button'; import { DialogModule } from 'primeng/dialog'; @Component({ template: `

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

`, standalone: true, imports: [ButtonModule, DialogModule] }) export class DialogMaximizableDemo { visible: boolean = false; showDialog() { this.visible = true; } } ``` ## modal-doc Mask layer behind the Dialog can be turned on by setting the modal property to true . **Example:** ```typescript import { Component } from '@angular/core'; import { ButtonModule } from 'primeng/button'; import { Dialog, DialogModule } from 'primeng/dialog'; @Component({ template: `

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

`, standalone: true, imports: [ButtonModule, DialogModule] }) export class DialogModalDemo { visible: boolean = false; showDialog() { this.visible = true; } } ``` ## overlaysinside-doc When dialog includes other components with overlays such as dropdown, the overlay part cannot exceed dialog boundaries due to overflow. In order to solve this, you can either append the overlay to the body by using appendTo property or allow overflow in dialog. **Example:** ```typescript import { Component, OnInit } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { ButtonModule } from 'primeng/button'; import { DialogModule } from 'primeng/dialog'; import { SelectModule } from 'primeng/select'; interface City { name: string; code: string; } @Component({ template: `
`, standalone: true, imports: [ButtonModule, DialogModule, SelectModule, FormsModule] }) export class DialogOverlaysInsideDemo implements OnInit { cities: City[] | undefined; selectedCity: City | undefined; visible: boolean = false; ngOnInit() { this.cities = [ { name: 'New York', code: 'NY' }, { name: 'Rome', code: 'RM' }, { name: 'London', code: 'LDN' }, { name: 'Istanbul', code: 'IST' }, { name: 'Paris', code: 'PRS' } ]; } showDialog() { this.visible = true; } } ``` ## Position The position property is used to display a Dialog at all edges and corners of the screen. **Example:** ```typescript import { Component } from '@angular/core'; import { ButtonModule } from 'primeng/button'; import { Dialog, DialogModule } from 'primeng/dialog'; import { InputTextModule } from 'primeng/inputtext'; @Component({ template: `
Update your information.
`, standalone: true, imports: [ButtonModule, DialogModule, InputTextModule] }) export class DialogPositionDemo { visible: boolean = false; showDialog(position: 'left' | 'right' | 'top' | 'bottom' | 'center' | 'topleft' | 'topright' | 'bottomleft' | 'bottomright') { this.position = position; this.visible = true; } } ``` ## Responsive Dialog width can be adjusted per screen size with the breakpoints option where a key defines the max-width for the breakpoint and value for the corresponding width. When no breakpoint matches width defined in style property is used. **Example:** ```typescript import { Component } from '@angular/core'; import { ButtonModule } from 'primeng/button'; import { Dialog, DialogModule } from 'primeng/dialog'; @Component({ template: `

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

`, standalone: true, imports: [ButtonModule, DialogModule] }) export class DialogResponsiveDemo { visible: boolean = false; showDialog() { this.visible = true; } } ``` ## Template Dialog can be customized using header and footer templates. **Example:** ```typescript import { Component } from '@angular/core'; import { AvatarModule } from 'primeng/avatar'; import { ButtonModule } from 'primeng/button'; import { DialogModule } from 'primeng/dialog'; import { InputTextModule } from 'primeng/inputtext'; @Component({ template: `
Amy Elsner
Update your information.
`, standalone: true, imports: [AvatarModule, ButtonModule, DialogModule, InputTextModule] }) export class DialogTemplateDemo { visible: boolean = false; showDialog() { this.visible = true; } } ``` ## Without Modal Mask layer behind the Dialog is configured with the modal property. By default, no modal layer is added. **Example:** ```typescript import { Component } from '@angular/core'; import { ButtonModule } from 'primeng/button'; import { Dialog, DialogModule } from 'primeng/dialog'; import { InputTextModule } from 'primeng/inputtext'; @Component({ template: `
Update your information.
`, standalone: true, imports: [ButtonModule, DialogModule, InputTextModule] }) export class DialogWithoutModalDemo { visible: boolean = false; showDialog() { this.visible = true; } } ``` ## Dialog Dialog is a container to display content in an overlay window. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | | header | string | - | Title text of the dialog. | | draggable | boolean | - | Enables dragging to change the position using header. | | resizable | boolean | - | Enables resizing of the content. | | contentStyle | Partial | - | Style of the content section. | | contentStyleClass | string | - | Style class of the content. | | modal | boolean | - | Defines if background should be blocked when dialog is displayed. | | closeOnEscape | boolean | - | Specifies if pressing escape key should hide the dialog. | | dismissableMask | boolean | - | Specifies if clicking the modal background should hide the dialog. | | rtl | boolean | - | When enabled dialog is displayed in RTL direction. | | closable | boolean | - | Adds a close icon to the header to hide the dialog. | | breakpoints | Record | - | Object literal to define widths per screen size. | | styleClass | string | - | Style class of the component. | | maskStyleClass | string | - | Style class of the mask. | | maskStyle | Partial | - | Style of the mask. | | showHeader | boolean | - | Whether to show the header or not. | | blockScroll | boolean | - | Whether background scroll should be blocked when dialog is visible. | | autoZIndex | boolean | - | Whether to automatically manage layering. | | baseZIndex | number | - | Base zIndex value to use in layering. | | minX | number | - | Minimum value for the left coordinate of dialog in dragging. | | minY | number | - | Minimum value for the top coordinate of dialog in dragging. | | focusOnShow | boolean | - | When enabled, first focusable element receives focus on show. | | maximizable | boolean | - | Whether the dialog can be displayed full screen. | | keepInViewport | boolean | - | Keeps dialog in the viewport. | | focusTrap | boolean | - | When enabled, can only focus on elements inside the dialog. | | maskMotionOptions | MotionOptions | - | The motion options for the mask. | | motionOptions | MotionOptions | - | The motion options. | | closeIcon | string | - | Name of the close icon. | | closeAriaLabel | string | - | Defines a string that labels the close button for accessibility. | | closeTabindex | string | - | Index of the close button in tabbing order. | | minimizeIcon | string | - | Name of the minimize icon. | | maximizeIcon | string | - | Name of the maximize icon. | | closeButtonProps | ButtonProps | - | Used to pass all properties of the ButtonProps to the Button component. | | maximizeButtonProps | ButtonProps | - | Used to pass all properties of the ButtonProps to the Button component. | | visible | boolean | - | Specifies the visibility of the dialog. | | style | Partial | - | Inline style of the component. | | position | "center" \| "top" \| "bottom" \| "left" \| "right" \| "topleft" \| "topright" \| "bottomleft" \| "bottomright" | - | Position of the dialog, options are "center", "top", "bottom", "left", "right", "topleft", "topright", "bottomleft" or "bottomright". | | appendTo | HTMLElement \| ElementRef \| TemplateRef \| "self" \| "body" \| null \| undefined | 'self' | Target element to attach the overlay, valid values are "body" or a local ng-template variable of another element (note: use binding with brackets for template variables, e.g. [appendTo]="mydiv" for a div element having #mydiv as variable name). | ### Emits | Name | Parameters | Description | |------|------------|-------------| | role | value: string | Role attribute of html element. | | onShow | value: any | Callback to invoke when dialog is shown. | | onHide | value: any | Callback to invoke when dialog is hidden. | | onResizeInit | event: MouseEvent | Callback to invoke when dialog resizing is initiated. | | onResizeEnd | event: MouseEvent | Callback to invoke when dialog resizing is completed. | | onDragEnd | event: DragEvent | Callback to invoke when dialog dragging is completed. | | onMaximize | value: { maximized: boolean } | Callback to invoke when dialog maximized or unmaximized. | ### Templates | Name | Type | Description | |------|------|-------------| | header | TemplateRef | Custom header template. | | content | TemplateRef | Custom content template. | | footer | TemplateRef | Custom footer template. | | closeicon | TemplateRef | Custom close icon template. | | maximizeicon | TemplateRef | Custom maximize icon template. | | minimizeicon | TemplateRef | Custom minimize icon template. | | headless | TemplateRef | Custom headless template. | ## Pass Through Options | Name | Type | Description | |------|------|-------------| | host | PassThroughOption | Used to pass attributes to the host's DOM element. | | root | PassThroughOption | Used to pass attributes to the root's DOM element. | | mask | PassThroughOption | Used to pass attributes to the mask's DOM element. | | resizeHandle | PassThroughOption | Used to pass attributes to the resize handle's DOM element. | | header | PassThroughOption | Used to pass attributes to the header's DOM element. | | title | PassThroughOption | Used to pass attributes to the title's DOM element. | | headerActions | PassThroughOption | Used to pass attributes to the header actions' DOM element. | | pcMaximizeButton | ButtonPassThrough | Used to pass attributes to the maximize Button component. | | pcCloseButton | ButtonPassThrough | Used to pass attributes to the close Button component. | | content | PassThroughOption | Used to pass attributes to the content's DOM element. | | footer | PassThroughOption | Used to pass attributes to the footer's DOM element. | | motion | MotionOptions | Used to pass motion options for the dialog animation. | | maskMotion | MotionOptions | Used to pass motion options for the mask animation. | ## Theming ### CSS Classes | Class | Description | |-------|-------------| | p-dialog-mask | Class name of the mask element | | p-dialog | Class name of the root element | | p-dialog-header | Class name of the header element | | p-dialog-title | Class name of the title element | | p-dialog-header-actions | Class name of the header actions element | | p-dialog-maximize-button | Class name of the maximize button element | | p-dialog-close-button | Class name of the close button element | | p-dialog-content | Class name of the content element | | p-dialog-footer | Class name of the footer element | ### Design Tokens | Token | CSS Variable | Description | |-------|--------------|-------------| | dialog.background | --p-dialog-background | Background of root | | dialog.border.color | --p-dialog-border-color | Border color of root | | dialog.color | --p-dialog-color | Color of root | | dialog.border.radius | --p-dialog-border-radius | Border radius of root | | dialog.shadow | --p-dialog-shadow | Shadow of root | | dialog.header.padding | --p-dialog-header-padding | Padding of header | | dialog.header.gap | --p-dialog-header-gap | Gap of header | | dialog.title.font.size | --p-dialog-title-font-size | Font size of title | | dialog.title.font.weight | --p-dialog-title-font-weight | Font weight of title | | dialog.content.padding | --p-dialog-content-padding | Padding of content | | dialog.footer.padding | --p-dialog-footer-padding | Padding of footer | | dialog.footer.gap | --p-dialog-footer-gap | Gap of footer | --- # Angular Divider Component Divider is used to separate contents. ## Accessibility Screen Reader Divider uses a separator role with aria-orientation set to either "horizontal" or "vertical". Keyboard Support Component does not include any interactive elements. ## Basic Divider is basically placed between the items to separate. **Example:** ```typescript import { Component } from '@angular/core'; import { DividerModule } from 'primeng/divider'; @Component({ template: `

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.

Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. Donec vel volutpat ipsum. Integer nunc magna, posuere ut tincidunt eget, egestas vitae sapien. Morbi dapibus luctus odio.

`, standalone: true, imports: [DividerModule] }) export class DividerBasicDemo {} ``` ## Content Children are rendered within the boundaries of the divider where location of the content is configured with the align property. In horizontal layout, alignment options are left , center and right whereas vertical mode supports top , center and bottom . **Example:** ```typescript import { Component } from '@angular/core'; import { DividerModule } from 'primeng/divider'; @Component({ template: `

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Left

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.

Center

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.

Right

Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. Donec vel volutpat ipsum. Integer nunc magna, posuere ut tincidunt eget, egestas vitae sapien. Morbi dapibus luctus odio.

`, standalone: true, imports: [DividerModule] }) export class DividerContentDemo {} ``` ## Login Sample implementation of a login form using a divider with content. **Example:** ```typescript import { Component } from '@angular/core'; import { ButtonModule } from 'primeng/button'; import { DividerModule } from 'primeng/divider'; import { InputTextModule } from 'primeng/inputtext'; @Component({ template: `
OR OR
`, standalone: true, imports: [ButtonModule, DividerModule, InputTextModule] }) export class DividerLoginDemo {} ``` ## Type Style of the border is configured with the type property that can either be solid , dotted or dashed . **Example:** ```typescript import { Component } from '@angular/core'; import { DividerModule } from 'primeng/divider'; @Component({ template: `

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.

Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. Donec vel volutpat ipsum. Integer nunc magna, posuere ut tincidunt eget, egestas vitae sapien. Morbi dapibus luctus odio.

`, standalone: true, imports: [DividerModule] }) export class DividerTypeDemo {} ``` ## Vertical Vertical divider is enabled by setting the layout property as vertical . **Example:** ```typescript import { Component } from '@angular/core'; import { DividerModule } from 'primeng/divider'; @Component({ template: `

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.

`, standalone: true, imports: [DividerModule] }) export class DividerVerticalDemo {} ``` ## Divider Divider is used to separate contents. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | | layout | "horizontal" \| "vertical" | - | Specifies the orientation. | | type | "solid" \| "dashed" \| "dotted" | - | Border style type. | | align | "left" \| "center" \| "right" \| "top" \| "bottom" | - | Alignment of the content. | ## Pass Through Options | Name | Type | Description | |------|------|-------------| | root | PassThroughOption | Used to pass attributes to the root's DOM element. | | content | PassThroughOption | Used to pass attributes to the content's DOM element. | ## Theming ### CSS Classes | Class | Description | |-------|-------------| | p-divider | Class name of the root element | | p-divider-content | Class name of the content element | ### Design Tokens | Token | CSS Variable | Description | |-------|--------------|-------------| | divider.border.color | --p-divider-border-color | Border color of root | | divider.content.background | --p-divider-content-background | Background of content | | divider.content.color | --p-divider-content-color | Color of content | | divider.horizontal.margin | --p-divider-horizontal-margin | Margin of horizontal | | divider.horizontal.padding | --p-divider-horizontal-padding | Padding of horizontal | | divider.horizontal.content.padding | --p-divider-horizontal-content-padding | Content padding of horizontal | | divider.vertical.margin | --p-divider-vertical-margin | Margin of vertical | | divider.vertical.padding | --p-divider-vertical-padding | Padding of vertical | | divider.vertical.content.padding | --p-divider-vertical-content-padding | Content padding of vertical | --- # Angular Dock Component Dock is a navigation component consisting of menuitems. ## Accessibility Screen Reader Dock component uses the menu role with the aria-orientation and the value to describe the menu can either be provided with aria-labelledby or aria-label props. Each list item has a presentation role whereas anchor elements have a menuitem role with aria-label referring to the label of the item and aria-disabled defined if the item is disabled. Keyboard Support Key Function tab Add focus to the first item if focus moves in to the menu. If the focus is already within the menu, focus moves to the next focusable item in the page tab sequence. shift + tab Add focus to the last item if focus moves in to the menu. If the focus is already within the menu, focus moves to the previous focusable item in the page tab sequence. enter Activates the focused menuitem. space Activates the focused menuitem. down arrow Moves focus to the next menuitem in vertical layout. up arrow Moves focus to the previous menuitem in vertical layout. home Moves focus to the first menuitem in horizontal layout. end Moves focus to the last menuitem in horizontal layout. ## Advanced A mock desktop UI implemented with various components in addition to Dock. **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { DialogModule } from 'primeng/dialog'; import { DockModule } from 'primeng/dock'; import { GalleriaModule } from 'primeng/galleria'; import { MenubarModule } from 'primeng/menubar'; import { TerminalModule } from 'primeng/terminal'; import { ToastModule } from 'primeng/toast'; import { TreeModule } from 'primeng/tree'; import { TooltipModule } from 'primeng/tooltip'; import { NodeService } from '@/service/nodeservice'; import { PhotoService } from '@/service/photoservice'; import { MenuItem, MessageService } from 'primeng/api'; @Component({ template: `
Fri 13:07
`, standalone: true, imports: [DialogModule, DockModule, GalleriaModule, MenubarModule, TerminalModule, ToastModule, TreeModule, TooltipModule], providers: [NodeService, PhotoService, MessageService] }) export class DockAdvancedDemo implements OnInit { private nodeService = inject(NodeService); private photoService = inject(PhotoService); private messageService = inject(MessageService); displayTerminal: boolean | undefined; displayFinder: boolean | undefined; displayGalleria: boolean | undefined; dockItems: MenuItem[] | undefined; menubarItems: any[] | undefined; responsiveOptions: any[] | undefined; images: any[] | undefined; nodes: any[] | undefined; subscription: Subscription | undefined; ngOnInit() { this.dockItems = [ { label: 'Finder', tooltipOptions: { tooltipLabel: 'Finder', tooltipPosition: 'top', positionTop: -15, positionLeft: 15, showDelay: 1000 }, icon: 'https://primefaces.org/cdn/primeng/images/dock/finder.svg', command: () => { this.displayFinder = true; } }, { label: 'Terminal', tooltipOptions: { tooltipLabel: 'Terminal', tooltipPosition: 'top', positionTop: -15, positionLeft: 15, showDelay: 1000 }, icon: 'https://primefaces.org/cdn/primeng/images/dock/terminal.svg', command: () => { this.displayTerminal = true; } }, { label: 'App Store', tooltipOptions: { tooltipLabel: 'App Store', tooltipPosition: 'top', positionTop: -15, positionLeft: 15, showDelay: 1000 }, icon: 'https://primefaces.org/cdn/primeng/images/dock/appstore.svg', url: 'https://www.apple.com/app-store/' }, { label: 'Safari', tooltipOptions: { tooltipLabel: 'Safari', tooltipPosition: 'top', positionTop: -15, positionLeft: 15, showDelay: 1000 }, icon: 'https://primefaces.org/cdn/primeng/images/dock/safari.svg' }, { label: 'Photos', tooltipOptions: { tooltipLabel: 'Photos', tooltipPosition: 'top', positionTop: -15, positionLeft: 15, showDelay: 1000 }, icon: 'https://primefaces.org/cdn/primeng/images/dock/photos.svg', command: () => { this.displayGalleria = true; } }, { label: 'GitHub', tooltipOptions: { tooltipLabel: 'GitHub', tooltipPosition: 'top', positionTop: -15, positionLeft: 15, showDelay: 1000 }, icon: 'https://primefaces.org/cdn/primeng/images/dock/github.svg', url: 'https://github.com/primefaces/primeng' }, { label: 'Trash', tooltipOptions: { tooltipLabel: 'Trash', tooltipPosition: 'top', positionTop: -15, positionLeft: 15, showDelay: 1000 }, icon: 'https://primefaces.org/cdn/primeng/images/dock/trash.png', command: () => { this.messageService.add({ severity: 'info', summary: 'Trash is empty', key: 'tc' }); } } ]; this.menubarItems = [ { label: 'Finder', styleClass: 'menubar-root' }, { label: 'File', items: [ { label: 'New', icon: 'pi pi-fw pi-plus', items: [ { label: 'Bookmark', icon: 'pi pi-fw pi-bookmark' }, { label: 'Video', icon: 'pi pi-fw pi-video' } ] }, { label: 'Delete', icon: 'pi pi-fw pi-trash' }, { separator: true }, { label: 'Export', icon: 'pi pi-fw pi-external-link' } ] }, { label: 'Edit', items: [ { label: 'Left', icon: 'pi pi-fw pi-align-left' }, { label: 'Right', icon: 'pi pi-fw pi-align-right' }, { label: 'Center', icon: 'pi pi-fw pi-align-center' }, { label: 'Justify', icon: 'pi pi-fw pi-align-justify' } ] }, { label: 'Users', items: [ { label: 'New', icon: 'pi pi-fw pi-user-plus' }, { label: 'Delete', icon: 'pi pi-fw pi-user-minus' }, { label: 'Search', icon: 'pi pi-fw pi-users', items: [ { label: 'Filter', icon: 'pi pi-fw pi-filter', items: [ { label: 'Print', icon: 'pi pi-fw pi-print' } ] }, { icon: 'pi pi-fw pi-bars', label: 'List' } ] } ] }, { label: 'Events', items: [ { label: 'Edit', icon: 'pi pi-fw pi-pencil', items: [ { label: 'Save', icon: 'pi pi-fw pi-calendar-plus' }, { label: 'Delete', icon: 'pi pi-fw pi-calendar-minus' } ] }, { label: 'Archieve', icon: 'pi pi-fw pi-calendar-times', items: [ { label: 'Remove', icon: 'pi pi-fw pi-calendar-minus' } ] } ] }, { label: 'Quit' } ]; this.responsiveOptions = [ { breakpoint: '1024px', numVisible: 3 }, { breakpoint: '768px', numVisible: 2 }, { breakpoint: '560px', numVisible: 1 } ]; this.subscription = this.terminalService.commandHandler.subscribe((command) => this.commandHandler(command)); this.galleriaService.getImages().then((data) => (this.images = data)); this.nodeService.getFiles().then((data) => (this.nodes = data)); } commandHandler(text: any) { let response; let argsIndex = text.indexOf(' '); let command = argsIndex !== -1 ? text.substring(0, argsIndex) : text; switch (command) { case 'date': response = 'Today is ' + new Date().toDateString(); break; case 'greet': response = 'Hola ' + text.substring(argsIndex + 1) + '!'; break; case 'random': response = Math.floor(Math.random() * 100); break; default: response = 'Unknown command: ' + command; break; } if (response) { this.terminalService.sendResponse(response as string); } } ngOnDestroy() { if (this.subscription) { this.subscription.unsubscribe(); } } } ``` ## Basic Dock requires a collection of menuitems as its model . Default location is bottom and other sides are also available when defined with the position property. Content of the dock component is defined by item template. **Example:** ```typescript import { Component, OnInit } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { DockModule } from 'primeng/dock'; import { RadioButtonModule } from 'primeng/radiobutton'; import { TooltipModule } from 'primeng/tooltip'; import { MenuItem } from 'primeng/api'; @Component({ template: `
@for (pos of positionOptions; track pos.value) {
}
`, standalone: true, imports: [DockModule, RadioButtonModule, TooltipModule, FormsModule] }) export class DockBasicDemo implements OnInit { items: MenuItem[] | undefined; positionOptions: any[] = [ { label: 'Bottom', value: 'bottom' }, { label: 'Top', value: 'top' }, { label: 'Left', value: 'left' }, { label: 'Right', value: 'right' } ]; ngOnInit() { this.items = [ { label: 'Finder', icon: 'https://primefaces.org/cdn/primeng/images/dock/finder.svg' }, { label: 'App Store', icon: 'https://primefaces.org/cdn/primeng/images/dock/appstore.svg' }, { label: 'Photos', icon: 'https://primefaces.org/cdn/primeng/images/dock/photos.svg' }, { label: 'Trash', icon: 'https://primefaces.org/cdn/primeng/images/dock/trash.png' } ]; } } ``` ## Dock Dock is a navigation component consisting of menuitems. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | | id | string | - | Current id state as a string. | | model | MenuItem[] | - | MenuModel instance to define the action items. | | position | "bottom" \| "top" \| "left" \| "right" | - | Position of element. | | ariaLabel | string | - | Defines a string that labels the input for accessibility. | | breakpoint | string | 960px | The breakpoint to define the maximum width boundary. | | ariaLabelledBy | string | - | Defines a string that labels the dropdown button for accessibility. | ### Emits | Name | Parameters | Description | |------|------------|-------------| | onFocus | event: FocusEvent | Callback to execute when button is focused. | | onBlur | event: FocusEvent | Callback to invoke when the component loses focus. | ### Templates | Name | Type | Description | |------|------|-------------| | item | TemplateRef | Custom item template. | ## Pass Through Options | Name | Type | Description | |------|------|-------------| | root | PassThroughOption | Used to pass attributes to the root's DOM element. | | listContainer | PassThroughOption | Used to pass attributes to the list container's DOM element. | | list | PassThroughOption | Used to pass attributes to the list's DOM element. | | item | PassThroughOption | Used to pass attributes to the item's DOM element. | | itemContent | PassThroughOption | Used to pass attributes to the item content's DOM element. | | itemLink | PassThroughOption | Used to pass attributes to the item link's DOM element. | | itemIcon | PassThroughOption | Used to pass attributes to the item icon's DOM element. | ## Theming ### CSS Classes | Class | Description | |-------|-------------| | p-dock | Class name of the root element | | p-dock-list-container | Class name of the list container element | | p-dock-list | Class name of the list element | | p-dock-item | Class name of the item element | | p-dock-item-content | Class name of the item content element | | p-dock-item-link | Class name of the item link element | | p-dock-item-icon | Class name of the item icon element | ### Design Tokens | Token | CSS Variable | Description | |-------|--------------|-------------| | dock.background | --p-dock-background | Background of root | | dock.border.color | --p-dock-border-color | Border color of root | | dock.padding | --p-dock-padding | Padding of root | | dock.border.radius | --p-dock-border-radius | Border radius of root | | dock.item.border.radius | --p-dock-item-border-radius | Border radius of item | | dock.item.padding | --p-dock-item-padding | Padding of item | | dock.item.size | --p-dock-item-size | Size of item | | dock.item.focus.ring.width | --p-dock-item-focus-ring-width | Focus ring width of item | | dock.item.focus.ring.style | --p-dock-item-focus-ring-style | Focus ring style of item | | dock.item.focus.ring.color | --p-dock-item-focus-ring-color | Focus ring color of item | | dock.item.focus.ring.offset | --p-dock-item-focus-ring-offset | Focus ring offset of item | | dock.item.focus.ring.shadow | --p-dock-item-focus-ring-shadow | Focus ring shadow of item | --- # Angular Drag and Drop Component pDraggable and pDroppable directives apply drag-drop behaviors to any element. ## Basic pDraggable and pDroppable are attached to a target element to add drag-drop behavior. The value of a Directive attribute is required and it defines the scope to match draggables with droppables. Droppable scope can also be an array to accept multiple droppables. **Example:** ```typescript import { Component, OnInit } from '@angular/core'; import { Product } from '@/domain/product'; @Component({ template: `
    @for (product of availableProducts; track product.id) {
  • {{ product.name }}
    • }

Drop Zone

@if (selectedProducts) {
    @for (product of selectedProducts; track product.id) {
  • {{ product.name }}
    • }
}
`, standalone: true, imports: [] }) export class DragDropBasicDemo implements OnInit { availableProducts: Product[] | undefined; selectedProducts: Product[] | undefined; draggedProduct: Product | undefined | null; ngOnInit() { this.selectedProducts = []; this.availableProducts = [ { id: '1', name: 'Black Watch' }, { id: '2', name: 'Bamboo Watch' } ]; } dragStart(product: Product) { this.draggedProduct = product; } drop() { if (this.draggedProduct) { let draggedProductIndex = this.findIndex(this.draggedProduct); this.selectedProducts = [...(this.selectedProducts as Product[]), this.draggedProduct]; this.availableProducts = this.availableProducts?.filter((val, i) => i != draggedProductIndex); this.draggedProduct = null; } } dragEnd() { this.draggedProduct = null; } findIndex(product: Product) { let index = -1; for (let i = 0; i < (this.availableProducts as Product[]).length; i++) { if (product.id === (this.availableProducts as Product[])[i].id) { index = i; break; } } return index; } } ``` ## DataTable Drag and Drop to Table **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { Table, TableModule } from 'primeng/table'; import { TagModule } from 'primeng/tag'; import { ProductService } from '@/service/productservice'; import { Product } from '@/domain/product'; @Component({ template: `
@for (product of availableProducts; track product.id) {
{{ product.name }}
{{ product.category }}
{{ product.price }}
}
ID Category Name Price {{ product.id }} {{ product.category }} {{ product.name }} {{ product.price }}
`, standalone: true, imports: [TableModule, TagModule], providers: [ProductService] }) export class DragDropDataTableDemo implements OnInit { private productService = inject(ProductService); availableProducts: Product[] | undefined; selectedProducts: Product[] | undefined; draggedProduct: Product | undefined | null; ngOnInit() { this.selectedProducts = []; this.productService.getProductsSmall().then((products) => (this.availableProducts = products)); } dragStart(product: Product) { this.draggedProduct = product; } drop() { if (this.draggedProduct) { let draggedProductIndex = this.findIndex(this.draggedProduct); this.selectedProducts = [...(this.selectedProducts as Product[]), this.draggedProduct]; this.availableProducts = this.availableProducts?.filter((val, i) => i != draggedProductIndex); this.draggedProduct = null; } } dragEnd() { this.draggedProduct = null; } findIndex(product: Product) { let index = -1; for (let i = 0; i < (this.availableProducts as Product[]).length; i++) { if (product.id === (this.availableProducts as Product[])[i].id) { index = i; break; } } return index; } getSeverity(status: string) { switch (status) { case 'INSTOCK': return 'success'; case 'LOWSTOCK': return 'warn'; case 'OUTOFSTOCK': return 'danger'; } } } ``` ## Drag Handle dragHandle is used to restrict dragging unless mousedown occurs on the specified element. Panel below can only be dragged using its header. **Example:** ```typescript import { Component } from '@angular/core'; import { PanelModule } from 'primeng/panel'; import { Product } from '@/domain/product'; @Component({ template: `
Content
`, standalone: true, imports: [PanelModule] }) export class DragDropDragHandleDemo {} ``` ## Drop Indicator When a suitable draggable enters a droppable area, the area gets p-draggable-enter class that can be used to style the droppable section. **Example:** ```typescript import { Component, OnInit } from '@angular/core'; import { Product } from '@/domain/product'; @Component({ template: `
    @for (product of availableProducts; track product.id) {
  • {{ product.name }}
    • }

Drop Zone

@if (selectedProducts) {
    @for (product of selectedProducts; track product.id) {
  • {{ product.name }}
    • }
}
`, standalone: true, imports: [] }) export class DragDropDropIndicatorDemo implements OnInit { availableProducts: Product[] | undefined; selectedProducts: Product[] | undefined; draggedProduct: Product | undefined | null; ngOnInit() { this.selectedProducts = []; this.availableProducts = [ { id: '1', name: 'Black Watch' }, { id: '2', name: 'Bamboo Watch' } ]; } dragStart(product: Product) { this.draggedProduct = product; } drop() { if (this.draggedProduct) { let draggedProductIndex = this.findIndex(this.draggedProduct); this.selectedProducts = [...(this.selectedProducts as Product[]), this.draggedProduct]; this.availableProducts = this.availableProducts?.filter((val, i) => i != draggedProductIndex); this.draggedProduct = null; } } dragEnd() { this.draggedProduct = null; } findIndex(product: Product) { let index = -1; for (let i = 0; i < (this.availableProducts as Product[]).length; i++) { if (product.id === (this.availableProducts as Product[])[i].id) { index = i; break; } } return index; } } ``` ## Draggable pDraggable directive apply draggable behavior to any element. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dragEffect | "none" \| "link" \| "all" \| "copy" \| "move" \| "copyLink" \| "copyMove" \| "linkMove" \| "uninitialized" | - | Defines the cursor style. | | dragHandle | string | - | Selector to define the drag handle, by default anywhere on the target element is a drag handle to start dragging. | ### Emits | Name | Parameters | Description | |------|------------|-------------| | onDragStart | event: DragEvent | Callback to invoke when drag begins. | | onDragEnd | event: DragEvent | Callback to invoke when drag ends. | | onDrag | event: DragEvent | Callback to invoke on dragging. | ## Droppable pDroppable directive apply droppable behavior to any element. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | _pDroppableDisabled | boolean | false | Whether the element is droppable, useful for conditional cases. | | dropEffect | "none" \| "link" \| "copy" \| "move" | - | Defines the cursor style, valid values are none, copy, move, link, copyMove, copyLink, linkMove and all. | ### Emits | Name | Parameters | Description | |------|------------|-------------| | onDragEnter | event: DragEvent | Callback to invoke when a draggable enters drop area. | | onDragLeave | event: DragEvent | Callback to invoke when a draggable leave drop area. | | onDrop | event: DragEvent | Callback to invoke when a draggable is dropped onto drop area. | --- # Angular Drawer Component Drawer is a container component displayed as an overlay. ## Accessibility Screen Reader Drawer component uses complementary role by default, since any attribute is passed to the root element aria role can be changed depending on your use case and additional attributes like aria-labelledby can be added. In addition aria-modal is added since focus is kept within the drawer when opened. It is recommended to use a trigger component that can be accessed with keyboard such as a button, if not adding tabIndex would be necessary. Trigger element also requires aria-expanded and aria-controls to be handled explicitly. Overlay Keyboard Support Key Function tab Moves focus to the next the focusable element within the drawer. shift + tab Moves focus to the previous the focusable element within the drawer. escape Closes the dialog if closeOnEscape is true. Close Button Keyboard Support Key Function enter Closes the drawer. space Closes the drawer. ## Basic Drawer is used as a container and visibility is controlled with a binding to visible . **Example:** ```typescript import { Component } from '@angular/core'; import { ButtonModule } from 'primeng/button'; import { DrawerModule } from 'primeng/drawer'; @Component({ template: `

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

`, standalone: true, imports: [ButtonModule, DrawerModule] }) export class DrawerBasicDemo { visible: boolean = false; } ``` ## Full Screen Drawer can cover the whole page when fullScreen property is enabled. **Example:** ```typescript import { Component } from '@angular/core'; import { ButtonModule } from 'primeng/button'; import { DrawerModule } from 'primeng/drawer'; @Component({ template: `

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

`, standalone: true, imports: [ButtonModule, DrawerModule] }) export class DrawerFullscreenDemo { visible: boolean = false; } ``` ## Headless Headless mode allows you to customize the entire user interface instead of the default elements. **Example:** ```typescript import { Component } from '@angular/core'; import { AvatarModule } from 'primeng/avatar'; import { ButtonModule } from 'primeng/button'; import { Drawer, DrawerModule } from 'primeng/drawer'; import { RippleModule } from 'primeng/ripple'; @Component({ template: `
Your Logo
Amy Elsner
`, standalone: true, imports: [AvatarModule, ButtonModule, DrawerModule, RippleModule] }) export class DrawerHeadlessDemo { visible: boolean = false; closeCallback(e): void { this.drawerRef.close(e); } } ``` ## Position Drawer location is configured with the position property that can take left , right , top and bottom as a value. **Example:** ```typescript import { Component } from '@angular/core'; import { ButtonModule } from 'primeng/button'; import { Drawer, DrawerModule } from 'primeng/drawer'; @Component({ template: `

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

`, standalone: true, imports: [ButtonModule, DrawerModule] }) export class DrawerPositionDemo { visible1: boolean = false; visible2: boolean = false; visible3: boolean = false; visible4: boolean = false; } ``` ## Size Drawer dimension can be defined with style or class properties, this responsive example utilizes Tailwind. **Example:** ```typescript import { Component } from '@angular/core'; import { ButtonModule } from 'primeng/button'; import { DrawerModule } from 'primeng/drawer'; @Component({ template: `

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

`, standalone: true, imports: [ButtonModule, DrawerModule] }) export class DrawerSizeDemo { visible: boolean = false; } ``` ## Template Drawer is customizable by header , content , footer templates. **Example:** ```typescript import { Component } from '@angular/core'; import { AvatarModule } from 'primeng/avatar'; import { DrawerModule } from 'primeng/drawer'; import { ButtonModule } from 'primeng/button'; @Component({ template: `
Amy Elsner

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

`, standalone: true, imports: [AvatarModule, DrawerModule, ButtonModule] }) export class DrawerTemplateDemo { visible: boolean = false; } ``` ## Drawer Sidebar is a panel component displayed as an overlay at the edges of the screen. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | | appendTo | HTMLElement \| ElementRef \| TemplateRef \| "self" \| "body" \| null \| undefined | 'self' | Target element to attach the overlay, valid values are "body" or a local ng-template variable of another element (note: use binding with brackets for template variables, e.g. [appendTo]="mydiv" for a div element having #mydiv as variable name). | | motionOptions | MotionOptions | - | The motion options. | | blockScroll | boolean | - | Whether to block scrolling of the document when drawer is active. | | style | { [klass: string]: any } | - | Inline style of the component. | | styleClass | string | - | Style class of the component. | | ariaCloseLabel | string | - | Aria label of the close icon. | | autoZIndex | boolean | - | Whether to automatically manage layering. | | baseZIndex | number | - | Base zIndex value to use in layering. | | modal | boolean | - | Whether an overlay mask is displayed behind the drawer. | | closeButtonProps | ButtonProps | - | Used to pass all properties of the ButtonProps to the Button component. | | dismissible | boolean | - | Whether to dismiss drawer on click of the mask. | | showCloseIcon | boolean | - | Whether to display the close icon. **(Deprecated)** | | closeOnEscape | boolean | - | Specifies if pressing escape key should hide the drawer. | | visible | boolean | false | The visible property is an input that determines the visibility of the component. | | position | "left" \| "right" \| "bottom" \| "top" \| "full" | 'left' | Specifies the position of the drawer, valid values are "left", "right", "bottom" and "top". | | fullScreen | boolean | false | Adds a close icon to the header to hide the dialog. | | header | string | - | Title content of the dialog. | | maskStyle | Partial | - | Style of the mask. | | closable | boolean | true | Whether to display close button. | ### Emits | Name | Parameters | Description | |------|------------|-------------| | onShow | value: any | Callback to invoke when dialog is shown. | | onHide | value: any | Callback to invoke when dialog is hidden. | ### Templates | Name | Type | Description | |------|------|-------------| | header | TemplateRef | Custom header template. | | footer | TemplateRef | Custom footer template. | | content | TemplateRef | Custom content template. | | closeicon | TemplateRef | Custom close icon template. | | headless | TemplateRef | Custom headless template to replace the entire drawer content. | ## Pass Through Options | Name | Type | Description | |------|------|-------------| | host | PassThroughOption | Used to pass attributes to the host's DOM element. | | root | PassThroughOption | Used to pass attributes to the root's DOM element. | | header | PassThroughOption | Used to pass attributes to the header's DOM element. | | title | PassThroughOption | Used to pass attributes to the title's DOM element. | | pcCloseButton | ButtonPassThrough | Used to pass attributes to the close Button component. | | content | PassThroughOption | Used to pass attributes to the content's DOM element. | | footer | PassThroughOption | Used to pass attributes to the footer's DOM element. | | motion | MotionOptions | Used to pass options to the motion component/directive. | ## Theming ### CSS Classes | Class | Description | |-------|-------------| | p-drawer-mask | Class name of the mask element | | p-drawer | Class name of the root element | | p-drawer-header | Class name of the header element | | p-drawer-title | Class name of the title element | | p-drawer-close-button | Class name of the close button element | | p-drawer-content | Class name of the content element | ### Design Tokens | Token | CSS Variable | Description | |-------|--------------|-------------| | drawer.background | --p-drawer-background | Background of root | | drawer.border.color | --p-drawer-border-color | Border color of root | | drawer.color | --p-drawer-color | Color of root | | drawer.shadow | --p-drawer-shadow | Shadow of root | | drawer.header.padding | --p-drawer-header-padding | Padding of header | | drawer.title.font.size | --p-drawer-title-font-size | Font size of title | | drawer.title.font.weight | --p-drawer-title-font-weight | Font weight of title | | drawer.content.padding | --p-drawer-content-padding | Padding of content | | drawer.footer.padding | --p-drawer-footer-padding | Padding of footer | --- # Angular Dynamic Dialog Component Dialogs can be created dynamically with any component as the content using a DialogService. ## Closing a Dialog Most of the time, requirement is returning a value from the dialog. DialogRef's close method is used for this purpose where the parameter passed will be available at the onClose event at the caller. Here is an example on how to close the dialog from the ProductListDemo by passing a selected product. ## Customization DynamicDialog uses the Dialog component internally, visit dialog for more information about the available props. ## Example Dynamic dialogs require an instance of a DialogService that is responsible for displaying a dialog with a component as its content. Calling open method of DialogService will display dynamic dialog. First parameter of open method is the type of component to load and the second parameter is the configuration of the Dialog such as header , width and more. **Example:** ```typescript import { Component, inject } from '@angular/core'; import { ButtonModule } from 'primeng/button'; import { MessageService, DialogService } from 'primeng/api'; import { Product } from '@/domain/product'; import { Dialog } from 'primeng/dialog'; @Component({ template: `
`, standalone: true, imports: [ButtonModule], providers: [DialogService, MessageService] }) export class DynamicDialogExampleDemo { private dialogService = inject(DialogService); private messageService = inject(MessageService); show() { this.ref = this.dialogService.open(ProductListDemo, { header: 'Product List', modal: true, width: '50vw', closable: true, contentStyle: { overflow: 'auto' }, breakpoints: { '960px': '75vw', '640px': '90vw' }, templates: { footer: Footer } }); this.ref.onClose.subscribe((data: any) => { let summary_and_detail; if (data) { const buttonType = data?.buttonType; summary_and_detail = buttonType ? { summary: 'No Product Selected', detail: `Pressed '${buttonType}' button` } : { summary: 'Product Selected', detail: data?.name }; } else { summary_and_detail = { summary: 'No Product Selected', detail: 'Pressed Close button' }; } this.messageService.add({ severity: 'info', ...summary_and_detail, life: 3000 }); }); this.ref.onMaximize.subscribe((value) => { this.messageService.add({ severity: 'info', summary: 'Maximized', detail: `maximized: ${value.maximized}` }); }); } } ``` ## Opening a Dialog The open method of the DialogService is used to open a Dialog. First parameter is the component to load and second one is the configuration object to customize the Dialog. ## Passing Data To pass data to a dynamically loaded component, you can use either the data or inputValues property, depending on your requirements. The data property is ideal for passing generic information that is not directly tied to the component's inputs, while inputValues allows you to set specific input properties on the component in a more structured and type-safe way. Both properties can be used together or independently, offering flexibility to meet different use cases. Additionally, the loaded component can control the dialog using the DynamicDialogRef API, providing complete control over the dialog lifecycle. Both DynamicDialogConfig and DynamicDialogRef are injectable through the constructor. ## style-doc Following is the list of structural style classes, for theming classes visit theming page. ## Dynamic Dialog Config Dialogs can be created dynamically with any component as the content using a DialogService. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | data | DataType | - | An object to pass to the component loaded inside the Dialog. | | inputValues | InputValuesType | - | An object to pass to the component loaded inside the Dialog. | | header | string | - | Header text of the dialog. | | ariaLabelledBy | string | - | Identifies the element (or elements) that labels the element it is applied to. | | footer | string | - | Footer text of the dialog. | | width | string | - | Width of the dialog. | | height | string | - | Height of the dialog. | | closeOnEscape | boolean | false | Specifies if pressing escape key should hide the dialog. | | focusOnShow | boolean | true | Specifies if autofocus should happen on show. | | focusTrap | boolean | true | When enabled, can only focus on elements inside the dialog. | | baseZIndex | number | - | Base zIndex value to use in layering. | | autoZIndex | boolean | false | Whether to re-enforce layering through applying zIndex. | | dismissableMask | boolean | false | Specifies if clicking the modal background should hide the dialog. | | rtl | boolean | false | Inline style of the component. | | style | { [klass: string]: any } | - | Inline style of the component. | | contentStyle | { [klass: string]: any } | - | Inline style of the content. | | styleClass | string | - | Style class of the component. | | motionOptions | MotionOptions | - | The motion options for the dialog. | | maskMotionOptions | MotionOptions | - | The motion options for the mask. | | closable | boolean | false | Adds a close icon to the header to hide the dialog. | | showHeader | boolean | false | Whether to show the header or not. | | modal | boolean | false | Defines if background should be blocked when dialog is displayed. | | maskStyleClass | string | - | Style class of the mask. | | resizable | boolean | false | Enables resizing of the content. | | draggable | boolean | false | Enables dragging to change the position using header. | | keepInViewport | boolean | false | Keeps dialog in the viewport. | | minX | number | - | Minimum value for the left coordinate of dialog in dragging. | | minY | number | - | Minimum value for the top coordinate of dialog in dragging. | | maximizable | boolean | false | Whether the dialog can be displayed full screen. | | maximizeIcon | string | - | Name of the maximize icon. | | minimizeIcon | string | - | Name of the minimize icon. | | position | DialogPosition | - | Position of the dialog. | | closeAriaLabel | string | - | Defines a string that labels the close button for accessibility. | | appendTo | any | - | Target element to attach the overlay, valid values are "body" or a local ng-template variable of another element (note: use binding with brackets for template variables, e.g. [appendTo]="mydiv" for a div element having #mydiv as variable name). | | duplicate | boolean | false | A boolean to determine if it can be duplicate. | | breakpoints | any | - | Object literal to define widths per screen size. | | templates | DynamicDialogTemplates | - | Dialog templates. | | pt | DialogPassThrough | - | Used to pass attributes to DOM elements inside the Dialog component. | | unstyled | boolean | false | Indicates whether the component should be rendered without styles. | ## Dynamic Dialog Ref Dynamic Dialog instance. ### Methods | Name | Parameters | Return Type | Description | |------|------------|-------------|-------------| | close | result: any | void | Closes dialog. | | destroy | | void | Destroys the dialog instance. | | dragStart | event: MouseEvent | void | Callback to invoke on drag start. | | dragEnd | event: MouseEvent | void | Callback to invoke on drag end. | | resizeInit | event: MouseEvent | void | Callback to invoke on resize start. | | resizeEnd | event: MouseEvent | void | Callback to invoke on resize start. | | maximize | value: any | void | Callback to invoke on dialog is maximized. | ## Theming ### CSS Classes | Class | Description | |-------|-------------| | p-dialog-mask | Class name of the mask element | | p-dialog | Class name of the root element | | p-dialog-header | Class name of the header element | | p-dialog-title | Class name of the title element | | p-dialog-header-actions | Class name of the header actions element | | p-dialog-maximize-button | Class name of the maximize button element | | p-dialog-close-button | Class name of the close button element | | p-dialog-content | Class name of the content element | | p-dialog-footer | Class name of the footer element | --- # Angular Editor Component Editor is rich text editor component based on Quill. ## Accessibility Quill performs generally well in terms of accessibility. The elements in the toolbar can be tabbed and have the necessary ARIA roles/attributes for screen readers. One known limitation is the lack of arrow key support for dropdowns in the toolbar that may be overcome with a custom toolbar. ## Basic A model can be bound using the standard ngModel directive. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { EditorModule } from 'primeng/editor'; @Component({ template: ` `, standalone: true, imports: [EditorModule, FormsModule] }) export class EditorBasicDemo { text: string | undefined; } ``` ## customtoolbar-doc Editor provides a default toolbar with common options, to customize it define your elements inside the header element. Refer to Quill documentation for available controls. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { EditorModule } from 'primeng/editor'; @Component({ template: ` `, standalone: true, imports: [EditorModule, FormsModule] }) export class EditorCustomToolbarDemo { text: string = '
Hello World!
PrimeNG Editor Rocks

'; } ``` ## Quill Editor uses Quill editor underneath so it needs to be installed as a dependency. ## reactiveforms-doc Editor can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control. **Example:** ```typescript import { Component, inject } from '@angular/core'; import { ReactiveFormsModule } from '@angular/forms'; import { EditorModule } from 'primeng/editor'; import { MessageModule } from 'primeng/message'; import { ButtonModule } from 'primeng/button'; import { MessageService } from 'primeng/api'; @Component({ template: `
@if (isInvalid('text')) { Content is required. }
`, standalone: true, imports: [EditorModule, MessageModule, ButtonModule, ReactiveFormsModule] }) export class EditorReactiveFormsDemo { messageService = inject(MessageService); items: any[] | undefined; exampleForm: FormGroup | undefined; formSubmitted: boolean = false; constructor() { this.exampleForm = this.fb.group({ text: ['', Validators.required] }); } onSubmit() { this.formSubmitted = true; if (this.exampleForm.valid) { this.messageService.add({ severity: 'success', summary: 'Success', detail: 'Form is submitted', life: 3000 }); this.exampleForm.reset(); this.formSubmitted = false; } } isInvalid(controlName: string) { const control = this.exampleForm.get(controlName); return control?.invalid && (control.touched || this.formSubmitted); } } ``` ## ReadOnly When readonly is present, the value cannot be edited. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { EditorModule } from 'primeng/editor'; @Component({ template: ` `, standalone: true, imports: [EditorModule, FormsModule] }) export class EditorReadonlyDemo { text: string = 'Always bet on Prime!'; } ``` ## templatedrivenforms-doc **Example:** ```typescript import { Component, inject } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { EditorModule } from 'primeng/editor'; import { MessageModule } from 'primeng/message'; import { ButtonModule } from 'primeng/button'; import { MessageService } from 'primeng/api'; @Component({ template: `
@if (content.invalid && (content.touched || exampleForm.submitted)) { Content is required. }
`, standalone: true, imports: [EditorModule, MessageModule, ButtonModule, FormsModule] }) export class EditorTemplateDrivenFormsDemo { messageService = inject(MessageService); text: string | undefined; onSubmit(form: any) { if (form.valid) { this.messageService.add({ severity: 'success', summary: 'Success', detail: 'Form Submitted', life: 3000 }); form.resetForm(); } } } ``` ## Editor Editor groups a collection of contents in tabs. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | | required | boolean | false | There must be a value (if set). | | invalid | boolean | false | When present, it specifies that the component should have invalid state style. | | disabled | boolean | false | When present, it specifies that the component should have disabled state style. | | name | string | undefined | When present, it specifies that the name of the input. | | style | Partial | - | Inline style of the container. | | placeholder | string | - | Placeholder text to show when editor is empty. | | formats | string[] | - | Whitelist of formats to display, see [here](https://quilljs.com/docs/formats/) for available options. | | modules | object | - | Modules configuration of Editor, see [here](https://quilljs.com/docs/modules/) for available options. | | bounds | string \| HTMLElement | - | DOM Element or a CSS selector for a DOM Element, within which the editor's p elements (i.e. tooltips, etc.) should be confined. Currently, it only considers left and right boundaries. | | scrollingContainer | string \| HTMLElement | - | DOM Element or a CSS selector for a DOM Element, specifying which container has the scrollbars (i.e. overflow-y: auto), if is has been changed from the default ql-editor with custom CSS. Necessary to fix scroll jumping bugs when Quill is set to auto grow its height, and another ancestor container is responsible from the scrolling.. | | debug | string | - | Shortcut for debug. Note debug is a static method and will affect other instances of Quill editors on the page. Only warning and error messages are enabled by default. | | readonly | boolean | - | Whether to instantiate the editor to read-only mode. | ### Emits | Name | Parameters | Description | |------|------------|-------------| | onEditorInit | event: EditorInitEvent | Callback to invoke when the quill modules are loaded. | | onTextChange | event: EditorTextChangeEvent | Callback to invoke when text of editor changes. | | onSelectionChange | event: EditorSelectionChangeEvent | Callback to invoke when selection of the text changes. | | onEditorChange | event: EditorChangeEvent | Callback to invoke when editor content changes (combines both text and selection changes). | | onFocus | event: EditorFocusEvent | Callback to invoke when editor receives focus. | | onBlur | event: EditorBlurEvent | Callback to invoke when editor loses focus. | ### Templates | Name | Type | Description | |------|------|-------------| | header | TemplateRef | Custom item template. | ## Pass Through Options | Name | Type | Description | |------|------|-------------| | root | PassThroughOption | Used to pass attributes to the root's DOM element. | | toolbar | PassThroughOption | Used to pass attributes to the toolbar's DOM element. | | formats | PassThroughOption | Used to pass attributes to the formats span's DOM element. | | header | PassThroughOption | Used to pass attributes to the header select's DOM element. | | option | PassThroughOption | Used to pass attributes to the option's DOM element. | | bold | PassThroughOption | Used to pass attributes to the bold button's DOM element. | | italic | PassThroughOption | Used to pass attributes to the italic button's DOM element. | | underline | PassThroughOption | Used to pass attributes to the underline button's DOM element. | | color | PassThroughOption | Used to pass attributes to the color select's DOM element. | | background | PassThroughOption | Used to pass attributes to the background select's DOM element. | | list | PassThroughOption | Used to pass attributes to the list button's DOM element. | | select | PassThroughOption | Used to pass attributes to the select's DOM element. | | link | PassThroughOption | Used to pass attributes to the link button's DOM element. | | image | PassThroughOption | Used to pass attributes to the image button's DOM element. | | codeBlock | PassThroughOption | Used to pass attributes to the code block button's DOM element. | | clean | PassThroughOption | Used to pass attributes to the clean button's DOM element. | | content | PassThroughOption | Used to pass attributes to the content's DOM element. | ## Theming ### CSS Classes | Class | Description | |-------|-------------| | p-editor | Class name of the root element | | p-editor-toolbar | Class name of the toolbar element | | p-editor-content | Class name of the content element | ### Design Tokens | Token | CSS Variable | Description | |-------|--------------|-------------| | editor.toolbar.background | --p-editor-toolbar-background | Background of toolbar | | editor.toolbar.border.color | --p-editor-toolbar-border-color | Border color of toolbar | | editor.toolbar.border.radius | --p-editor-toolbar-border-radius | Border radius of toolbar | | editor.toolbar.item.color | --p-editor-toolbar-item-color | Color of toolbar item | | editor.toolbar.item.hover.color | --p-editor-toolbar-item-hover-color | Hover color of toolbar item | | editor.toolbar.item.active.color | --p-editor-toolbar-item-active-color | Active color of toolbar item | | editor.toolbar.item.padding | --p-editor-toolbar-item-padding | Padding of toolbar item | | editor.overlay.background | --p-editor-overlay-background | Background of overlay | | editor.overlay.border.color | --p-editor-overlay-border-color | Border color of overlay | | editor.overlay.border.radius | --p-editor-overlay-border-radius | Border radius of overlay | | editor.overlay.color | --p-editor-overlay-color | Color of overlay | | editor.overlay.shadow | --p-editor-overlay-shadow | Shadow of overlay | | editor.overlay.padding | --p-editor-overlay-padding | Padding of overlay | | editor.overlay.option.focus.background | --p-editor-overlay-option-focus-background | Focus background of overlay option | | editor.overlay.option.color | --p-editor-overlay-option-color | Color of overlay option | | editor.overlay.option.focus.color | --p-editor-overlay-option-focus-color | Focus color of overlay option | | editor.overlay.option.padding | --p-editor-overlay-option-padding | Padding of overlay option | | editor.overlay.option.border.radius | --p-editor-overlay-option-border-radius | Border radius of overlay option | | editor.content.background | --p-editor-content-background | Background of content | | editor.content.border.color | --p-editor-content-border-color | Border color of content | | editor.content.color | --p-editor-content-color | Color of content | | editor.content.border.radius | --p-editor-content-border-radius | Border radius of content | --- # Angular Fieldset Component Fieldset is a grouping component with a content toggle feature. ## Accessibility Screen Reader Fieldset component uses the semantic fieldset element. When toggleable option is enabled, a clickable element with button role is included inside the legend element, this button has aria-controls to define the id of the content section along with aria-expanded for the visibility state. The value to read the button defaults to the value of the legend property and can be customized by defining an aria-label or aria-labelledby via the toggleButtonProps property. The content uses region , defines an id that matches the aria-controls of the content toggle button and aria-labelledby referring to the id of the header. Content Toggle Button Keyboard Support Key Function tab Moves focus to the next the focusable element in the page tab sequence. shift + tab Moves focus to the previous the focusable element in the page tab sequence. enter Toggles the visibility of the content. space Toggles the visibility of the content. ## Basic A simple Fieldset is created with a legend property along with the content as children. **Example:** ```typescript import { Component } from '@angular/core'; import { FieldsetModule } from 'primeng/fieldset'; @Component({ template: `

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

`, standalone: true, imports: [FieldsetModule] }) export class FieldsetBasicDemo {} ``` ## Template Header section can also be defined with custom content instead of primitive values. **Example:** ```typescript import { Component } from '@angular/core'; import { AvatarModule } from 'primeng/avatar'; import { FieldsetModule } from 'primeng/fieldset'; @Component({ template: `
Amy Elsner

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

`, standalone: true, imports: [AvatarModule, FieldsetModule] }) export class FieldsetTemplateDemo {} ``` ## Toggleable Content of the fieldset can be expanded and collapsed using toggleable option, default state is defined with collapsed option. **Example:** ```typescript import { Component } from '@angular/core'; import { FieldsetModule } from 'primeng/fieldset'; @Component({ template: `

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

`, standalone: true, imports: [FieldsetModule] }) export class FieldsetToggleableDemo {} ``` ## Fieldset Fieldset is a grouping component with the optional content toggle feature. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | | legend | string | - | Header text of the fieldset. | | toggleable | boolean | false | When specified, content can toggled by clicking the legend. | | collapsed | boolean | - | Defines the initial state of content, supports one or two-way binding as well. | | style | Partial | - | Inline style of the component. | | styleClass | string | - | Style class of the component. | | motionOptions | MotionOptions | - | The motion options. | ### Emits | Name | Parameters | Description | |------|------------|-------------| | onBeforeToggle | event: FieldsetBeforeToggleEvent | Callback to invoke before panel toggle. | | onAfterToggle | event: FieldsetAfterToggleEvent | Callback to invoke after panel toggle. | ### Templates | Name | Type | Description | |------|------|-------------| | header | TemplateRef | Custom header template. | | expandicon | TemplateRef | Custom expand icon template. | | collapseicon | TemplateRef | Custom collapse icon template. | | content | TemplateRef | Custom content template. | ## Pass Through Options | Name | Type | Description | |------|------|-------------| | root | PassThroughOption | Used to pass attributes to the root's DOM element. | | legend | PassThroughOption | Used to pass attributes to the legend's DOM element. | | toggleButton | PassThroughOption | Used to pass attributes to the toggle button's DOM element. | | toggleIcon | PassThroughOption | Used to pass attributes to the toggle icon's DOM element. | | legendLabel | PassThroughOption | Used to pass attributes to the legend label's DOM element. | | contentContainer | PassThroughOption | Used to pass attributes to the content container's DOM element. | | contentWrapper | PassThroughOption | Used to pass attributes to the content wrapper DOM element. | | content | PassThroughOption | Used to pass attributes to the content's DOM element. | | motion | MotionOptions | Used to pass options to the motion component/directive. | ## Theming ### CSS Classes | Class | Description | |-------|-------------| | p-fieldset | Class name of the root element | | p-fieldset-legend | Class name of the legend element | | p-fieldset-legend-label | Class name of the legend label element | | p-fieldset-toggle-icon | Class name of the toggle icon element | | p-fieldset-content-container | Class name of the content container element | | p-fieldset-content-wrapper | Class name of the content wrapper element | | p-fieldset-content | Class name of the content element | ### Design Tokens | Token | CSS Variable | Description | |-------|--------------|-------------| | fieldset.background | --p-fieldset-background | Background of root | | fieldset.border.color | --p-fieldset-border-color | Border color of root | | fieldset.border.radius | --p-fieldset-border-radius | Border radius of root | | fieldset.color | --p-fieldset-color | Color of root | | fieldset.padding | --p-fieldset-padding | Padding of root | | fieldset.transition.duration | --p-fieldset-transition-duration | Transition duration of root | | fieldset.legend.background | --p-fieldset-legend-background | Background of legend | | fieldset.legend.hover.background | --p-fieldset-legend-hover-background | Hover background of legend | | fieldset.legend.color | --p-fieldset-legend-color | Color of legend | | fieldset.legend.hover.color | --p-fieldset-legend-hover-color | Hover color of legend | | fieldset.legend.border.radius | --p-fieldset-legend-border-radius | Border radius of legend | | fieldset.legend.border.width | --p-fieldset-legend-border-width | Border width of legend | | fieldset.legend.border.color | --p-fieldset-legend-border-color | Border color of legend | | fieldset.legend.padding | --p-fieldset-legend-padding | Padding of legend | | fieldset.legend.gap | --p-fieldset-legend-gap | Gap of legend | | fieldset.legend.font.weight | --p-fieldset-legend-font-weight | Font weight of legend | | fieldset.legend.font.size | --p-fieldset-legend-font-size | Font size of legend | | fieldset.legend.focus.ring.width | --p-fieldset-legend-focus-ring-width | Focus ring width of legend | | fieldset.legend.focus.ring.style | --p-fieldset-legend-focus-ring-style | Focus ring style of legend | | fieldset.legend.focus.ring.color | --p-fieldset-legend-focus-ring-color | Focus ring color of legend | | fieldset.legend.focus.ring.offset | --p-fieldset-legend-focus-ring-offset | Focus ring offset of legend | | fieldset.legend.focus.ring.shadow | --p-fieldset-legend-focus-ring-shadow | Focus ring shadow of legend | | fieldset.toggle.icon.color | --p-fieldset-toggle-icon-color | Color of toggle icon | | fieldset.toggle.icon.hover.color | --p-fieldset-toggle-icon-hover-color | Hover color of toggle icon | | fieldset.content.padding | --p-fieldset-content-padding | Padding of content | --- # Angular FileUpload Component FileUpload is an advanced uploader with dragdrop support, multi file uploads, auto uploading, progress tracking and validations. ## Accessibility Screen Reader FileUpload uses a hidden native input element with type="file" for screen readers. Keyboard Support Interactive elements of the uploader are buttons, visit the Button accessibility section for more information. ## Advanced Advanced uploader provides dragdrop support, multi file uploads, auto uploading, progress tracking and validations. **Example:** ```typescript import { Component, inject } from '@angular/core'; import { FileUploadModule } from 'primeng/fileupload'; import { MessageService } from 'primeng/api'; interface UploadEvent { originalEvent: Event; files: File[]; } @Component({ template: `
Drag and drop files to here to upload.
 `, standalone: true, imports: [FileUploadModule], providers: [MessageService] }) export class FileUploadAdvancedDemo { private messageService = inject(MessageService); uploadedFiles: any[] = []; } ``` ## Auto When auto property is enabled, a file gets uploaded instantly after selection. **Example:** ```typescript import { Component, inject } from '@angular/core'; import { FileUploadModule } from 'primeng/fileupload'; import { MessageService } from 'primeng/api'; interface UploadEvent { originalEvent: Event; files: File[]; } @Component({ template: `
`, standalone: true, imports: [FileUploadModule], providers: [MessageService] }) export class FileUploadAutoDemo { private messageService = inject(MessageService); } ``` ## Basic FileUpload basic mode provides a simpler UI as an alternative to default advanced mode. **Example:** ```typescript import { Component, inject } from '@angular/core'; import { ButtonModule } from 'primeng/button'; import { FileUploadModule } from 'primeng/fileupload'; import { MessageService } from 'primeng/api'; interface UploadEvent { originalEvent: Event; files: File[]; } @Component({ template: `
`, standalone: true, imports: [ButtonModule, FileUploadModule], providers: [MessageService] }) export class FileUploadBasicDemo { private messageService = inject(MessageService); } ``` ## custom-doc FileUpload basic mode provides a simpler UI as an alternative to default advanced mode. **Example:** ```typescript import { Component, inject } from '@angular/core'; import { FileUploadModule } from 'primeng/fileupload'; import { MessageService } from 'primeng/api'; @Component({ template: `
`, standalone: true, imports: [FileUploadModule], providers: [MessageService] }) export class FileUploadCustomDemo { private messageService = inject(MessageService); } ``` ## Template **Example:** ```typescript import { Component, inject } from '@angular/core'; import { BadgeModule } from 'primeng/badge'; import { ButtonModule } from 'primeng/button'; import { FileUploadModule } from 'primeng/fileupload'; import { ProgressBarModule } from 'primeng/progressbar'; import { PrimeNG } from 'primeng/config'; import { MessageService } from 'primeng/api'; @Component({ template: `
{{ totalSize }}B / 1Mb
@if (files?.length > 0) {
Pending
@for (file of files; track $index; let i = $index) {
{{ file.name }}
{{ formatSize(file.size) }}
}
} @if (uploadedFiles?.length > 0) {
Completed
@for (file of uploadedFiles; track $index; let i = $index) {
{{ file.name }}
{{ formatSize(file.size) }}
}
}

Drag and drop files to here to upload.

 `, standalone: true, imports: [BadgeModule, ButtonModule, FileUploadModule, ProgressBarModule], providers: [MessageService] }) export class FileUploadTemplateDemo { private messageService = inject(MessageService); files: any[] = []; totalSize: number = 0; totalSizePercent: number = 0; onRemoveTemplatingFile(event, file, removeFileCallback, index) { removeFileCallback(event, index); this.totalSize -= parseInt(this.formatSize(file.size)); this.totalSizePercent = this.totalSize / 10; } onClearTemplatingUpload(clear) { clear(); this.totalSize = 0; this.totalSizePercent = 0; } onTemplatedUpload() { this.messageService.add({ severity: 'info', summary: 'Success', detail: 'File Uploaded', life: 3000 }); } onSelectedFiles(event) { this.files = event.currentFiles; this.files.forEach((file) => { this.totalSize += parseInt(this.formatSize(file.size)); }); this.totalSizePercent = this.totalSize / 10; } uploadEvent(callback) { callback(); } formatSize(bytes) { const k = 1024; const dm = 3; const sizes = this.config.translation.fileSizeTypes; if (bytes === 0) { return `0 ${sizes[0]}`; } const i = Math.floor(Math.log(bytes) / Math.log(k)); const formattedSize = parseFloat((bytes / Math.pow(k, i)).toFixed(dm)); return `${formattedSize} ${sizes[i]}`; } } ``` ## File Upload FileUpload is an advanced uploader with dragdrop support, multi file uploads, auto uploading, progress tracking and validations. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | | name | string | - | Name of the request parameter to identify the files at backend. | | url | string | - | Remote url to upload the files. | | method | "post" \| "put" | - | HTTP method to send the files to the url such as "post" and "put". | | multiple | boolean | - | Used to select multiple files at once from file dialog. | | accept | string | - | Comma-separated list of pattern to restrict the allowed file types. Can be any combination of either the MIME types (such as "image/*") or the file extensions (such as ".jpg"). | | disabled | boolean | - | Disables the upload functionality. | | auto | boolean | - | When enabled, upload begins automatically after selection is completed. | | withCredentials | boolean | - | Cross-site Access-Control requests should be made using credentials such as cookies, authorization headers or TLS client certificates. | | maxFileSize | number | - | Maximum file size allowed in bytes. | | invalidFileSizeMessageSummary | string | - | Summary message of the invalid file size. | | invalidFileSizeMessageDetail | string | - | Detail message of the invalid file size. | | invalidFileTypeMessageSummary | string | - | Summary message of the invalid file type. | | invalidFileTypeMessageDetail | string | - | Detail message of the invalid file type. | | invalidFileLimitMessageDetail | string | - | Detail message of the invalid file type. | | invalidFileLimitMessageSummary | string | - | Summary message of the invalid file type. | | style | Partial | - | Inline style of the element. | | styleClass | string | - | Class of the element. | | previewWidth | number | - | Width of the image thumbnail in pixels. | | chooseLabel | string | - | Label of the choose button. Defaults to PrimeNG Locale configuration. | | uploadLabel | string | - | Label of the upload button. Defaults to PrimeNG Locale configuration. | | cancelLabel | string | - | Label of the cancel button. Defaults to PrimeNG Locale configuration. | | chooseIcon | string | - | Icon of the choose button. | | uploadIcon | string | - | Icon of the upload button. | | cancelIcon | string | - | Icon of the cancel button. | | showUploadButton | boolean | - | Whether to show the upload button. | | showCancelButton | boolean | - | Whether to show the cancel button. | | mode | "advanced" \| "basic" | - | Defines the UI of the component. | | headers | HttpHeaders | - | HttpHeaders class represents the header configuration options for an HTTP request. | | customUpload | boolean | - | Whether to use the default upload or a manual implementation defined in uploadHandler callback. Defaults to PrimeNG Locale configuration. | | fileLimit | number | - | Maximum number of files that can be uploaded. | | uploadStyleClass | string | - | Style class of the upload button. | | cancelStyleClass | string | - | Style class of the cancel button. | | removeStyleClass | string | - | Style class of the remove button. | | chooseStyleClass | string | - | Style class of the choose button. | | chooseButtonProps | ButtonProps | - | Used to pass all properties of the ButtonProps to the choose button inside the component. | | uploadButtonProps | ButtonProps | - | Used to pass all properties of the ButtonProps to the upload button inside the component. | | cancelButtonProps | ButtonProps | - | Used to pass all properties of the ButtonProps to the cancel button inside the component. | | filesInput | File[] | - | Files input. | ### Emits | Name | Parameters | Description | |------|------------|-------------| | onBeforeUpload | event: FileBeforeUploadEvent | Callback to invoke before file upload is initialized. | | onSend | event: FileSendEvent | An event indicating that the request was sent to the server. Useful when a request may be retried multiple times, to distinguish between retries on the final event stream. | | onUpload | event: FileUploadEvent | Callback to invoke when file upload is complete. | | onError | event: FileUploadErrorEvent | Callback to invoke if file upload fails. | | onClear | value: void | Callback to invoke when files in queue are removed without uploading using clear all button. | | onRemove | event: FileRemoveEvent | Callback to invoke when a file is removed without uploading using clear button of a file. | | onSelect | event: FileSelectEvent | Callback to invoke when files are selected. | | onProgress | event: FileProgressEvent | Callback to invoke when files are being uploaded. | | uploadHandler | event: FileUploadHandlerEvent | Callback to invoke in custom upload mode to upload the files manually. | | onImageError | event: Event | This event is triggered if an error occurs while loading an image file. | | onRemoveUploadedFile | event: RemoveUploadedFileEvent | This event is triggered if an error occurs while loading an image file. | ### Templates | Name | Type | Description | |------|------|-------------| | file | TemplateRef | Custom file template. | | header | TemplateRef | Custom header template. | | content | TemplateRef | Custom content template. | | toolbar | TemplateRef | Custom toolbar template. | | chooseicon | TemplateRef | Custom choose icon template. | | filelabel | TemplateRef | Custom file label template. | | uploadicon | TemplateRef | Custom upload icon template. | | cancelicon | TemplateRef | Custom cancel icon template. | | empty | TemplateRef | Custom empty state template. | ### Methods | Name | Parameters | Return Type | Description | |------|------------|-------------|-------------| | uploader | | void | Uploads the selected files. | | clear | | void | Clears the files list. | | remove | event: Event, index: number | void | Removes a single file. | | removeUploadedFile | index: number | void | Removes uploaded file. | ## Pass Through Options | Name | Type | Description | |------|------|-------------| | host | PassThroughOption | Used to pass attributes to the host's DOM element. | | root | PassThroughOption | Used to pass attributes to the root's DOM element. | | input | PassThroughOption | Used to pass attributes to the input's DOM element. | | header | PassThroughOption | Used to pass attributes to the header's DOM element. | | pcChooseButton | ButtonPassThrough | Used to pass attributes to the choose button component. | | pcUploadButton | ButtonPassThrough | Used to pass attributes to the upload button component. | | pcCancelButton | ButtonPassThrough | Used to pass attributes to the cancel button component. | | content | PassThroughOption | Used to pass attributes to the content's DOM element. | | pcProgressBar | ProgressBarPassThrough | Used to pass attributes to the progress bar component. | | pcMessage | MessagePassThrough | Used to pass attributes to the message component. | | fileList | PassThroughOption | Used to pass attributes to the file list's DOM element. | | file | PassThroughOption | Used to pass attributes to the file's DOM element. | | fileThumbnail | PassThroughOption | Used to pass attributes to the file thumbnail's DOM element. | | fileInfo | PassThroughOption | Used to pass attributes to the file info's DOM element. | | fileName | PassThroughOption | Used to pass attributes to the file name's DOM element. | | fileSize | PassThroughOption | Used to pass attributes to the file size's DOM element. | | pcFileBadge | BadgePassThrough | Used to pass attributes to the file badge component. | | fileActions | PassThroughOption | Used to pass attributes to the file actions's DOM element. | | pcFileRemoveButton | ButtonPassThrough | Used to pass attributes to the file remove button component. | | basicContent | PassThroughOption | Used to pass attributes to the basic content's DOM element. | | empty | PassThroughOption | Used to pass attributes to the empty's DOM element. | ## Theming ### CSS Classes | Class | Description | |-------|-------------| | p-fileupload | Class name of the root element | | p-fileupload-header | Class name of the header element | | p-fileupload-choose-button | Class name of the choose button element | | p-fileupload-upload-button | Class name of the upload button element | | p-fileupload-cancel-button | Class name of the cancel button element | | p-fileupload-content | Class name of the content element | | p-fileupload-file-list | Class name of the file list element | | p-fileupload-file | Class name of the file element | | p-fileupload-file-thumbnail | Class name of the file thumbnail element | | p-fileupload-file-info | Class name of the file info element | | p-fileupload-file-name | Class name of the file name element | | p-fileupload-file-size | Class name of the file size element | | p-fileupload-file-badge | Class name of the file badge element | | p-fileupload-file-actions | Class name of the file actions element | | p-fileupload-file-remove-button | Class name of the file remove button element | | p-fileupload-basic-content | Class name of the content in basic mode | ### Design Tokens | Token | CSS Variable | Description | |-------|--------------|-------------| | fileupload.background | --p-fileupload-background | Background of root | | fileupload.border.color | --p-fileupload-border-color | Border color of root | | fileupload.color | --p-fileupload-color | Color of root | | fileupload.border.radius | --p-fileupload-border-radius | Border radius of root | | fileupload.transition.duration | --p-fileupload-transition-duration | Transition duration of root | | fileupload.header.background | --p-fileupload-header-background | Background of header | | fileupload.header.color | --p-fileupload-header-color | Color of header | | fileupload.header.padding | --p-fileupload-header-padding | Padding of header | | fileupload.header.border.color | --p-fileupload-header-border-color | Border color of header | | fileupload.header.border.width | --p-fileupload-header-border-width | Border width of header | | fileupload.header.border.radius | --p-fileupload-header-border-radius | Border radius of header | | fileupload.header.gap | --p-fileupload-header-gap | Gap of header | | fileupload.content.highlight.border.color | --p-fileupload-content-highlight-border-color | Highlight border color of content | | fileupload.content.padding | --p-fileupload-content-padding | Padding of content | | fileupload.content.gap | --p-fileupload-content-gap | Gap of content | | fileupload.file.padding | --p-fileupload-file-padding | Padding of file | | fileupload.file.gap | --p-fileupload-file-gap | Gap of file | | fileupload.file.border.color | --p-fileupload-file-border-color | Border color of file | | fileupload.file.info.gap | --p-fileupload-file-info-gap | Info gap of file | | fileupload.file.name.color | --p-fileupload-file-name-color | Color of file name | | fileupload.file.name.font.weight | --p-fileupload-file-name-font-weight | Font weight of file name | | fileupload.file.name.font.size | --p-fileupload-file-name-font-size | Font size of file name | | fileupload.file.size.color | --p-fileupload-file-size-color | Color of file size | | fileupload.file.size.font.weight | --p-fileupload-file-size-font-weight | Font weight of file size | | fileupload.file.size.font.size | --p-fileupload-file-size-font-size | Font size of file size | | fileupload.file.list.gap | --p-fileupload-file-list-gap | Gap of file list | | fileupload.progressbar.height | --p-fileupload-progressbar-height | Height of progressbar | | fileupload.basic.gap | --p-fileupload-basic-gap | Gap of basic | --- # Angular Float Label Component FloatLabel appears on top of the input field when focused. ## Accessibility Screen Reader FloatLabel does not require any roles and attributes. Keyboard Support Component does not include any interactive elements. ## Basic FloatLabel is used by wrapping the input and its label. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { FloatLabelModule } from 'primeng/floatlabel'; import { InputTextModule } from 'primeng/inputtext'; @Component({ template: `
`, standalone: true, imports: [FloatLabelModule, InputTextModule, FormsModule] }) export class FloatLabelBasicDemo { value: string | undefined; } ``` ## Invalid When the form element is invalid, the label is also highlighted. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { FloatLabelModule } from 'primeng/floatlabel'; import { InputTextModule } from 'primeng/inputtext'; @Component({ template: `
`, standalone: true, imports: [FloatLabelModule, InputTextModule, FormsModule] }) export class FloatLabelInvalidDemo { value1: string | undefined; value2: string | undefined; value3: string | undefined; } ``` ## Variants The variant property defines the position of the label. Default value is over , whereas in and on are the alternatives. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { FloatLabelModule } from 'primeng/floatlabel'; import { InputTextModule } from 'primeng/inputtext'; @Component({ template: `
`, standalone: true, imports: [FloatLabelModule, InputTextModule, FormsModule] }) export class FloatLabelVariantsDemo { value1: string | undefined; value2: string | undefined; } ``` ## Float Label FloatLabel appears on top of the input field when focused. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | | variant | "in" \| "over" \| "on" | - | Defines the positioning of the label relative to the input. | ## Pass Through Options | Name | Type | Description | |------|------|-------------| | host | PassThroughOption | Used to pass attributes to the host's DOM element. | | root | PassThroughOption | Used to pass attributes to the root's DOM element. | ## Theming ### CSS Classes | Class | Description | |-------|-------------| | p-floatlabel | Class name of the root element | ### Design Tokens | Token | CSS Variable | Description | |-------|--------------|-------------| | floatlabel.color | --p-floatlabel-color | Color of root | | floatlabel.focus.color | --p-floatlabel-focus-color | Focus color of root | | floatlabel.active.color | --p-floatlabel-active-color | Active color of root | | floatlabel.invalid.color | --p-floatlabel-invalid-color | Invalid color of root | | floatlabel.transition.duration | --p-floatlabel-transition-duration | Transition duration of root | | floatlabel.position.x | --p-floatlabel-position-x | Position x of root | | floatlabel.position.y | --p-floatlabel-position-y | Position y of root | | floatlabel.font.size | --p-floatlabel-font-size | Font size of root | | floatlabel.font.weight | --p-floatlabel-font-weight | Font weight of root | | floatlabel.active.font.size | --p-floatlabel-active-font-size | Active font size of root | | floatlabel.active.font.weight | --p-floatlabel-active-font-weight | Active font weight of root | | floatlabel.over.active.top | --p-floatlabel-over-active-top | Active top of over | | floatlabel.in.input.padding.top | --p-floatlabel-in-input-padding-top | Input padding top of in | | floatlabel.in.input.padding.bottom | --p-floatlabel-in-input-padding-bottom | Input padding bottom of in | | floatlabel.in.active.top | --p-floatlabel-in-active-top | Active top of in | | floatlabel.on.border.radius | --p-floatlabel-on-border-radius | Border radius of on | | floatlabel.on.active.background | --p-floatlabel-on-active-background | Active background of on | | floatlabel.on.active.padding | --p-floatlabel-on-active-padding | Active padding of on | --- # Angular Fluid Component Fluid is a layout component to make descendant components span full width of their container. ## Accessibility Screen Reader Fluid does not require any roles and attributes. Keyboard Support Component does not include any interactive elements. ## Basic Components with the fluid option like InputText have the ability to span the full width of their component. Enabling the fluid for each component individually may be cumbersome so wrap the content with Fluid to instead for an easier alternative. Any component that has the fluid property can be nested inside the Fluid component. The fluid property of a child component has higher precedence than the fluid container as shown in the last sample. **Example:** ```typescript import { Component } from '@angular/core'; import { InputTextModule } from 'primeng/inputtext'; @Component({ template: `
Fluid Container
`, standalone: true, imports: [InputTextModule] }) export class FluidBasicDemo {} ``` ## Fluid Fluid is a layout component to make descendant components span full width of their container. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | ## Pass Through Options | Name | Type | Description | |------|------|-------------| | host | PassThroughOption | Used to pass attributes to the host's DOM element. | | root | PassThroughOption | Used to pass attributes to the root's DOM element. | ## Theming ### CSS Classes | Class | Description | |-------|-------------| | p-fluid | Class name of the root element | --- # Angular Focus Trap Component Focus Trap keeps focus within a certain DOM element while tabbing. ## Basic FocusTrap is applied to a container element with the pFocusTrap directive. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { ButtonModule } from 'primeng/button'; import { CheckboxModule } from 'primeng/checkbox'; import { IconFieldModule } from 'primeng/iconfield'; import { InputIconModule } from 'primeng/inputicon'; import { InputTextModule } from 'primeng/inputtext'; @Component({ template: `
`, standalone: true, imports: [ButtonModule, CheckboxModule, IconFieldModule, InputIconModule, InputTextModule, FormsModule] }) export class FocusTrapBasicDemo { name: string = ''; email: string = ''; accept: boolean = false; } ``` ## Focus Trap Focus Trap keeps focus within a certain DOM element while tabbing. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | any | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | | pFocusTrapDisabled | boolean | - | When set as true, focus wouldn't be managed. | --- # Angular Gallery Component Galleria is an advanced content gallery component. ## Accessibility Screen Reader Galleria uses region role and since any attribute is passed to the main container element, attributes such as aria-label and aria-roledescription can be used as well. The slides container has aria-live attribute set as "polite" if galleria is not in autoplay mode, otherwise "off" would be the value in autoplay. A slide has a group role with an aria-label that refers to the aria.slideNumber property of the locale API. Similarly aria.slide is used as the aria-roledescription of the item. Inactive slides are hidden from the readers with aria-hidden . Next and Previous navigators are button elements with aria-label attributes referring to the aria.nextPageLabel and aria.firstPageLabel properties of the locale API by default respectively, you may still use your own aria roles and attributes as any valid attribute is passed to the button elements implicitly by using nextButtonProps and prevButtonProps . Quick navigation elements and thumnbails follow the tab pattern. They are placed inside an element with a tablist role whereas each item has a tab role with aria-selected and aria-controls attributes. The aria-label attribute of a quick navigation item refers to the aria.pageLabel of the locale API. Current page is marked with aria-current . In full screen mode, modal element uses dialog role with aria-modal enabled. The close button retrieves aria-label from the aria.close property of the locale API. Next/Prev Keyboard Support Key Function tab Moves focus through interactive elements in the carousel. enter Activates navigation. space Activates navigation. Quick Navigation Keyboard Support Key Function tab Moves focus through the active slide link. enter Activates the focused slide link. space Activates the focused slide link. right arrow Moves focus to the next slide link. left arrow Moves focus to the previous slide link. home Moves focus to the first slide link. end Moves focus to the last slide link. ## Advanced Galleria can be extended further to implement complex requirements. **Example:** ```typescript import { Component, OnInit, inject, signal } from '@angular/core'; import { GalleriaModule } from 'primeng/galleria'; import { ButtonModule } from 'primeng/button'; import { PhotoService } from '@/service/photoservice'; @Component({ template: `
@if (images()) { {{ activeIndex + 1 }}/{{ images().length }} {{ images()[activeIndex].title }} {{ images()[activeIndex].alt }} }
`, standalone: true, imports: [GalleriaModule, ButtonModule], providers: [PhotoService] }) export class GalleriaAdvancedDemo implements OnInit { private photoService = inject(PhotoService); images = signal([]); showThumbnails: boolean = false; fullscreen: boolean = false; activeIndex: number = 0; isAutoPlay: boolean = true; onFullScreenListener: any; responsiveOptions: any[] = [ { breakpoint: '1300px', numVisible: 4 }, { breakpoint: '575px', numVisible: 1 } ]; ngOnInit() { this.photoService.getImages().then((images) => { this.images.set(images); }); this.bindDocumentListeners(); } onThumbnailButtonClick() { this.showThumbnails = !this.showThumbnails; } toggleAutoSlide() { this.isAutoPlay = !this.isAutoPlay; } toggleFullScreen() { if (this.fullscreen) { this.closePreviewFullScreen(); } else { this.openPreviewFullScreen(); } } openPreviewFullScreen() { let elem = this.galleria?.element.nativeElement.querySelector('.p-galleria'); if (elem.requestFullscreen) { elem.requestFullscreen(); } else if (elem['mozRequestFullScreen']) { /* Firefox */ elem['mozRequestFullScreen'](); } else if (elem['webkitRequestFullscreen']) { /* Chrome, Safari & Opera */ elem['webkitRequestFullscreen'](); } else if (elem['msRequestFullscreen']) { /* IE/Edge */ elem['msRequestFullscreen'](); } } onFullScreenChange() { this.fullscreen = !this.fullscreen; } closePreviewFullScreen() { if (isPlatformBrowser(this.platformId)) { if (document.exitFullscreen) { document.exitFullscreen(); } else if (document['mozCancelFullScreen']) { document['mozCancelFullScreen'](); } else if (document['webkitExitFullscreen']) { document['webkitExitFullscreen'](); } else if (document['msExitFullscreen']) { document['msExitFullscreen'](); } } } bindDocumentListeners() { if (isPlatformBrowser(this.platformId)) { this.onFullScreenListener = this.onFullScreenChange.bind(this); document.addEventListener('fullscreenchange', this.onFullScreenListener); document.addEventListener('mozfullscreenchange', this.onFullScreenListener); document.addEventListener('webkitfullscreenchange', this.onFullScreenListener); document.addEventListener('msfullscreenchange', this.onFullScreenListener); } } unbindDocumentListeners() { if (isPlatformBrowser(this.platformId)) { document.removeEventListener('fullscreenchange', this.onFullScreenListener); document.removeEventListener('mozfullscreenchange', this.onFullScreenListener); document.removeEventListener('webkitfullscreenchange', this.onFullScreenListener); document.removeEventListener('msfullscreenchange', this.onFullScreenListener); this.onFullScreenListener = null; } } ngOnDestroy() { this.unbindDocumentListeners(); } slideButtonIcon() { return this.isAutoPlay ? 'pi pi-pause' : 'pi pi-play'; } fullScreenIcon() { return `pi ${this.fullscreen ? 'pi-window-minimize' : 'pi-window-maximize'}`; } } ``` ## AutoPlay A slideshow implementation is defined by adding circular and autoPlay properties. **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { GalleriaModule } from 'primeng/galleria'; import { PhotoService } from '@/service/photoservice'; @Component({ template: ` `, standalone: true, imports: [GalleriaModule], providers: [PhotoService] }) export class GalleriaAutoPlayDemo implements OnInit { private photoService = inject(PhotoService); images: any = model([]); responsiveOptions: any[] = [ { breakpoint: '1300px', numVisible: 4 }, { breakpoint: '575px', numVisible: 1 } ]; ngOnInit() { this.photoService.getImages().then((images) => this.images.set(images)); } } ``` ## Basic Galleria requires a value as a collection of images, item template for the higher resolution image and thumbnail template to display as a thumbnail. **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { GalleriaModule } from 'primeng/galleria'; import { PhotoService } from '@/service/photoservice'; @Component({ template: ` `, standalone: true, imports: [GalleriaModule], providers: [PhotoService] }) export class GalleriaBasicDemo implements OnInit { private photoService = inject(PhotoService); images: any = model([]); responsiveOptions: any[] = [ { breakpoint: '1300px', numVisible: 4 }, { breakpoint: '575px', numVisible: 1 } ]; ngOnInit() { this.photoService.getImages().then((images) => this.images.set(images)); } } ``` ## Caption Description of an image is specified with the caption template. **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { GalleriaModule } from 'primeng/galleria'; import { PhotoService } from '@/service/photoservice'; @Component({ template: `
{{ item.title }}

{{ item.alt }}

 `, standalone: true, imports: [GalleriaModule], providers: [PhotoService] }) export class GalleriaCaptionDemo implements OnInit { private photoService = inject(PhotoService); images: any = model([]); responsiveOptions: any[] = [ { breakpoint: '1300px', numVisible: 4 }, { breakpoint: '575px', numVisible: 1 } ]; ngOnInit() { this.photoService.getImages().then((images) => this.images.set(images)); } } ``` ## Controlled Galleria can be controlled programmatically using the activeIndex property. **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { ButtonModule } from 'primeng/button'; import { GalleriaModule } from 'primeng/galleria'; import { PhotoService } from '@/service/photoservice'; @Component({ template: `
`, standalone: true, imports: [ButtonModule, GalleriaModule], providers: [PhotoService] }) export class GalleriaControlledDemo implements OnInit { private photoService = inject(PhotoService); images: any = model([]); _activeIndex: number = 2; responsiveOptions: any[] = [ { breakpoint: '1300px', numVisible: 4 }, { breakpoint: '575px', numVisible: 1 } ]; ngOnInit() { this.photoService.getImages().then((images) => this.images.set(images)); } next() { this.activeIndex++; } prev() { this.activeIndex--; } } ``` ## Responsive Galleria responsiveness is defined with the responsiveOptions property. **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { GalleriaModule } from 'primeng/galleria'; import { PhotoService } from '@/service/photoservice'; @Component({ template: ` `, standalone: true, imports: [GalleriaModule], providers: [PhotoService] }) export class GalleriaResponsiveDemo implements OnInit { private photoService = inject(PhotoService); images: any = model([]); responsiveOptions: any[] = [ { breakpoint: '1300px', numVisible: 4 }, { breakpoint: '575px', numVisible: 1 } ]; ngOnInit() { this.photoService.getImages().then((images) => this.images.set(images)); } } ``` ## Thumbnail Galleria can be controlled programmatically using the activeIndex property. **Example:** ```typescript import { Component, OnInit, inject, signal } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { GalleriaModule } from 'primeng/galleria'; import { RadioButtonModule } from 'primeng/radiobutton'; import { PhotoService } from '@/service/photoservice'; @Component({ template: `
@for (option of positionOptions; track $index) {
}
`, standalone: true, imports: [GalleriaModule, RadioButtonModule, FormsModule], providers: [PhotoService] }) export class GalleriaThumbnailDemo implements OnInit { private photoService = inject(PhotoService); images = signal([]); positionOptions: any[] = [ { label: 'Bottom', value: 'bottom' }, { label: 'Top', value: 'top' }, { label: 'Left', value: 'left' }, { label: 'Right', value: 'right' } ]; responsiveOptions: any[] = [ { breakpoint: '1300px', numVisible: 4 }, { breakpoint: '575px', numVisible: 1 } ]; ngOnInit() { this.photoService.getImages().then((images) => this.images.set(images)); } } ``` ## Galleria Galleria is an advanced content gallery component. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | | activeIndex | number | - | Index of the first item. | | fullScreen | boolean | - | Whether to display the component on fullscreen. | | id | string | - | Unique identifier of the element. | | value | any[] | - | An array of objects to display. | | numVisible | number | - | Number of items per page. | | responsiveOptions | GalleriaResponsiveOptions[] | - | An array of options for responsive design. | | showItemNavigators | boolean | - | Whether to display navigation buttons in item section. | | showThumbnailNavigators | boolean | - | Whether to display navigation buttons in thumbnail container. | | showItemNavigatorsOnHover | boolean | - | Whether to display navigation buttons on item hover. | | changeItemOnIndicatorHover | boolean | - | When enabled, item is changed on indicator hover. | | circular | boolean | - | Defines if scrolling would be infinite. | | autoPlay | boolean | - | Items are displayed with a slideshow in autoPlay mode. | | shouldStopAutoplayByClick | boolean | - | When enabled, autorun should stop by click. | | transitionInterval | number | - | Time in milliseconds to scroll items. | | showThumbnails | boolean | - | Whether to display thumbnail container. | | thumbnailsPosition | "bottom" \| "top" \| "left" \| "right" | - | Position of thumbnails. | | verticalThumbnailViewPortHeight | string | - | Height of the viewport in vertical thumbnail. | | showIndicators | boolean | - | Whether to display indicator container. | | showIndicatorsOnItem | boolean | - | When enabled, indicator container is displayed on item container. | | indicatorsPosition | "bottom" \| "top" \| "left" \| "right" | - | Position of indicators. | | baseZIndex | number | - | Base zIndex value to use in layering. | | maskClass | string | - | Style class of the mask on fullscreen mode. | | containerClass | string | - | Style class of the component on fullscreen mode. Otherwise, the 'class' property can be used. | | containerStyle | Partial | - | Inline style of the component on fullscreen mode. Otherwise, the 'style' property can be used. | | motionOptions | MotionOptions | - | The motion options. | | maskMotionOptions | MotionOptions | - | The mask motion options. | | visible | boolean | - | Specifies the visibility of the mask on fullscreen mode. | ### Emits | Name | Parameters | Description | |------|------------|-------------| | activeIndexChange | value: number | Callback to invoke on active index change. | ### Templates | Name | Type | Description | |------|------|-------------| | header | TemplateRef | Custom header template. | | footer | TemplateRef | Custom footer template. | | indicator | TemplateRef | Custom indicator template. | | caption | TemplateRef> | Custom caption template. | | closeicon | TemplateRef | Custom close icon template. | | previousthumbnailicon | TemplateRef | Custom previous thumbnail icon template. | | nextthumbnailicon | TemplateRef | Custom next thumbnail icon template. | | itempreviousicon | TemplateRef | Custom item previous icon template. | | itemnexticon | TemplateRef | Custom item next icon template. | | item | TemplateRef> | Custom item template. | | thumbnail | TemplateRef> | Custom thumbnail template. | ## Pass Through Options | Name | Type | Description | |------|------|-------------| | host | PassThroughOption | Used to pass attributes to the host's DOM element. | | root | PassThroughOption | Used to pass attributes to the root's DOM element. | | mask | PassThroughOption | Used to pass attributes to the mask's DOM element. | | closeButton | PassThroughOption | Used to pass attributes to the close button's DOM element. | | closeIcon | PassThroughOption | Used to pass attributes to the close icon's DOM element. | | header | PassThroughOption | Used to pass attributes to the header's DOM element. | | content | PassThroughOption | Used to pass attributes to the content's DOM element. | | itemsContainer | PassThroughOption | Used to pass attributes to the items container's DOM element. | | items | PassThroughOption | Used to pass attributes to the items's DOM element. | | prevButton | PassThroughOption | Used to pass attributes to the previous button's DOM element. | | prevIcon | PassThroughOption | Used to pass attributes to the previous icon's DOM element. | | item | PassThroughOption | Used to pass attributes to the item's DOM element. | | nextButton | PassThroughOption | Used to pass attributes to the next button's DOM element. | | nextIcon | PassThroughOption | Used to pass attributes to the next icon's DOM element. | | caption | PassThroughOption | Used to pass attributes to the caption's DOM element. | | indicatorList | PassThroughOption | Used to pass attributes to the indicator list's DOM element. | | indicator | PassThroughOption | Used to pass attributes to the indicator's DOM element. | | indicatorButton | PassThroughOption | Used to pass attributes to the indicator button's DOM element. | | thumbnails | PassThroughOption | Used to pass attributes to the thumbnails's DOM element. | | thumbnailContent | PassThroughOption | Used to pass attributes to the thumbnail content's DOM element. | | thumbnailPrevButton | PassThroughOption | Used to pass attributes to the thumbnail previous button's DOM element. | | thumbnailPrevIcon | PassThroughOption | Used to pass attributes to the thumbnail previous icon's DOM element. | | thumbnailsViewport | PassThroughOption | Used to pass attributes to the thumbnails viewport's DOM element. | | thumbnailItems | PassThroughOption | Used to pass attributes to the thumbnail items's DOM element. | | thumbnailItem | PassThroughOption | Used to pass attributes to the thumbnail item's DOM element. | | thumbnail | PassThroughOption | Used to pass attributes to the thumbnail's DOM element. | | thumbnailNextButton | PassThroughOption | Used to pass attributes to the thumbnail next button's DOM element. | | thumbnailNextIcon | PassThroughOption | Used to pass attributes to the thumbnail next icon's DOM element. | | footer | PassThroughOption | Used to pass attributes to the footer's DOM element. | | motion | MotionOptions | Used to pass options to the motion component/directive. | | maskMotion | MotionOptions | Used to pass motion options for the mask animation. | ## Theming ### CSS Classes | Class | Description | |-------|-------------| | p-galleria-mask | Class name of the mask element | | p-galleria | Class name of the root element | | p-galleria-close-button | Class name of the close button element | | p-galleria-close-icon | Class name of the close icon element | | p-galleria-header | Class name of the header element | | p-galleria-content | Class name of the content element | | p-galleria-footer | Class name of the footer element | | p-galleria-items-container | Class name of the items container element | | p-galleria-items | Class name of the items element | | p-galleria-prev-button | Class name of the previous item button element | | p-galleria-prev-icon | Class name of the previous item icon element | | p-galleria-item | Class name of the item element | | p-galleria-next-button | Class name of the next item button element | | p-galleria-next-icon | Class name of the next item icon element | | p-galleria-caption | Class name of the caption element | | p-galleria-indicator-list | Class name of the indicator list element | | p-galleria-indicator | Class name of the indicator element | | p-galleria-indicator-button | Class name of the indicator button element | | p-galleria-thumbnails | Class name of the thumbnails element | | p-galleria-thumbnails-content | Class name of the thumbnail content element | | p-galleria-thumbnail-prev-button | Class name of the previous thumbnail button element | | p-galleria-thumbnail-prev-icon | Class name of the previous thumbnail icon element | | p-galleria-thumbnails-viewport | Class name of the thumbnails viewport element | | p-galleria-thumbnail-items | Class name of the thumbnail items element | | p-galleria-thumbnail-item | Class name of the thumbnail item element | | p-galleria-thumbnail | Class name of the thumbnail element | | p-galleria-thumbnail-next-button | Class name of the next thumbnail button element | | p-galleria-thumbnail-next-icon | Class name of the next thumbnail icon element | ### Design Tokens | Token | CSS Variable | Description | |-------|--------------|-------------| | galleria.border.width | --p-galleria-border-width | Border width of root | | galleria.border.color | --p-galleria-border-color | Border color of root | | galleria.border.radius | --p-galleria-border-radius | Border radius of root | | galleria.transition.duration | --p-galleria-transition-duration | Transition duration of root | | galleria.nav.button.background | --p-galleria-nav-button-background | Background of nav button | | galleria.nav.button.hover.background | --p-galleria-nav-button-hover-background | Hover background of nav button | | galleria.nav.button.color | --p-galleria-nav-button-color | Color of nav button | | galleria.nav.button.hover.color | --p-galleria-nav-button-hover-color | Hover color of nav button | | galleria.nav.button.size | --p-galleria-nav-button-size | Size of nav button | | galleria.nav.button.gutter | --p-galleria-nav-button-gutter | Gutter of nav button | | galleria.nav.button.prev.border.radius | --p-galleria-nav-button-prev-border-radius | Prev border radius of nav button | | galleria.nav.button.next.border.radius | --p-galleria-nav-button-next-border-radius | Next border radius of nav button | | galleria.nav.button.focus.ring.width | --p-galleria-nav-button-focus-ring-width | Focus ring width of nav button | | galleria.nav.button.focus.ring.style | --p-galleria-nav-button-focus-ring-style | Focus ring style of nav button | | galleria.nav.button.focus.ring.color | --p-galleria-nav-button-focus-ring-color | Focus ring color of nav button | | galleria.nav.button.focus.ring.offset | --p-galleria-nav-button-focus-ring-offset | Focus ring offset of nav button | | galleria.nav.button.focus.ring.shadow | --p-galleria-nav-button-focus-ring-shadow | Focus ring shadow of nav button | | galleria.nav.icon.size | --p-galleria-nav-icon-size | Size of nav icon | | galleria.thumbnails.content.background | --p-galleria-thumbnails-content-background | Background of thumbnails content | | galleria.thumbnails.content.padding | --p-galleria-thumbnails-content-padding | Padding of thumbnails content | | galleria.thumbnail.nav.button.size | --p-galleria-thumbnail-nav-button-size | Size of thumbnail nav button | | galleria.thumbnail.nav.button.border.radius | --p-galleria-thumbnail-nav-button-border-radius | Border radius of thumbnail nav button | | galleria.thumbnail.nav.button.gutter | --p-galleria-thumbnail-nav-button-gutter | Gutter of thumbnail nav button | | galleria.thumbnail.nav.button.focus.ring.width | --p-galleria-thumbnail-nav-button-focus-ring-width | Focus ring width of thumbnail nav button | | galleria.thumbnail.nav.button.focus.ring.style | --p-galleria-thumbnail-nav-button-focus-ring-style | Focus ring style of thumbnail nav button | | galleria.thumbnail.nav.button.focus.ring.color | --p-galleria-thumbnail-nav-button-focus-ring-color | Focus ring color of thumbnail nav button | | galleria.thumbnail.nav.button.focus.ring.offset | --p-galleria-thumbnail-nav-button-focus-ring-offset | Focus ring offset of thumbnail nav button | | galleria.thumbnail.nav.button.focus.ring.shadow | --p-galleria-thumbnail-nav-button-focus-ring-shadow | Focus ring shadow of thumbnail nav button | | galleria.thumbnail.nav.button.hover.background | --p-galleria-thumbnail-nav-button-hover-background | Hover background of thumbnail nav button | | galleria.thumbnail.nav.button.color | --p-galleria-thumbnail-nav-button-color | Color of thumbnail nav button | | galleria.thumbnail.nav.button.hover.color | --p-galleria-thumbnail-nav-button-hover-color | Hover color of thumbnail nav button | | galleria.thumbnail.nav.button.icon.size | --p-galleria-thumbnail-nav-button-icon-size | Size of thumbnail nav button icon | | galleria.caption.background | --p-galleria-caption-background | Background of caption | | galleria.caption.color | --p-galleria-caption-color | Color of caption | | galleria.caption.padding | --p-galleria-caption-padding | Padding of caption | | galleria.indicator.list.gap | --p-galleria-indicator-list-gap | Gap of indicator list | | galleria.indicator.list.padding | --p-galleria-indicator-list-padding | Padding of indicator list | | galleria.indicator.button.width | --p-galleria-indicator-button-width | Width of indicator button | | galleria.indicator.button.height | --p-galleria-indicator-button-height | Height of indicator button | | galleria.indicator.button.active.background | --p-galleria-indicator-button-active-background | Active background of indicator button | | galleria.indicator.button.border.radius | --p-galleria-indicator-button-border-radius | Border radius of indicator button | | galleria.indicator.button.focus.ring.width | --p-galleria-indicator-button-focus-ring-width | Focus ring width of indicator button | | galleria.indicator.button.focus.ring.style | --p-galleria-indicator-button-focus-ring-style | Focus ring style of indicator button | | galleria.indicator.button.focus.ring.color | --p-galleria-indicator-button-focus-ring-color | Focus ring color of indicator button | | galleria.indicator.button.focus.ring.offset | --p-galleria-indicator-button-focus-ring-offset | Focus ring offset of indicator button | | galleria.indicator.button.focus.ring.shadow | --p-galleria-indicator-button-focus-ring-shadow | Focus ring shadow of indicator button | | galleria.indicator.button.background | --p-galleria-indicator-button-background | Background of indicator button | | galleria.indicator.button.hover.background | --p-galleria-indicator-button-hover-background | Hover background of indicator button | | galleria.inset.indicator.list.background | --p-galleria-inset-indicator-list-background | Background of inset indicator list | | galleria.inset.indicator.button.background | --p-galleria-inset-indicator-button-background | Background of inset indicator button | | galleria.inset.indicator.button.hover.background | --p-galleria-inset-indicator-button-hover-background | Hover background of inset indicator button | | galleria.inset.indicator.button.active.background | --p-galleria-inset-indicator-button-active-background | Active background of inset indicator button | | galleria.close.button.size | --p-galleria-close-button-size | Size of close button | | galleria.close.button.gutter | --p-galleria-close-button-gutter | Gutter of close button | | galleria.close.button.background | --p-galleria-close-button-background | Background of close button | | galleria.close.button.hover.background | --p-galleria-close-button-hover-background | Hover background of close button | | galleria.close.button.color | --p-galleria-close-button-color | Color of close button | | galleria.close.button.hover.color | --p-galleria-close-button-hover-color | Hover color of close button | | galleria.close.button.border.radius | --p-galleria-close-button-border-radius | Border radius of close button | | galleria.close.button.focus.ring.width | --p-galleria-close-button-focus-ring-width | Focus ring width of close button | | galleria.close.button.focus.ring.style | --p-galleria-close-button-focus-ring-style | Focus ring style of close button | | galleria.close.button.focus.ring.color | --p-galleria-close-button-focus-ring-color | Focus ring color of close button | | galleria.close.button.focus.ring.offset | --p-galleria-close-button-focus-ring-offset | Focus ring offset of close button | | galleria.close.button.focus.ring.shadow | --p-galleria-close-button-focus-ring-shadow | Focus ring shadow of close button | | galleria.close.button.icon.size | --p-galleria-close-button-icon-size | Size of close button icon | --- # Angular Gallery Component Gallery is an image viewer with zoom, rotate, flip and download capabilities. ## Accessibility Screen Reader Gallery uses semantic button elements for all interactive controls. The data-scope and data-part attributes identify each part of the gallery for assistive technologies. Use aria-label attributes on buttons to provide accessible names. ## Basic Gallery provides a composition-based API with sub-components for full control over the layout. Each part of the gallery (header, content, footer, toolbar, thumbnails) is a separate component. **Example:** ```typescript import { Component } from '@angular/core'; import { GalleryModule } from 'primeng/gallery'; import { ChevronLeft } from '@primeicons/angular/chevron-left'; import { ChevronRight } from '@primeicons/angular/chevron-right'; import { Replay } from '@primeicons/angular/replay'; import { Refresh } from '@primeicons/angular/refresh'; import { SearchPlus } from '@primeicons/angular/search-plus'; import { SearchMinus } from '@primeicons/angular/search-minus'; import { ArrowsH } from '@primeicons/angular/arrows-h'; import { ArrowsV } from '@primeicons/angular/arrows-v'; import { Download } from '@primeicons/angular/download'; import { ArrowUpRightAndArrowDownLeftFromCenter } from '@primeicons/angular/arrow-up-right-and-arrow-down-left-from-center'; import { ArrowDownLeftAndArrowUpRightToCenter } from '@primeicons/angular/arrow-down-left-and-arrow-up-right-to-center'; @Component({ template: ` @for (image of images; track image) { image } @for (image of images; track image; let i = $index) { } `, standalone: true, imports: [GalleryModule, ChevronLeft, ChevronRight, Replay, Refresh, SearchPlus, SearchMinus, ArrowsH, ArrowsV, Download, ArrowUpRightAndArrowDownLeftFromCenter, ArrowDownLeftAndArrowUpRightToCenter] }) export class GalleryBasicDemo { photos: [number, number, number][] = [ [10, 1200, 800], [11, 800, 1200], [15, 1400, 700], [16, 700, 1050], [17, 1000, 1000], [18, 1300, 650], [19, 600, 1200], [20, 1200, 900], [27, 750, 1125], [28, 1400, 800], [29, 800, 1100], [36, 1100, 700], [37, 650, 1300], [39, 1200, 750], [42, 900, 1200], [43, 1300, 800], [47, 700, 1400], [48, 1000, 800], [49, 800, 1000], [50, 1400, 600], [52, 600, 900], [53, 1200, 1200], [54, 900, 600], [55, 750, 1000], [56, 1100, 800], [57, 1400, 900], [58, 850, 1275], [59, 1000, 600], [60, 600, 1000], [64, 1300, 1300] ]; images: any = this.photos.map(([id, w, h]) => `https://picsum.photos/id/${id}/${w}/${h}`); } ``` ## Grid Gallery can be used as a lightbox by combining it with a grid of thumbnails. Click on an image to open the gallery in fullscreen overlay. **Example:** ```typescript import { Component, signal } from '@angular/core'; import { GalleryModule } from 'primeng/gallery'; import { ChevronLeft } from '@primeicons/angular/chevron-left'; import { ChevronRight } from '@primeicons/angular/chevron-right'; import { Replay } from '@primeicons/angular/replay'; import { Refresh } from '@primeicons/angular/refresh'; import { SearchPlus } from '@primeicons/angular/search-plus'; import { SearchMinus } from '@primeicons/angular/search-minus'; import { ArrowsH } from '@primeicons/angular/arrows-h'; import { ArrowsV } from '@primeicons/angular/arrows-v'; import { Download } from '@primeicons/angular/download'; import { Times } from '@primeicons/angular/times'; @Component({ template: `
@for (image of images; track image; let i = $index) {
image
}
@if (open()) {
@for (image of images; track image) { image } @for (image of images; track image; let i = $index) { }
} `, standalone: true, imports: [GalleryModule, ChevronLeft, ChevronRight, Replay, Refresh, SearchPlus, SearchMinus, ArrowsH, ArrowsV, Download, Times] }) export class GalleryGridDemo { photos: [number, number, number][] = [ [10, 1200, 800], [11, 800, 1200], [15, 1400, 700], [16, 700, 1050], [17, 1000, 1000], [18, 1300, 650], [19, 600, 1200], [20, 1200, 900], [27, 750, 1125], [28, 1400, 800], [29, 800, 1100], [36, 1100, 700], [37, 650, 1300], [39, 1200, 750], [42, 900, 1200], [43, 1300, 800], [47, 700, 1400], [48, 1000, 800], [49, 800, 1000], [50, 1400, 600], [52, 600, 900], [53, 1200, 1200], [54, 900, 600], [55, 750, 1000], [56, 1100, 800], [57, 1400, 900], [58, 850, 1275], [59, 1000, 600], [60, 600, 1000], [64, 1300, 1300] ]; images: any = this.photos.map(([id, w, h]) => `https://picsum.photos/id/${id}/${w}/${h}`); activeIndex: number = 0; open = signal(false); handleOpen(index: number) { this.activeIndex = index; this.open.set(true); } close() { this.open.set(false); } onActiveIndexChange(event: GalleryActiveIndexChangeEvent) { this.activeIndex = event.value; } } ``` ## Gallery Gallery is the main container component for the Gallery. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | | activeIndex | number | 0 | The index of the active item. | ### Emits | Name | Parameters | Description | |------|------------|-------------| | onActiveIndexChange | event: GalleryActiveIndexChangeEvent | Callback fired when the gallery's active index changes. | ## Gallery Backdrop GalleryBackdrop represents the backdrop element for fullscreen mode. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | ## Gallery Content GalleryContent represents the main content area of the gallery. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | ## Gallery Download GalleryDownload represents the download action button. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | ## Gallery Flip X GalleryFlipX represents the horizontal flip action button. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | ## Gallery Flip Y GalleryFlipY represents the vertical flip action button. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | ## Gallery Footer GalleryFooter represents the footer section of the gallery. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | ## Gallery Full Screen GalleryFullScreen represents the fullscreen toggle button. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | ## Gallery Header GalleryHeader represents the header section of the gallery. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | ## Gallery Item GalleryItem represents an individual item in the gallery. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | | normalScale | number | 1 | The normal scale of the gallery item. | | zoomedScale | number | 3 | The zoomed scale of the gallery item. | ## Gallery Next GalleryNext represents the next navigation button. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | ## Gallery Prev GalleryPrev represents the previous navigation button. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | ## Gallery Rotate Left GalleryRotateLeft represents the rotate left action button. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | ## Gallery Rotate Right GalleryRotateRight represents the rotate right action button. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | ## Gallery Thumbnail Content GalleryThumbnailContent represents the thumbnail carousel content area. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | ## Gallery Thumbnail Item GalleryThumbnailItem represents an individual thumbnail item. Exposes its content as a TemplateRef so GalleryThumbnail can render it inside a carousel item. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | index | number | - | The index of the thumbnail item. | ## Gallery Thumbnail GalleryThumbnail represents the thumbnail carousel wrapper. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | | autoSize | boolean | true | Whether the carousel should auto size items. | | loop | boolean | true | Whether the carousel should loop. | | align | "center" \| "start" \| "end" | 'center' | Alignment of the carousel items. | | spacing | number | 8 | Spacing between carousel items in pixels. | | orientation | "vertical" \| "horizontal" | 'horizontal' | Orientation of the carousel. | | snapType | "mandatory" \| "proximity" | 'mandatory' | Scroll snap type applied to the track. | | slidesPerPage | number | 1 | How many slides are visible per page. | ## Gallery Toolbar Item GalleryToolbarItem represents an individual toolbar item. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | | action | string | - | The action to dispatch when the toolbar item is clicked. | ## Gallery Toolbar GalleryToolbar represents the toolbar container. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | ## Gallery Zoom In GalleryZoomIn represents the zoom in action button. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | ## Gallery Zoom Out GalleryZoomOut represents the zoom out action button. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | ## Gallery Zoom Toggle GalleryZoomToggle represents the zoom toggle action button. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | ## Pass Through Options | Name | Type | Description | |------|------|-------------| | root | PassThroughOption | Used to pass attributes to the root's DOM element. | ## Theming ### CSS Classes | Class | Description | |-------|-------------| | p-gallery | Class name of the root element | | p-gallery-backdrop | Class name of the backdrop element | | p-gallery-header | Class name of the header element | | p-gallery-footer | Class name of the footer element | | p-gallery-content | Class name of the content element | | p-gallery-item | Class name of the item element | | p-gallery-next | Class name of the next button element | | p-gallery-prev | Class name of the prev button element | | p-gallery-toolbar | Class name of the toolbar element | | p-gallery-toolbar-item | Class name of the toolbar item element | | p-gallery-action | Class name of the action element | | p-gallery-thumbnail | Class name of the thumbnail element | | p-gallery-thumbnail-content | Class name of the thumbnail content element | | p-gallery-thumbnail-item | Class name of the thumbnail item element | ### Design Tokens | Token | CSS Variable | Description | |-------|--------------|-------------| | gallery.backdrop.background | --p-gallery-backdrop-background | Background of backdrop | | gallery.header.padding | --p-gallery-header-padding | Padding of header | | gallery.header.background | --p-gallery-header-background | Background of header | | gallery.footer.padding | --p-gallery-footer-padding | Padding of footer | | gallery.footer.background | --p-gallery-footer-background | Background of footer | | gallery.footer.border.color | --p-gallery-footer-border-color | Border color of footer | | gallery.item.transition.duration | --p-gallery-item-transition-duration | Transition duration of item (transform and opacity) | | gallery.action.size | --p-gallery-action-size | Size of action (shared by action / next / prev) | | gallery.action.border.radius | --p-gallery-action-border-radius | Border radius of action | | gallery.action.color | --p-gallery-action-color | Color of action | | gallery.action.hover.background | --p-gallery-action-hover-background | Hover background of action | | gallery.action.hover.color | --p-gallery-action-hover-color | Hover color of action | | gallery.action.disabled.opacity | --p-gallery-action-disabled-opacity | Disabled opacity of action | | gallery.action.transition.duration | --p-gallery-action-transition-duration | Transition duration of action | | gallery.action.icon.size | --p-gallery-action-icon-size | Icon size of action | | gallery.navigation.background | --p-gallery-navigation-background | Background of navigation (next / prev) | | gallery.navigation.size | --p-gallery-navigation-size | Size of navigation | | gallery.navigation.border.radius | --p-gallery-navigation-border-radius | Border radius of navigation | | gallery.navigation.color | --p-gallery-navigation-color | Color of navigation | | gallery.navigation.hover.background | --p-gallery-navigation-hover-background | Hover background of navigation | | gallery.navigation.hover.color | --p-gallery-navigation-hover-color | Hover color of navigation | | gallery.navigation.offset | --p-gallery-navigation-offset | Edge offset of navigation | | gallery.navigation.transition.duration | --p-gallery-navigation-transition-duration | Transition duration of navigation | | gallery.navigation.icon.size | --p-gallery-navigation-icon-size | Icon size of navigation | | gallery.thumbnail.size | --p-gallery-thumbnail-size | Size of thumbnail item | | gallery.thumbnail.padding | --p-gallery-thumbnail-padding | Padding of thumbnail item | | gallery.thumbnail.background | --p-gallery-thumbnail-background | Background of thumbnail item | | gallery.thumbnail.border.radius | --p-gallery-thumbnail-border-radius | Border radius of thumbnail item | | gallery.thumbnail.border.width | --p-gallery-thumbnail-border-width | Border width of thumbnail item (outline width) | | gallery.thumbnail.hover.border.color | --p-gallery-thumbnail-hover-border-color | Hover border color of thumbnail item | | gallery.thumbnail.active.border.color | --p-gallery-thumbnail-active-border-color | Active border color of thumbnail item | | gallery.thumbnail.active.scale | --p-gallery-thumbnail-active-scale | Active scale of thumbnail item | | gallery.thumbnail.transition.duration | --p-gallery-thumbnail-transition-duration | Transition duration of thumbnail item | | gallery.thumbnail.content.padding | --p-gallery-thumbnail-content-padding | Padding of thumbnail content | --- # Angular IconField Component IconField wraps an input and an icon. ## Accessibility Screen Reader IconField and InputIcon does not require any roles and attributes. Keyboard Support Components does not include any interactive elements. ## Basic A group is created by wrapping the input and icon with the IconField component. Each icon is defined as a child of InputIcon component. In addition, position of the icon can be changed using iconPosition property that the default value is right and also left option is available. **Example:** ```typescript import { Component } from '@angular/core'; import { IconFieldModule } from 'primeng/iconfield'; import { InputIconModule } from 'primeng/inputicon'; import { InputTextModule } from 'primeng/inputtext'; @Component({ template: `
`, standalone: true, imports: [IconFieldModule, InputIconModule, InputTextModule] }) export class IconFieldBasicDemo {} ``` ## floatlabel-doc FloatLabel visually integrates a label with its form element. Visit FloatLabel documentation for more information. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { FloatLabelModule } from 'primeng/floatlabel'; import { IconFieldModule } from 'primeng/iconfield'; import { InputIconModule } from 'primeng/inputicon'; import { InputTextModule } from 'primeng/inputtext'; @Component({ template: `
`, standalone: true, imports: [FloatLabelModule, IconFieldModule, InputIconModule, InputTextModule, FormsModule] }) export class IconFieldFloatLabelDemo { value1: string | undefined; value2: string | undefined; value3: string | undefined; } ``` ## iftalabel-doc IftaLabel is used to create infield top aligned labels. Visit IftaLabel documentation for more information. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { IconFieldModule } from 'primeng/iconfield'; import { IftaLabelModule } from 'primeng/iftalabel'; import { InputIconModule } from 'primeng/inputicon'; import { InputTextModule } from 'primeng/inputtext'; @Component({ template: `
`, standalone: true, imports: [IconFieldModule, IftaLabelModule, InputIconModule, InputTextModule, FormsModule] }) export class IconFieldIftaLabelDemo { value: string | undefined; } ``` ## Sizes IconField is compatible with the pSize setting of the input field. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { IconFieldModule } from 'primeng/iconfield'; import { InputIconModule } from 'primeng/inputicon'; import { InputTextModule } from 'primeng/inputtext'; @Component({ template: `
`, standalone: true, imports: [IconFieldModule, InputIconModule, InputTextModule, FormsModule] }) export class IconFieldSizesDemo { value1: any = null; value2: any = null; value3: any = null; } ``` ## Template An eye icon is displayed by default when the image is hovered in preview mode. Use the indicator template for custom content. **Example:** ```typescript import { Component } from '@angular/core'; import { IconFieldModule } from 'primeng/iconfield'; import { InputIconModule } from 'primeng/inputicon'; import { InputTextModule } from 'primeng/inputtext'; @Component({ template: `
`, standalone: true, imports: [IconFieldModule, InputIconModule, InputTextModule] }) export class IconFieldTemplateDemo {} ``` ## Icon Field IconField wraps an input and an icon. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | | iconPosition | "right" \| "left" | - | Position of the icon. | ## Pass Through Options | Name | Type | Description | |------|------|-------------| | host | PassThroughOption | Used to pass attributes to the host's DOM element. | | root | PassThroughOption | Used to pass attributes to the root's DOM element. | ## Theming ### CSS Classes | Class | Description | |-------|-------------| | p-iconfield | Class name of the root element | ### Design Tokens | Token | CSS Variable | Description | |-------|--------------|-------------| | iconfield.icon.color | --p-iconfield-icon-color | Color of icon | --- # Angular Ifta Label Component IftaLabel is used to create infield top aligned labels. ## Accessibility Screen Reader IftaLabel does not require any roles and attributes. Keyboard Support Component does not include any interactive elements. ## Basic IftaLabel is used by wrapping the input and its label. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { IftaLabelModule } from 'primeng/iftalabel'; import { InputTextModule } from 'primeng/inputtext'; @Component({ template: `
`, standalone: true, imports: [IftaLabelModule, InputTextModule, FormsModule] }) export class IftaLabelBasicDemo { value: string | undefined; } ``` ## Invalid When the form element is invalid, the label is also highlighted. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { IftaLabelModule } from 'primeng/iftalabel'; import { InputTextModule } from 'primeng/inputtext'; @Component({ template: `
`, standalone: true, imports: [IftaLabelModule, InputTextModule, FormsModule] }) export class IftaLabelInvalidDemo { value: string | undefined; } ``` ## Ifta Label IftaLabel is used to create infield top aligned labels. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | ## Pass Through Options | Name | Type | Description | |------|------|-------------| | host | PassThroughOption | Used to pass attributes to the host's DOM element. | | root | PassThroughOption | Used to pass attributes to the root's DOM element. | ## Theming ### CSS Classes | Class | Description | |-------|-------------| | p-iftalabel | Class name of the root element | ### Design Tokens | Token | CSS Variable | Description | |-------|--------------|-------------| | iftalabel.color | --p-iftalabel-color | Color of root | | iftalabel.focus.color | --p-iftalabel-focus-color | Focus color of root | | iftalabel.invalid.color | --p-iftalabel-invalid-color | Invalid color of root | | iftalabel.transition.duration | --p-iftalabel-transition-duration | Transition duration of root | | iftalabel.position.x | --p-iftalabel-position-x | Position x of root | | iftalabel.top | --p-iftalabel-top | Top of root | | iftalabel.font.size | --p-iftalabel-font-size | Font size of root | | iftalabel.font.weight | --p-iftalabel-font-weight | Font weight of root | | iftalabel.input.padding.top | --p-iftalabel-input-padding-top | Padding top of input | | iftalabel.input.padding.bottom | --p-iftalabel-input-padding-bottom | Padding bottom of input | --- # Angular ImageCompare Component Compare two images side by side with a slider. ## Accessibility Screen Reader ImageComponent component uses a native range slider internally. Value to describe the component can be defined using aria-labelledby and aria-label props. Keyboard Support Key Function tab Moves focus to the component. left arrow up arrow Decrements the value. right arrow down arrow Increments the value. home Set the minimum value. end Set the maximum value. page up Increments the value by 10 steps. page down Decrements the value by 10 steps. ## Basic Images are defined using templating with left and right templates. Use the style or class properties to define the size of the container. **Example:** ```typescript import { Component } from '@angular/core'; import { ImageCompareModule } from 'primeng/imagecompare'; @Component({ template: `
`, standalone: true, imports: [ImageCompareModule] }) export class ImageCompareBasicDemo {} ``` ## Responsive Apply responsive styles to the container element to optimize display per screen size. **Example:** ```typescript import { Component } from '@angular/core'; import { ImageCompareModule } from 'primeng/imagecompare'; @Component({ template: `
`, standalone: true, imports: [ImageCompareModule] }) export class ImageCompareResponsiveDemo {} ``` ## Image Compare Compare two images side by side with a slider. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | | tabindex | number | 0 | Index of the element in tabbing order. | | ariaLabelledby | string | - | Defines a string value that labels an interactive element. | | ariaLabel | string | - | Identifier of the underlying input element. | ### Templates | Name | Type | Description | |------|------|-------------| | left | TemplateRef | Custom left side template. | | right | TemplateRef | Custom right side template. | ## Pass Through Options | Name | Type | Description | |------|------|-------------| | root | PassThroughOption | Used to pass attributes to the root's DOM element. | | slider | PassThroughOption | Used to pass attributes to the slider's DOM element. | ## Theming ### CSS Classes | Class | Description | |-------|-------------| | p-imagecompare | Class name of the root element | | p-imagecompare-slider | Class name of the slider element | ### Design Tokens | Token | CSS Variable | Description | |-------|--------------|-------------| | imagecompare.handle.size | --p-imagecompare-handle-size | Size of handle | | imagecompare.handle.hover.size | --p-imagecompare-handle-hover-size | Hover size of handle | | imagecompare.handle.background | --p-imagecompare-handle-background | Background of handle | | imagecompare.handle.hover.background | --p-imagecompare-handle-hover-background | Hover background of handle | | imagecompare.handle.border.color | --p-imagecompare-handle-border-color | Border color of handle | | imagecompare.handle.hover.border.color | --p-imagecompare-handle-hover-border-color | Hover border color of handle | | imagecompare.handle.border.width | --p-imagecompare-handle-border-width | Border width of handle | | imagecompare.handle.border.radius | --p-imagecompare-handle-border-radius | Border radius of handle | | imagecompare.handle.transition.duration | --p-imagecompare-handle-transition-duration | Transition duration of handle | | imagecompare.handle.focus.ring.width | --p-imagecompare-handle-focus-ring-width | Focus ring width of handle | | imagecompare.handle.focus.ring.style | --p-imagecompare-handle-focus-ring-style | Focus ring style of handle | | imagecompare.handle.focus.ring.color | --p-imagecompare-handle-focus-ring-color | Focus ring color of handle | | imagecompare.handle.focus.ring.offset | --p-imagecompare-handle-focus-ring-offset | Focus ring offset of handle | | imagecompare.handle.focus.ring.shadow | --p-imagecompare-handle-focus-ring-shadow | Focus ring shadow of handle | --- # Angular Inplace Component Inplace provides an easy to do editing and display at the same time where clicking the output displays the actual content. ## Accessibility Screen Reader Inplace component defines aria-live as "polite" by default, since any valid attribute is passed to the main container aria roles and attributes of the root element can be customized easily. Display element uses button role in view mode by default, displayProps can be used for customizations like adding aria-label or aria-labelledby attributes to describe the content of the view mode or even overriding the default role. Closable inplace components displays a button with an aria-label that refers to the aria.close property of the locale API by default, you may use closeButtonProps to customize the element and override the default aria-label . View Mode Keyboard Support Key Function enter Switches to content. Close Button Keyboard Support Key Function enter Switches to display. space Switches to display. ## Basic Inplace component requires display and content templates to define the content of each state. **Example:** ```typescript import { Component } from '@angular/core'; import { InplaceModule } from 'primeng/inplace'; @Component({ template: ` View Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

`, standalone: true, imports: [InplaceModule] }) export class InplaceBasicDemo {} ``` ## Image Any content such as an image can be placed inside an Inplace. **Example:** ```typescript import { Component } from '@angular/core'; import { InplaceModule } from 'primeng/inplace'; import { Photo } from '@/domain/photo'; @Component({ template: ` View Photo Nature `, standalone: true, imports: [InplaceModule] }) export class InplaceImageDemo {} ``` ## Input The closeCallback switches the state back to display mode when called from an event. **Example:** ```typescript import { Component } from '@angular/core'; import { InplaceModule } from 'primeng/inplace'; import { ButtonModule } from 'primeng/button'; import { InputTextModule } from 'primeng/inputtext'; @Component({ template: ` Click to Edit `, standalone: true, imports: [InplaceModule, ButtonModule, InputTextModule] }) export class InplaceInputDemo {} ``` ## Lazy Using the onActivate event, data can be loaded in a lazy manner before displaying it in a table. **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { InplaceModule } from 'primeng/inplace'; import { TableModule } from 'primeng/table'; import { ProductService } from '@/service/productservice'; import { Product } from '@/domain/product'; @Component({ template: ` View Data Code Name Category Quantity {{ product.code }} {{ product.name }} {{ product.category }} {{ product.quantity }} `, standalone: true, imports: [InplaceModule, TableModule], providers: [ProductService] }) export class InplaceLazyDemo implements OnInit { private productService = inject(ProductService); products: Product[] | undefined; ngOnInit() { } } ``` ## Inplace Inplace provides an easy to do editing and display at the same time where clicking the output displays the actual content. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | | active | WritableSignal | - | Whether the content is displayed or not. | | disabled | boolean | - | When present, it specifies that the element should be disabled. | | preventClick | boolean | - | Allows to prevent clicking. | ### Emits | Name | Parameters | Description | |------|------------|-------------| | onActivate | event: Event | Callback to invoke when inplace is opened. | | onDeactivate | event: Event | Callback to invoke when inplace is closed. | ### Templates | Name | Type | Description | |------|------|-------------| | display | TemplateRef | Custom display template. | | content | TemplateRef | Custom content template. | ### Methods | Name | Parameters | Return Type | Description | |------|------------|-------------|-------------| | activate | event: Event | void | Activates the content. | | deactivate | event: Event | void | Deactivates the content. | ## Pass Through Options | Name | Type | Description | |------|------|-------------| | host | PassThroughOption | Used to pass attributes to the host's DOM element. | | root | PassThroughOption | Used to pass attributes to the root's DOM element. | | display | PassThroughOption | Used to pass attributes to the display's DOM element. | | content | PassThroughOption | Used to pass attributes to the content's DOM element. | | pcButton | ButtonPassThrough | Used to pass attributes to the Button component. | ## Theming ### CSS Classes | Class | Description | |-------|-------------| | p-inplace | Class name of the root element | | p-inplace-display | Class name of the display element | | p-inplace-content | Class name of the content element | ### Design Tokens | Token | CSS Variable | Description | |-------|--------------|-------------| | inplace.padding | --p-inplace-padding | Padding of root | | inplace.border.radius | --p-inplace-border-radius | Border radius of root | | inplace.focus.ring.width | --p-inplace-focus-ring-width | Focus ring width of root | | inplace.focus.ring.style | --p-inplace-focus-ring-style | Focus ring style of root | | inplace.focus.ring.color | --p-inplace-focus-ring-color | Focus ring color of root | | inplace.focus.ring.offset | --p-inplace-focus-ring-offset | Focus ring offset of root | | inplace.focus.ring.shadow | --p-inplace-focus-ring-shadow | Focus ring shadow of root | | inplace.transition.duration | --p-inplace-transition-duration | Transition duration of root | | inplace.display.hover.background | --p-inplace-display-hover-background | Hover background of display | | inplace.display.hover.color | --p-inplace-display-hover-color | Hover color of display | --- # Angular InputColor Component InputColor is a composable color picker component. ## Accessibility InputColorArea Screen Reader Support aria-label is used to describe the component. aria-roledescription is used to describe the role of the component. aria-valuemin , aria-valuemax , aria-valuenow , aria-valuetext are used to describe the value of the component. Keyboard Support Key Function tab Moves focus to the area thumb. right arrow Moves the area thumb to the right. left arrow Moves the area thumb to the left. up arrow Moves the area thumb to the up. down arrow Moves the area thumb to the down. InputColorSlider Screen Reader Support aria-label is used to describe the component. aria-valuemin , aria-valuemax , aria-valuenow , aria-valuetext are used to describe the value of the component. Keyboard Support Key Function tab Moves focus to the slider thumb. up arrow || left arrow Decrements the slider thumb. down arrow || right arrow Increments the slider thumb. ## Advanced Advanced color picker with per-format channel sliders, input groups for RGBA, HSBA, HSLA, OKLCH channels, and a CSS output. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { SelectModule } from 'primeng/select'; import { FloatLabelModule } from 'primeng/floatlabel'; import { InputGroupModule } from 'primeng/inputgroup'; import { EyeDropper } from '@primeicons/angular/eye-dropper'; @Component({ template: `
@if (format === 'rgba') { } @if (format === 'hsba') { } @if (format === 'hsla') { }
CSS
`, standalone: true, imports: [SelectModule, FloatLabelModule, InputGroupModule, FormsModule, EyeDropper] }) export class InputColorAdvancedDemo { color: string = ''; format: string = 'hsla'; formatOptions: any[] = [ { label: 'RGBA', value: 'rgba' }, { label: 'HSBA', value: 'hsba' }, { label: 'HSLA', value: 'hsla' }, { label: 'OKLCHA', value: 'oklcha' } ]; } ``` ## Basic InputColor is a composable color picker with area, slider, swatch, and input sub-components. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { SelectModule } from 'primeng/select'; import { InputGroupModule } from 'primeng/inputgroup'; import { EyeDropper } from '@primeicons/angular/eye-dropper'; @Component({ template: `
@if (format === 'hex') { } @if (format === 'rgba') { } @if (format === 'hsba') { } @if (format === 'hsla') { } @if (format === 'oklcha') { }
`, standalone: true, imports: [SelectModule, InputGroupModule, FormsModule, EyeDropper] }) export class InputColorBasicDemo { color: string = '#276def'; format: string = 'hex'; formatOptions: any[] = [ { label: 'HEX', value: 'hex' }, { label: 'RGBA', value: 'rgba' }, { label: 'HSBA', value: 'hsba' }, { label: 'HSLA', value: 'hsla' }, { label: 'OKLCHA', value: 'oklcha' } ]; } ``` ## Color Manager The colorManager module provides utilities for programmatic color manipulation. It exports the Color class and helper functions for working with colors outside of the InputColor component. The Color class is the base class for all color classes. It provides the basic functionality for all color classes. clone() : Clones the color. toString(format) : Converts the color to a string. toFormat(format) : Converts the color to a specific format. toJSON() : Converts the color to a JSON object. getChannelRange(channel) : Returns the range of the channel. getFormat() : Returns the format of the color. getChannels() : Returns the channels of the color. getChannelValue(channel) : Returns the value of the channel. getSpaceAxes(xyChannels) : Returns the axes of the color. incChannelValue(channel, step) : Increments the value of the channel by the step. decChannelValue(channel, step) : Decrements the value of the channel by the step. setChannelValue(channel, value) : Returns a new color with the value of the channel changed. **Example:** ```typescript import { Component } from '@angular/core'; @Component({ template: `
Color class
`, standalone: true, imports: [] }) export class InputColorColorManagerDemo {} ``` ## Controlled Demonstrates tracking color value changes during interaction and when interaction ends. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { EyeDropper } from '@primeicons/angular/eye-dropper'; @Component({ template: `
onValueChange: {{ value.toString('hex') }}
onValueChangeEnd: {{ endValue.toString('hex') }}
`, standalone: true, imports: [FormsModule, EyeDropper] }) export class InputColorControlledDemo { value: ColorInstance = parseColor('#000000')!; endValue: ColorInstance = parseColor('#000000')!; onColorChange(event: any) { this.value = event.color; } onColorChangeEnd(event: any) { this.endValue = event.color; } } ``` ## With Popover InputColor can be used inside a Popover, with a color swatch as the trigger. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { Popover, PopoverModule } from 'primeng/popover'; import { EyeDropper } from '@primeicons/angular/eye-dropper'; @Component({ template: `
`, standalone: true, imports: [PopoverModule, FormsModule, EyeDropper] }) export class InputColorPopoverDemo { color: string = '#0099ff'; } ``` ## reactiveforms-doc InputColor can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control. **Example:** ```typescript import { Component, inject } from '@angular/core'; import { ReactiveFormsModule } from '@angular/forms'; import { MessageModule } from 'primeng/message'; import { ButtonModule } from 'primeng/button'; import { MessageService } from 'primeng/api'; @Component({ template: `
@if (isInvalid('color')) { Color is required. }
`, standalone: true, imports: [MessageModule, ButtonModule, ReactiveFormsModule] }) export class InputColorReactiveFormsDemo { messageService = inject(MessageService); exampleForm: FormGroup; formSubmitted: boolean = false; constructor() { this.exampleForm = this.fb.group({ color: ['', Validators.required] }); } onSubmit() { this.formSubmitted = true; if (this.exampleForm.valid) { this.messageService.add({ severity: 'success', summary: 'Success', detail: 'Form is submitted', life: 3000 }); this.exampleForm.reset(); this.formSubmitted = false; } } isInvalid(controlName: string) { const control = this.exampleForm.get(controlName); return control?.invalid && this.formSubmitted; } } ``` ## templatedrivenforms-doc **Example:** ```typescript import { Component, inject } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { MessageModule } from 'primeng/message'; import { ButtonModule } from 'primeng/button'; import { MessageService } from 'primeng/api'; @Component({ template: `
@if (colorModel.invalid && (colorModel.touched || exampleForm.submitted)) { Color is required. }
`, standalone: true, imports: [MessageModule, ButtonModule, FormsModule] }) export class InputColorTemplateDrivenFormsDemo { messageService = inject(MessageService); color: string | undefined; onSubmit(form: any) { if (form.valid) { this.messageService.add({ severity: 'success', summary: 'Success', detail: 'Form is submitted', life: 3000 }); form.resetForm(); } } } ``` ## verticalslider-doc Sliders support vertical orientation, displayed alongside the color area. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; @Component({ template: `
`, standalone: true, imports: [FormsModule] }) export class InputColorVerticalSliderDemo { color: string = ''; } ``` ## Input Color InputColor is a composable color picker component. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | | format | "hsba" \| "hsla" \| "rgba" \| "hexa" \| "oklch" | - | Color format/space used internally. | | disabled | boolean | - | When present, it specifies that the component should be disabled. | ### Emits | Name | Parameters | Description | |------|------------|-------------| | onValueChange | event: { color: ColorInstance; originalEvent?: Event } | Callback on value change (during interaction). | | onValueChangeEnd | event: { color: ColorInstance; originalEvent?: Event } | Callback when interaction ends (mouseup/touchend/keyup). | ## Input Color Area Background InputColorAreaBackground is a helper component for InputColor component. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | ## Input Color Area Thumb InputColorAreaThumb is a helper component for InputColor component. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | ## Input Color Area InputColorArea is a helper component for InputColor component. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | ## Input Color Eye Dropper InputColorEyeDropper is a helper component for InputColor component. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | | text | boolean | - | Whether to display button as text. | | rounded | boolean | - | Whether to display a rounded button. | | outlined | boolean | - | Whether to display button as outlined. | | iconOnly | boolean | - | Whether to display an icon-only button. | | severity | string | - | Defines the color severity of the button. | | size | string | - | Defines the size of the button. | ## Input Color Slider Thumb InputColorSliderThumb is a helper component for InputColor component. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | ## Input Color Slider Track InputColorSliderTrack is a helper component for InputColor component. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | ## Input Color Slider InputColorSlider is a helper component for InputColor component. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | | channel | "hue" \| "saturation" \| "brightness" \| "lightness" \| "red" \| "green" \| "blue" \| "alpha" \| "L" \| "C" \| "H" \| "oklchLightness" \| "oklchChroma" \| "oklchHue" | - | The color channel this slider controls. | | orientation | "vertical" \| "horizontal" | - | Orientation of the slider. | ## Input Color Swatch Background InputColorSwatchBackground is a helper component for InputColor component. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | ## Input Color Swatch InputColorSwatch is a helper component for InputColor component. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | ## Input Color Transparency Grid InputColorTransparencyGrid is a helper component for InputColor component. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | ## Pass Through Options | Name | Type | Description | |------|------|-------------| | host | PassThroughOption | Used to pass attributes to the host's DOM element. | | root | PassThroughOption | Used to pass attributes to the root's DOM element. | ## Theming ### CSS Classes | Class | Description | |-------|-------------| | p-inputcolor | Class name of the root element | | p-inputcolor-area | Class name of the area element | | p-inputcolor-area-background | Class name of the area background element | | p-inputcolor-area-thumb | Class name of the area thumb element | | p-inputcolor-slider | Class name of the slider element | | p-inputcolor-slider-track | Class name of the slider track element | | p-inputcolor-slider-thumb | Class name of the slider thumb element | | p-inputcolor-swatch | Class name of the swatch element | | p-inputcolor-swatch-background | Class name of the swatch background element | | p-inputcolor-transparency-grid | Class name of the transparency grid element | | p-inputcolor-input | Class name of the input element | | p-inputcolor-eyedropper | Class name of the eye dropper element | ### Design Tokens | Token | CSS Variable | Description | |-------|--------------|-------------| | inputcolor.border.color | --p-inputcolor-border-color | Shared inset border color (area background, slider track, swatch background) | | inputcolor.area.border.radius | --p-inputcolor-area-border-radius | Border radius of area | | inputcolor.slider.border.radius | --p-inputcolor-slider-border-radius | Border radius of slider | | inputcolor.slider.size | --p-inputcolor-slider-size | Size of slider (horizontal height / vertical width) | | inputcolor.handle.size | --p-inputcolor-handle-size | Size of handle (area and slider) | | inputcolor.handle.border.color | --p-inputcolor-handle-border-color | Border color of handle | | inputcolor.handle.border.width | --p-inputcolor-handle-border-width | Border width of handle | | inputcolor.handle.shadow | --p-inputcolor-handle-shadow | Shadow of handle | | inputcolor.handle.transition.duration | --p-inputcolor-handle-transition-duration | Transition duration of handle | | inputcolor.handle.focus.ring.border.width | --p-inputcolor-handle-focus-ring-border-width | Focus ring border width of handle | | inputcolor.handle.focus.ring.border.color | --p-inputcolor-handle-focus-ring-border-color | Focus ring border color of handle | | inputcolor.handle.focus.ring.outline.width | --p-inputcolor-handle-focus-ring-outline-width | Focus ring outline width of handle | | inputcolor.handle.focus.ring.outline.color | --p-inputcolor-handle-focus-ring-outline-color | Focus ring outline color of handle | | inputcolor.handle.focus.ring.outline.offset | --p-inputcolor-handle-focus-ring-outline-offset | Focus ring outline offset of handle | | inputcolor.transparency.grid.color | --p-inputcolor-transparency-grid-color | Color of transparency grid (checker pattern) | | inputcolor.transparency.grid.background | --p-inputcolor-transparency-grid-background | Background of transparency grid (checker base) | | inputcolor.transparency.grid.tile.size | --p-inputcolor-transparency-grid-tile-size | Tile size of transparency grid | | inputcolor.swatch.size | --p-inputcolor-swatch-size | Size of swatch | | inputcolor.swatch.border.radius | --p-inputcolor-swatch-border-radius | Border radius of swatch | --- # Angular InputGroup Component Text, icon, buttons and other content can be grouped next to an input. ## Accessibility Screen Reader InputGroup and InputGroupAddon does not require any roles and attributes. Keyboard Support Component does not include any interactive elements. ## Basic A group is created by wrapping the input and add-ons with the p-inputgroup component. Each add-on element is defined as a child of p-inputgroup-addon component. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { SelectModule } from 'primeng/select'; import { InputGroupModule } from 'primeng/inputgroup'; import { InputNumberModule } from 'primeng/inputnumber'; import { InputTextModule } from 'primeng/inputtext'; interface City { name: string; code: string; } @Component({ template: `
$ .00 www
`, standalone: true, imports: [SelectModule, InputGroupModule, InputNumberModule, InputTextModule, FormsModule] }) export class InputGroupBasicDemo { text1: string | undefined; text2: string | undefined; number: string | undefined; selectedCity: City | undefined; cities: City[] = [ { name: 'New York', code: 'NY' }, { name: 'Rome', code: 'RM' }, { name: 'London', code: 'LDN' }, { name: 'Istanbul', code: 'IST' }, { name: 'Paris', code: 'PRS' } ]; } ``` ## Button Buttons can be placed at either side of an input element. **Example:** ```typescript import { Component, OnInit } from '@angular/core'; import { ButtonModule } from 'primeng/button'; import { InputGroupModule } from 'primeng/inputgroup'; import { MenuModule } from 'primeng/menu'; import { InputTextModule } from 'primeng/inputtext'; import { MenuItem } from 'primeng/api'; @Component({ template: `
`, standalone: true, imports: [ButtonModule, InputGroupModule, MenuModule, InputTextModule] }) export class InputGroupButtonDemo implements OnInit { items: MenuItem[] | undefined; ngOnInit() { this.items = [{ label: 'Web Search' }, { label: 'AI Assistant' }, { label: 'History' }]; } } ``` ## Checkbox & Radio Checkbox and RadioButton components can be combined with an input element under the same group. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { CheckboxModule } from 'primeng/checkbox'; import { InputGroupModule } from 'primeng/inputgroup'; import { RadioButtonModule } from 'primeng/radiobutton'; import { InputTextModule } from 'primeng/inputtext'; @Component({ template: `
`, standalone: true, imports: [CheckboxModule, InputGroupModule, RadioButtonModule, InputTextModule, FormsModule] }) export class InputGroupCheckboxDemo { radioValue1: boolean = false; checked1: boolean = false; checked2: boolean = false; category: string | undefined; } ``` ## Float Label FloatLabel visually integrates a label with its form element. Visit FloatLabel documentation for more information. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { FloatLabelModule } from 'primeng/floatlabel'; import { InputGroupModule } from 'primeng/inputgroup'; import { InputTextModule } from 'primeng/inputtext'; @Component({ template: `
$ .00 www
`, standalone: true, imports: [FloatLabelModule, InputGroupModule, InputTextModule, FormsModule] }) export class InputGroupFloatLabelDemo { value1: string | undefined; value2: string | undefined; value3: string | undefined; } ``` ## Ifta Label IftaLabel is used to create infield top aligned labels. Visit IftaLabel documentation for more information. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { IftaLabelModule } from 'primeng/iftalabel'; import { InputGroupModule } from 'primeng/inputgroup'; import { InputNumberModule } from 'primeng/inputnumber'; @Component({ template: `
`, standalone: true, imports: [IftaLabelModule, InputGroupModule, InputNumberModule, FormsModule] }) export class InputGroupIftaLabelDemo { value: number = 10; } ``` ## Multiple Multiple add-ons can be placed inside the same group. **Example:** ```typescript import { Component } from '@angular/core'; import { InputGroupModule } from 'primeng/inputgroup'; import { InputTextModule } from 'primeng/inputtext'; @Component({ template: `
$ .00
`, standalone: true, imports: [InputGroupModule, InputTextModule] }) export class InputGroupMultipleDemo {} ``` ## Input Group InputGroup displays text, icon, buttons and other content can be grouped next to an input. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | ## Pass Through Options | Name | Type | Description | |------|------|-------------| | host | PassThroughOption | Used to pass attributes to the host's DOM element. | | root | PassThroughOption | Used to pass attributes to the root's DOM element. | ## Theming ### CSS Classes | Class | Description | |-------|-------------| | p-inputgroup | Class name of the root element | ### Design Tokens | Token | CSS Variable | Description | |-------|--------------|-------------| | inputgroup.addon.background | --p-inputgroup-addon-background | Background of addon | | inputgroup.addon.border.color | --p-inputgroup-addon-border-color | Border color of addon | | inputgroup.addon.color | --p-inputgroup-addon-color | Color of addon | | inputgroup.addon.border.radius | --p-inputgroup-addon-border-radius | Border radius of addon | | inputgroup.addon.padding | --p-inputgroup-addon-padding | Padding of addon | | inputgroup.addon.min.width | --p-inputgroup-addon-min-width | Min width of addon | | inputgroup.addon.font.weight | --p-inputgroup-addon-font-weight | Font weight of addon | | inputgroup.addon.font.size | --p-inputgroup-addon-font-size | Font size of addon | --- # Angular InputMask Component InputMask component is used to enter input in a certain format such as numeric, date, currency and phone. ## Accessibility Screen Reader InputMask directive is used with a native input element that implicitly includes any passed attribute. Value to describe the component can either be provided via label tag combined with id attribute or using aria-labelledby , aria-label attributes. ## Basic InputMask is used as a controlled input with ngModel properties. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { InputTextModule } from 'primeng/inputtext'; import { InputMaskModule } from 'primeng/inputmask'; @Component({ template: `
`, standalone: true, imports: [InputTextModule, InputMaskModule, FormsModule] }) export class InputMaskBasicDemo { value: string | undefined; } ``` ## clearicon-doc When showClear is enabled, a clear icon is displayed to clear the value. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { InputMaskModule } from 'primeng/inputmask'; @Component({ template: `
`, standalone: true, imports: [InputMaskModule, FormsModule] }) export class InputMaskClearIconDemo { value: string | undefined; } ``` ## Disabled When disabled is present, the element cannot be edited and focused. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { InputTextModule } from 'primeng/inputtext'; import { InputMaskModule } from 'primeng/inputmask'; @Component({ template: `
`, standalone: true, imports: [InputTextModule, InputMaskModule, FormsModule] }) export class InputMaskDisabledDemo { value: string | undefined; } ``` ## Filled Specify the variant property as filled to display the component with a higher visual emphasis than the default outlined style. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { InputTextModule } from 'primeng/inputtext'; import { InputMaskModule } from 'primeng/inputmask'; @Component({ template: `
`, standalone: true, imports: [InputTextModule, InputMaskModule, FormsModule] }) export class InputMaskFilledDemo { value: string | undefined; } ``` ## Float Label FloatLabel visually integrates a label with its form element. Visit FloatLabel documentation for more information. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { FloatLabelModule } from 'primeng/floatlabel'; import { InputTextModule } from 'primeng/inputtext'; import { InputMaskModule } from 'primeng/inputmask'; @Component({ template: `
`, standalone: true, imports: [FloatLabelModule, InputTextModule, InputMaskModule, FormsModule] }) export class InputMaskFloatLabelDemo { value1: string | undefined; value2: string | undefined; value3: string | undefined; } ``` ## Fluid The fluid prop makes the component take up the full width of its container when set to true. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { InputTextModule } from 'primeng/inputtext'; import { InputMaskModule } from 'primeng/inputmask'; @Component({ template: ` `, standalone: true, imports: [InputTextModule, InputMaskModule, FormsModule] }) export class InputMaskFluidDemo { value: string | undefined; } ``` ## Ifta Label IftaLabel is used to create infield top aligned labels. Visit IftaLabel documentation for more information. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { IftaLabelModule } from 'primeng/iftalabel'; import { InputTextModule } from 'primeng/inputtext'; import { InputMaskModule } from 'primeng/inputmask'; @Component({ template: `
`, standalone: true, imports: [IftaLabelModule, InputTextModule, InputMaskModule, FormsModule] }) export class InputMaskIftaLabelDemo { value: string | undefined; } ``` ## Invalid The invalid state is applied using the ⁠invalid property to indicate failed validation, which can be integrated with Angular Forms. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { InputTextModule } from 'primeng/inputtext'; import { InputMaskModule } from 'primeng/inputmask'; @Component({ template: `
`, standalone: true, imports: [InputTextModule, InputMaskModule, FormsModule] }) export class InputMaskInvalidDemo { value1: string | undefined; value2: string | undefined; } ``` ## Mask Mask format can be a combination of the following definitions; a for alphabetic characters, 9 for numeric characters and * for alphanumberic characters. In addition, formatting characters like ( , ) , - are also accepted. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { InputTextModule } from 'primeng/inputtext'; import { InputMaskModule } from 'primeng/inputmask'; @Component({ template: `
SSN
Phone
Serial Number
`, standalone: true, imports: [InputTextModule, InputMaskModule, FormsModule] }) export class InputMaskMaskDemo { value1: string | undefined; value2: string | undefined; value3: string | undefined; } ``` ## Optional When the input does not complete the mask definition, it is cleared by default. Use autoClear property to control this behavior. In addition, ? is used to mark anything after the question mark optional. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { InputTextModule } from 'primeng/inputtext'; import { InputMaskModule } from 'primeng/inputmask'; @Component({ template: `
`, standalone: true, imports: [InputTextModule, InputMaskModule, FormsModule] }) export class InputMaskOptionalDemo { value: string | undefined; } ``` ## reactiveforms-doc InputMask can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control. **Example:** ```typescript import { Component, inject } from '@angular/core'; import { ReactiveFormsModule } from '@angular/forms'; import { MessageModule } from 'primeng/message'; import { ButtonModule } from 'primeng/button'; import { InputTextModule } from 'primeng/inputtext'; import { InputMaskModule } from 'primeng/inputmask'; import { MessageService } from 'primeng/api'; @Component({ template: `
@if (isInvalid('value')) { Serial number is required. }
`, standalone: true, imports: [MessageModule, ButtonModule, InputTextModule, InputMaskModule, ReactiveFormsModule] }) export class InputMaskReactiveFormsDemo { messageService = inject(MessageService); items: any[] | undefined; exampleForm: FormGroup | undefined; formSubmitted: boolean = false; constructor() { this.exampleForm = this.fb.group({ value: ['', Validators.required] }); } onSubmit() { this.formSubmitted = true; if (this.exampleForm.valid) { this.messageService.add({ severity: 'success', summary: 'Success', detail: 'Form is submitted', life: 3000 }); this.exampleForm.reset(); this.formSubmitted = false; } } isInvalid(controlName: string) { const control = this.exampleForm.get(controlName); return control?.invalid && (control.touched || this.formSubmitted); } } ``` ## Sizes InputMask provides small and large sizes as alternatives to the base. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { InputTextModule } from 'primeng/inputtext'; import { InputMaskModule } from 'primeng/inputmask'; @Component({ template: `
`, standalone: true, imports: [InputTextModule, InputMaskModule, FormsModule] }) export class InputMaskSizesDemo { value1: string | undefined; value2: string | undefined; value3: string | undefined; } ``` ## SlotChar Default placeholder for a mask is underscore that can be customized using slotChar property. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { InputTextModule } from 'primeng/inputtext'; import { InputMaskModule } from 'primeng/inputmask'; @Component({ template: `
`, standalone: true, imports: [InputTextModule, InputMaskModule, FormsModule] }) export class InputMaskSlotCharDemo { value: string | undefined; } ``` ## templatedrivenforms-doc **Example:** ```typescript import { Component, inject } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { MessageModule } from 'primeng/message'; import { ButtonModule } from 'primeng/button'; import { InputTextModule } from 'primeng/inputtext'; import { InputMaskModule } from 'primeng/inputmask'; import { MessageService } from 'primeng/api'; @Component({ template: `
@if (serialNumber.invalid && (serialNumber.touched || exampleForm.submitted)) { Serial number is required. }
`, standalone: true, imports: [MessageModule, ButtonModule, InputTextModule, InputMaskModule, FormsModule] }) export class InputMaskTemplateDrivenFormsDemo { messageService = inject(MessageService); items: any[] = []; value: any; onSubmit(form: any) { if (form.valid) { this.messageService.add({ severity: 'success', summary: 'Success', detail: 'Form Submitted', life: 3000 }); form.resetForm(); } } } ``` ## Input Mask Directive InputMask directive is applied directly to input elements to enable masked input. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | | pInputMaskPT | any | undefined | Used to pass attributes to DOM elements inside the InputMask directive. | | pInputMaskUnstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pInputMask | string | - | Mask pattern. | | slotChar | string | - | Placeholder character in mask, default is underscore. | | autoClear | boolean | - | Clears the incomplete value on blur. | | characterPattern | string | - | Regex pattern for alpha characters. | | keepBuffer | boolean | - | When present, it specifies that whether to clean buffer value from model. | ### Emits | Name | Parameters | Description | |------|------------|-------------| | onCompleteEvent | value: void | Callback to invoke when the mask is completed. | | onUnmaskedChange | value: string | Callback to invoke when value changes, emits unmasked value. | ## Input Mask InputMask component is used to enter input in a certain format such as numeric, date, currency, email and phone. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | | required | boolean | false | There must be a value (if set). | | invalid | boolean | false | When present, it specifies that the component should have invalid state style. | | disabled | boolean | false | When present, it specifies that the component should have disabled state style. | | name | string | undefined | When present, it specifies that the name of the input. | | fluid | boolean | false | Spans 100% width of the container when enabled. | | variant | "filled" \| "outlined" | 'outlined' | Specifies the input variant of the component. | | size | "small" \| "large" | undefined | Specifies the size of the component. | | inputSize | number | undefined | Specifies the visible width of the input element in characters. | | pattern | string | undefined | Specifies the value must match the pattern. | | min | number | undefined | The value must be greater than or equal to the value. | | max | number | undefined | The value must be less than or equal to the value. | | step | number | undefined | Unless the step is set to the any literal, the value must be min + an integral multiple of the step. | | minlength | number | undefined | The number of characters (code points) must not be less than the value of the attribute, if non-empty. | | maxlength | number | undefined | The number of characters (code points) must not exceed the value of the attribute. | | type | string | - | HTML5 input type. | | slotChar | string | - | Placeholder character in mask, default is underscore. | | autoClear | boolean | - | Clears the incomplete value on blur. | | showClear | boolean | - | When enabled, a clear icon is displayed to clear the value. | | style | Partial | - | Inline style of the input field. | | inputId | string | - | Identifier of the focus input to match a label defined for the component. | | styleClass | string | - | Style class of the input field. | | placeholder | string | - | Advisory information to display on input. | | tabindex | string | - | Specifies tab order of the element. | | title | string | - | Title text of the input text. | | ariaLabel | string | - | Used to define a string that labels the input element. | | ariaLabelledBy | string | - | Establishes relationships between the component and label(s) where its value should be one or more element IDs. | | ariaRequired | boolean | - | Used to indicate that user input is required on an element before a form can be submitted. | | readonly | boolean | - | When present, it specifies that an input field is read-only. | | unmask | boolean | - | Defines if ngModel sets the raw unmasked value to bound value or the formatted mask value. | | characterPattern | string | - | Regex pattern for alpha characters | | autofocus | boolean | - | When present, the input gets a focus automatically on load. | | autocomplete | string | - | Used to define a string that autocomplete attribute the current element. | | keepBuffer | boolean | - | When present, it specifies that whether to clean buffer value from model. | | mask | string | - | Mask pattern. | ### Emits | Name | Parameters | Description | |------|------------|-------------| | onComplete | value: void | Callback to invoke when the mask is completed. | | onFocus | event: Event | Callback to invoke when the component receives focus. | | onBlur | event: Event | Callback to invoke when the component loses focus. | | onInput | event: Event | Callback to invoke on input. | | onKeydown | event: Event | Callback to invoke on input key press. | | onClear | value: void | Callback to invoke when input field is cleared. | ### Templates | Name | Type | Description | |------|------|-------------| | clearicon | TemplateRef | Custom clear icon template. | ## Pass Through Options | Name | Type | Description | |------|------|-------------| | host | PassThroughOption | Used to pass attributes to the host's DOM element. | | root | PassThroughOption | Used to pass attributes to the root's DOM element. | | pcInputText | InputTextPassThrough | Used to pass attributes to the InputText component. | | clearIcon | PassThroughOption | Used to pass attributes to the clear icon's DOM element. | ## Theming ### CSS Classes | Class | Description | |-------|-------------| | p-inputmask | Class name of the root element | | p-inputmask-clear-icon | Class name of the clear icon element | --- # Angular InputNumber Component InputNumber is an input component to provide numerical input. ## Accessibility Screen Reader Value to describe the component can either be provided via label tag combined with inputId prop or using ariaLabelledBy , ariaLabel , ariaDescribedBy props. The input element uses spinbutton role in addition to the aria-valuemin , aria-valuemax and aria-valuenow attributes. ## Buttons Spinner buttons are enabled using the showButtons options and layout is defined with the buttonLayout . Default value is "stacked" whereas "horizontal" and "stacked" are alternatives. Note that even there are no buttons, up and down arrow keys can be used to spin the values with keyboard. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { InputNumberModule } from 'primeng/inputnumber'; @Component({ template: `
`, standalone: true, imports: [InputNumberModule, FormsModule] }) export class InputNumberButtonsDemo { value1: number = 20; value2: number = 10.5; value3: number = 25; } ``` ## Clear Icon When showClear is enabled, a clear icon is displayed to clear the value. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { InputNumberModule } from 'primeng/inputnumber'; @Component({ template: `
`, standalone: true, imports: [InputNumberModule, FormsModule] }) export class InputNumberClearIconDemo { value: number | undefined; } ``` ## Currency Currency formatting is specified by setting the mode option to currency and currency property. In addition currencyDisplay option allows how the currency is displayed, valid values are "symbol" (default) or "code". **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { InputNumberModule } from 'primeng/inputnumber'; @Component({ template: `
`, standalone: true, imports: [InputNumberModule, FormsModule] }) export class InputNumberCurrencyDemo { value1: number = 1500; value2: number = 2500; value3: number = 4250; value4: number = 5002; } ``` ## Disabled When disabled is present, the element cannot be edited and focused. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { InputNumberModule } from 'primeng/inputnumber'; @Component({ template: `
`, standalone: true, imports: [InputNumberModule, FormsModule] }) export class InputNumberDisabledDemo { value1: number = 50; } ``` ## Filled Specify the variant property as filled to display the component with a higher visual emphasis than the default outlined style. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { InputNumberModule } from 'primeng/inputnumber'; @Component({ template: `
`, standalone: true, imports: [InputNumberModule, FormsModule] }) export class InputNumberFilledDemo { value1!: number; } ``` ## Float Label A floating label appears on top of the input field when focused. Visit FloatLabel documentation for more information. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { FloatLabelModule } from 'primeng/floatlabel'; import { InputNumberModule } from 'primeng/inputnumber'; @Component({ template: `
`, standalone: true, imports: [FloatLabelModule, InputNumberModule, FormsModule] }) export class InputNumberFloatLabelDemo { value1: number | undefined; value2: number | undefined; value3: number | undefined; } ``` ## Fluid The fluid prop makes the component take up the full width of its container when set to true. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { InputNumberModule } from 'primeng/inputnumber'; @Component({ template: ` `, standalone: true, imports: [InputNumberModule, FormsModule] }) export class InputNumberFluidDemo { value: number | undefined; } ``` ## Ifta Label IftaLabel is used to create infield top aligned labels. Visit IftaLabel documentation for more information. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { IftaLabelModule } from 'primeng/iftalabel'; import { InputNumberModule } from 'primeng/inputnumber'; @Component({ template: `
`, standalone: true, imports: [IftaLabelModule, InputNumberModule, FormsModule] }) export class InputNumberIftaLabelDemo { value: number | undefined; } ``` ## Invalid The invalid state is applied using the ⁠invalid property to indicate failed validation, which can be integrated with Angular Forms. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { InputNumberModule } from 'primeng/inputnumber'; @Component({ template: `
`, standalone: true, imports: [InputNumberModule, FormsModule] }) export class InputNumberInvalidDemo { value1!: number; value2!: number; } ``` ## Locale Localization information such as grouping and decimal symbols are defined with the locale property which defaults to the user locale. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { InputNumberModule } from 'primeng/inputnumber'; @Component({ template: `
`, standalone: true, imports: [InputNumberModule, FormsModule] }) export class InputNumberLocaleDemo { value1: number = 151351; value2: number = 115744; value3: number = 635524; value4: number = 732762; } ``` ## Numerals InputNumber is used as a controlled input with ngModel property. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { InputNumberModule } from 'primeng/inputnumber'; @Component({ template: `
`, standalone: true, imports: [InputNumberModule, FormsModule] }) export class InputNumberNumeralsDemo { value1: number = 42723; value2: number = 58151; value3: number = 2351.35; value4: number = 50; } ``` ## Prefix & Suffix Custom texts e.g. units can be placed before or after the input section with the prefix and suffix properties. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { InputNumberModule } from 'primeng/inputnumber'; @Component({ template: `
`, standalone: true, imports: [InputNumberModule, FormsModule] }) export class InputNumberPrefixSuffixDemo { value1: number = 20; value2: number = 50; value3: number = 10; value4: number = 20; } ``` ## reactiveforms-doc InputNumber can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control. **Example:** ```typescript import { Component, inject } from '@angular/core'; import { ReactiveFormsModule } from '@angular/forms'; import { InputNumberModule } from 'primeng/inputnumber'; import { MessageModule } from 'primeng/message'; import { ButtonModule } from 'primeng/button'; import { MessageService } from 'primeng/api'; @Component({ template: `
@if (isInvalid('value')) { Number is required. }
`, standalone: true, imports: [InputNumberModule, MessageModule, ButtonModule, ReactiveFormsModule] }) export class InputNumberReactiveFormsDemo { messageService = inject(MessageService); exampleForm: FormGroup | undefined; formSubmitted: boolean = false; constructor() { this.exampleForm = this.fb.group({ value: [undefined, Validators.required] }); } onSubmit() { this.formSubmitted = true; if (this.exampleForm.valid) { this.messageService.add({ severity: 'success', summary: 'Success', detail: 'Form Submitted', life: 3000 }); this.exampleForm.reset(); this.formSubmitted = false; } } isInvalid(controlName: string) { const control = this.exampleForm.get(controlName); return control?.invalid && (control.touched || this.formSubmitted); } } ``` ## Sizes InputNumber provides small and large sizes as alternatives to the base. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { InputNumberModule } from 'primeng/inputnumber'; @Component({ template: `
`, standalone: true, imports: [InputNumberModule, FormsModule] }) export class InputNumberSizesDemo { value1!: number; value2!: number; value3!: number; } ``` ## templatedrivenforms-doc **Example:** ```typescript import { Component, inject } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { InputNumberModule } from 'primeng/inputnumber'; import { MessageModule } from 'primeng/message'; import { ButtonModule } from 'primeng/button'; import { MessageService } from 'primeng/api'; @Component({ template: `
@if (inputValue.invalid && (inputValue.touched || exampleForm.submitted)) { Number is required. }
`, standalone: true, imports: [InputNumberModule, MessageModule, ButtonModule, FormsModule] }) export class InputNumberTemplateDrivenFormsDemo { messageService = inject(MessageService); value: any; onSubmit(form: any) { if (form.valid) { this.messageService.add({ severity: 'success', summary: 'Success', detail: 'Form Submitted', life: 3000 }); form.resetForm(); } } } ``` ## Vertical Buttons can also placed vertically by setting buttonLayout as vertical . **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { InputNumberModule } from 'primeng/inputnumber'; @Component({ template: `
`, standalone: true, imports: [InputNumberModule, FormsModule] }) export class InputNumberVerticalDemo { value1: number = 50; } ``` ## Input Number InputNumber is an input component to provide numerical input. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | | required | boolean | false | There must be a value (if set). | | invalid | boolean | false | When present, it specifies that the component should have invalid state style. | | disabled | boolean | false | When present, it specifies that the component should have disabled state style. | | name | string | undefined | When present, it specifies that the name of the input. | | fluid | boolean | false | Spans 100% width of the container when enabled. | | variant | "filled" \| "outlined" | 'outlined' | Specifies the input variant of the component. | | size | "small" \| "large" | undefined | Specifies the size of the component. | | inputSize | number | undefined | Specifies the visible width of the input element in characters. | | pattern | string | undefined | Specifies the value must match the pattern. | | min | number | undefined | The value must be greater than or equal to the value. | | max | number | undefined | The value must be less than or equal to the value. | | step | number | undefined | Unless the step is set to the any literal, the value must be min + an integral multiple of the step. | | minlength | number | undefined | The number of characters (code points) must not be less than the value of the attribute, if non-empty. | | maxlength | number | undefined | The number of characters (code points) must not exceed the value of the attribute. | | showButtons | boolean | - | Displays spinner buttons. | | format | boolean | - | Whether to format the value. | | buttonLayout | "stacked" \| "horizontal" \| "vertical" | - | Layout of the buttons, valid values are "stacked" (default), "horizontal" and "vertical". | | inputId | string | - | Identifier of the focus input to match a label defined for the component. | | placeholder | string | - | Advisory information to display on input. | | tabindex | number | - | Specifies tab order of the element. | | title | string | - | Title text of the input text. | | ariaLabelledBy | string | - | Specifies one or more IDs in the DOM that labels the input field. | | ariaDescribedBy | string | - | Specifies one or more IDs in the DOM that describes the input field. | | ariaLabel | string | - | Used to define a string that labels the input element. | | ariaRequired | boolean | - | Used to indicate that user input is required on an element before a form can be submitted. | | autocomplete | string | - | Used to define a string that autocomplete attribute the current element. | | incrementButtonClass | string | - | Style class of the increment button. | | decrementButtonClass | string | - | Style class of the decrement button. | | incrementButtonIcon | string | - | Style class of the increment button. | | decrementButtonIcon | string | - | Style class of the decrement button. | | readonly | boolean | - | When present, it specifies that an input field is read-only. | | allowEmpty | boolean | - | Determines whether the input field is empty. | | locale | string | - | Locale to be used in formatting. | | localeMatcher | "lookup" \| "best fit" | - | The locale matching algorithm to use. Possible values are "lookup" and "best fit"; the default is "best fit". See Locale Negotiation for details. | | mode | "decimal" \| "currency" \| "percent" \| "unit" | - | Defines the behavior of the component, valid values are "decimal" and "currency". | | currency | string | - | The currency to use in currency formatting. Possible values are the ISO 4217 currency codes, such as "USD" for the US dollar, "EUR" for the euro, or "CNY" for the Chinese RMB. There is no default value; if the style is "currency", the currency property must be provided. | | currencyDisplay | "symbol" \| "code" \| "name" \| "narrowSymbol" | - | How to display the currency in currency formatting. Possible values are "symbol" to use a localized currency symbol such as €, ü"code" to use the ISO currency code, "name" to use a localized currency name such as "dollar"; the default is "symbol". | | useGrouping | boolean | - | Whether to use grouping separators, such as thousands separators or thousand/lakh/crore separators. | | minFractionDigits | number | - | The minimum number of fraction digits to use. Possible values are from 0 to 20; the default for plain number and percent formatting is 0; the default for currency formatting is the number of minor unit digits provided by the ISO 4217 currency code list (2 if the list doesn't provide that information). | | maxFractionDigits | number | - | The maximum number of fraction digits to use. Possible values are from 0 to 20; the default for plain number formatting is the larger of minimumFractionDigits and 3; the default for currency formatting is the larger of minimumFractionDigits and the number of minor unit digits provided by the ISO 4217 currency code list (2 if the list doesn't provide that information). | | prefix | string | - | Text to display before the value. | | suffix | string | - | Text to display after the value. | | inputStyle | Partial | - | Inline style of the input field. | | inputStyleClass | string | - | Style class of the input field. | | showClear | boolean | - | When enabled, a clear icon is displayed to clear the value. | | autofocus | boolean | - | When present, it specifies that the component should automatically get focus on load. | ### Emits | Name | Parameters | Description | |------|------------|-------------| | onInput | event: InputNumberInputEvent | Callback to invoke on input. | | onFocus | event: Event | Callback to invoke when the component receives focus. | | onBlur | event: Event | Callback to invoke when the component loses focus. | | onKeyDown | event: KeyboardEvent | Callback to invoke on input key press. | | onClear | value: void | Callback to invoke when clear token is clicked. | ### Templates | Name | Type | Description | |------|------|-------------| | clearicon | TemplateRef | Custom clear icon template. | | incrementbuttonicon | TemplateRef | Custom increment button icon template. | | decrementbuttonicon | TemplateRef | Custom decrement button icon template. | ## Pass Through Options | Name | Type | Description | |------|------|-------------| | host | PassThroughOption | Used to pass attributes to the host's DOM element. | | root | PassThroughOption | Used to pass attributes to the root's DOM element. | | pcInputText | InputTextPassThrough | Used to pass attributes to the InputText component. | | clearIcon | PassThroughOption | Used to pass attributes to the clear icon's DOM element. | | buttonGroup | PassThroughOption | Used to pass attributes to the button group's DOM element. | | incrementButton | PassThroughOption | Used to pass attributes to the increment button's DOM element. | | decrementButton | PassThroughOption | Used to pass attributes to the decrement button's DOM element. | | incrementButtonIcon | PassThroughOption | Used to pass attributes to the increment button icon's DOM element. | | decrementButtonIcon | PassThroughOption | Used to pass attributes to the decrement button icon's DOM element. | ## Theming ### CSS Classes | Class | Description | |-------|-------------| | p-inputnumber | Class name of the root element | | p-inputnumber-input | Class name of the input element | | p-inputnumber-button-group | Class name of the button group element | | p-inputnumber-increment-button | Class name of the increment button element | | p-inputnumber-decrement-button | Class name of the decrement button element | | p-autocomplete-clear-icon | Class name of the clear icon | ### Design Tokens | Token | CSS Variable | Description | |-------|--------------|-------------| | inputnumber.transition.duration | --p-inputnumber-transition-duration | Transition duration of root | | inputnumber.button.width | --p-inputnumber-button-width | Width of button | | inputnumber.button.border.radius | --p-inputnumber-button-border-radius | Border radius of button | | inputnumber.button.vertical.padding | --p-inputnumber-button-vertical-padding | Vertical padding of button | | inputnumber.button.background | --p-inputnumber-button-background | Background of button | | inputnumber.button.hover.background | --p-inputnumber-button-hover-background | Hover background of button | | inputnumber.button.active.background | --p-inputnumber-button-active-background | Active background of button | | inputnumber.button.border.color | --p-inputnumber-button-border-color | Border color of button | | inputnumber.button.hover.border.color | --p-inputnumber-button-hover-border-color | Hover border color of button | | inputnumber.button.active.border.color | --p-inputnumber-button-active-border-color | Active border color of button | | inputnumber.button.color | --p-inputnumber-button-color | Color of button | | inputnumber.button.hover.color | --p-inputnumber-button-hover-color | Hover color of button | | inputnumber.button.active.color | --p-inputnumber-button-active-color | Active color of button | --- # Angular Otp Input Component Input Otp is used to enter one time passwords. ## Accessibility Screen Reader Input OTP uses a set of InputText components, refer to the InputText component for more information about the screen reader support. ## Basic Two-way value binding is defined using ngModel . The number of characters is defined with the length property, which is set to 4 by default. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { InputOtpModule } from 'primeng/inputotp'; @Component({ template: `
`, standalone: true, imports: [InputOtpModule, FormsModule] }) export class InputOtpBasicDemo { value: any; } ``` ## Integer Only When integerOnly is present, only integers can be accepted as input. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { InputOtpModule } from 'primeng/inputotp'; @Component({ template: `
`, standalone: true, imports: [InputOtpModule, FormsModule] }) export class InputOtpIntegerOnlyDemo { value: any; } ``` ## Mask Enable the mask option to hide the values in the input fields. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { InputOtpModule } from 'primeng/inputotp'; @Component({ template: `
`, standalone: true, imports: [InputOtpModule, FormsModule] }) export class InputOtpMaskDemo { value: any; } ``` ## reactiveforms-doc InputOtp can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control. **Example:** ```typescript import { Component, inject } from '@angular/core'; import { ReactiveFormsModule } from '@angular/forms'; import { InputOtpModule } from 'primeng/inputotp'; import { MessageModule } from 'primeng/message'; import { ButtonModule } from 'primeng/button'; import { MessageService } from 'primeng/api'; @Component({ template: `
@if (isInvalid('value')) { Passcode is required. }
`, standalone: true, imports: [InputOtpModule, MessageModule, ButtonModule, ReactiveFormsModule] }) export class InputOtpReactiveFormsDemo { messageService = inject(MessageService); exampleForm: FormGroup | undefined; formSubmitted: boolean = false; constructor() { this.exampleForm = this.fb.group({ value: ['', [Validators.required, Validators.minLength(4)]] }); } onSubmit() { this.formSubmitted = true; if (this.exampleForm.valid) { this.messageService.add({ severity: 'success', summary: 'Success', detail: 'Form is submitted', life: 3000 }); this.exampleForm.reset(); this.formSubmitted = false; } } isInvalid(controlName: string) { const control = this.exampleForm.get(controlName); return control?.invalid && (control.touched || this.formSubmitted); } } ``` ## Sample A sample UI implementation with templating and additional elements. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { ButtonModule } from 'primeng/button'; import { InputOtpModule } from 'primeng/inputotp'; @Component({ template: `
Authenticate Your Account

Please enter the code sent to your phone.

@if (index === 3) {
}
`, standalone: true, imports: [ButtonModule, InputOtpModule, FormsModule] }) export class InputOtpSampleDemo { value: any; } ``` ## Sizes InputOtp provides small and large sizes as alternatives to the base. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { InputOtpModule } from 'primeng/inputotp'; @Component({ template: `
`, standalone: true, imports: [InputOtpModule, FormsModule] }) export class InputOtpSizesDemo { value1: any; value2: any; value3: any; } ``` ## Template Define a template with your own UI elements with bindings to the provided events and attributes to replace the default design. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { InputOtpModule } from 'primeng/inputotp'; @Component({ template: `
`, standalone: true, imports: [InputOtpModule, FormsModule] }) export class InputOtpTemplateDemo { value: any; } ``` ## templatedrivenforms-doc **Example:** ```typescript import { Component, inject } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { InputOtpModule } from 'primeng/inputotp'; import { MessageModule } from 'primeng/message'; import { ButtonModule } from 'primeng/button'; import { MessageService } from 'primeng/api'; @Component({ template: `
@if (otpModel.invalid && (otpModel.touched || exampleForm.submitted)) { Passcode is required. }
`, standalone: true, imports: [InputOtpModule, MessageModule, ButtonModule, FormsModule] }) export class InputOtpTemplateDrivenFormsDemo { messageService = inject(MessageService); value: any; onSubmit(form: any) { if (form.valid) { this.messageService.add({ severity: 'success', summary: 'Success', detail: 'Form Submitted', life: 3000 }); form.resetForm(); } } } ``` ## Input Otp Input Otp is used to enter one time passwords. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | | required | boolean | false | There must be a value (if set). | | invalid | boolean | false | When present, it specifies that the component should have invalid state style. | | disabled | boolean | false | When present, it specifies that the component should have disabled state style. | | name | string | undefined | When present, it specifies that the name of the input. | | readonly | boolean | - | When present, it specifies that an input field is read-only. | | tabindex | number | - | Index of the element in tabbing order. | | length | number | - | Number of characters to initiate. | | styleClass | string | - | Style class of the input element. | | mask | boolean | - | Mask pattern. | | integerOnly | boolean | - | When present, it specifies that an input field is integer-only. | | autofocus | boolean | - | When present, it specifies that the component should automatically get focus on load. | | variant | "filled" \| "outlined" | undefined | Specifies the input variant of the component. | | size | "small" \| "large" | undefined | Specifies the size of the component. | ### Emits | Name | Parameters | Description | |------|------------|-------------| | onChange | event: InputOtpChangeEvent | Callback to invoke on value change. | | onFocus | event: Event | Callback to invoke when the component receives focus. | | onBlur | event: Event | Callback to invoke when the component loses focus. | ### Templates | Name | Type | Description | |------|------|-------------| | input | TemplateRef | Custom input template. | ## Pass Through Options | Name | Type | Description | |------|------|-------------| | host | PassThroughOption | Used to pass attributes to the host's DOM element. | | root | PassThroughOption | Used to pass attributes to the root's DOM element. | | pcInputText | InputTextPassThrough | Used to pass attributes to the InputText component. | ## Theming ### CSS Classes | Class | Description | |-------|-------------| | p-inputotp | Class name of the root element | | p-inputotp-input | Class name of the input element | ### Design Tokens | Token | CSS Variable | Description | |-------|--------------|-------------| | inputotp.gap | --p-inputotp-gap | Gap of root | | inputotp.input.width | --p-inputotp-input-width | Width of input | | inputotp.input.sm.width | --p-inputotp-input-sm-width | Width of input in small screens | | inputotp.input.lg.width | --p-inputotp-input-lg-width | Width of input in large screens | --- # Angular InputText Component InputText is an extension to standard input element with theming and keyfiltering. ## Accessibility Screen Reader InputText component renders a native input element that implicitly includes any passed prop. Value to describe the component can either be provided via label tag combined with id prop or using aria-labelledby , aria-label props. ## Basic InputText is used as a controlled input with ngModel property. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { InputTextModule } from 'primeng/inputtext'; @Component({ template: `
`, standalone: true, imports: [InputTextModule, FormsModule] }) export class InputTextBasicDemo { value: string; } ``` ## Disabled When disabled is present, the element cannot be edited and focused. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { InputTextModule } from 'primeng/inputtext'; @Component({ template: `
`, standalone: true, imports: [InputTextModule, FormsModule] }) export class InputTextDisabledDemo { value: string | undefined = 'Disabled'; } ``` ## Filled Specify the variant property as filled to display the component with a higher visual emphasis than the default outlined style. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { InputTextModule } from 'primeng/inputtext'; @Component({ template: `
`, standalone: true, imports: [InputTextModule, FormsModule] }) export class InputTextFilledDemo { value: string; } ``` ## Float Label FloatLabel visually integrates a label with its form element. Visit FloatLabel documentation for more information. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { FloatLabelModule } from 'primeng/floatlabel'; import { InputTextModule } from 'primeng/inputtext'; @Component({ template: `
`, standalone: true, imports: [FloatLabelModule, InputTextModule, FormsModule] }) export class InputTextFloatLabelDemo { value1: string | undefined; value2: string | undefined; value3: string | undefined; } ``` ## Fluid The fluid prop makes the component take up the full width of its container when set to true. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { InputTextModule } from 'primeng/inputtext'; @Component({ template: `
`, standalone: true, imports: [InputTextModule, FormsModule] }) export class InputTextFluidDemo { value: string; } ``` ## Help Text An advisory text can be defined with the semantic small tag. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { InputTextModule } from 'primeng/inputtext'; @Component({ template: `
Enter your username to reset your password.
`, standalone: true, imports: [InputTextModule, FormsModule] }) export class InputTextHelpTextDemo { value: string | undefined; } ``` ## icons-doc Icons can be placed inside an input element by wrapping both the input and the icon with an element that has either .p-input-icon-left or p-input-icon-right class. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { InputTextModule } from 'primeng/inputtext'; @Component({ template: `
`, standalone: true, imports: [InputTextModule, FormsModule] }) export class InputTextIconsDemo { value: string | undefined; value2: string | undefined; } ``` ## Ifta Label IftaLabel is used to create infield top aligned labels. Visit IftaLabel documentation for more information. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { IftaLabelModule } from 'primeng/iftalabel'; import { InputTextModule } from 'primeng/inputtext'; @Component({ template: `
`, standalone: true, imports: [IftaLabelModule, InputTextModule, FormsModule] }) export class InputTextIftaLabelDemo { value: string | undefined; } ``` ## Invalid The invalid state is applied using the ⁠invalid property to indicate failed validation, which can be integrated with Angular Forms. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { InputTextModule } from 'primeng/inputtext'; @Component({ template: `
`, standalone: true, imports: [InputTextModule, FormsModule] }) export class InputTextInvalidDemo { value1: string | undefined; value2: string | undefined; } ``` ## keyfilter-doc InputText has built-in key filtering support to block certain keys, refer to keyfilter page for more information. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { InputTextModule } from 'primeng/inputtext'; @Component({ template: `
`, standalone: true, imports: [InputTextModule, FormsModule] }) export class InputTextKeyFilterDemo { value: number | undefined; } ``` ## reactiveforms-doc **Example:** ```typescript import { Component, inject } from '@angular/core'; import { ReactiveFormsModule } from '@angular/forms'; import { MessageModule } from 'primeng/message'; import { ButtonModule } from 'primeng/button'; import { InputTextModule } from 'primeng/inputtext'; import { MessageService } from 'primeng/api'; @Component({ template: `
@if (isInvalid('username')) { Username is required. }
@if (isInvalid('email')) { @if (exampleForm.get('email')?.errors?.['required']) { Email is required. } @if (exampleForm.get('email')?.errors?.['email']) { Please enter a valid email. } }
`, standalone: true, imports: [MessageModule, ButtonModule, InputTextModule, ReactiveFormsModule] }) export class InputTextReactiveFormsDemo { messageService = inject(MessageService); exampleForm: FormGroup; formSubmitted: boolean = false; constructor() { this.exampleForm = this.fb.group({ username: ['', Validators.required], email: ['', [Validators.required, Validators.email]] }); } onSubmit() { this.formSubmitted = true; if (this.exampleForm.valid) { this.messageService.add({ severity: 'success', summary: 'Success', detail: 'Form Submitted', life: 3000 }); this.exampleForm.reset(); this.formSubmitted = false; } } isInvalid(controlName: string) { const control = this.exampleForm.get(controlName); return control?.invalid && (control.touched || this.formSubmitted); } } ``` ## Sizes InputText provides small and large sizes as alternatives to the standard. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { InputTextModule } from 'primeng/inputtext'; @Component({ template: `
`, standalone: true, imports: [InputTextModule, FormsModule] }) export class InputTextSizesDemo { value1: string | undefined; value2: string | undefined; value3: string | undefined; } ``` ## templatedrivenforms-doc **Example:** ```typescript import { Component, inject } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { MessageModule } from 'primeng/message'; import { ButtonModule } from 'primeng/button'; import { InputTextModule } from 'primeng/inputtext'; import { MessageService } from 'primeng/api'; @Component({ template: `
@if (username.invalid && (username.touched || exampleForm.submitted)) { Username is required. }
@if (email.invalid && (email.touched || exampleForm.submitted)) { @if (email.hasError('required')) { Email is Required. } @if (email.hasError('email')) { Please enter a valid email. } }
`, standalone: true, imports: [MessageModule, ButtonModule, InputTextModule, FormsModule] }) export class InputTextTemplateDrivenFormsDemo { messageService = inject(MessageService); user: any = { username: '', email: '' }; onSubmit(form: any) { if (form.valid) { this.messageService.add({ severity: 'success', summary: 'Success', detail: 'Form Submitted', life: 3000 }); form.resetForm(); } } } ``` ## Input Text InputText directive is an extension to standard input element with theming. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | | pInputTextPT | PassThrough> | undefined | Used to pass attributes to DOM elements inside the InputText component. | | pInputTextUnstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pSize | "small" \| "large" | - | Defines the size of the component. | | variant | "filled" \| "outlined" | undefined | Specifies the input variant of the component. | | fluid | boolean | undefined | Spans 100% width of the container when enabled. | | invalid | boolean | false | When present, it specifies that the component should have invalid state style. | ## Pass Through Options | Name | Type | Description | |------|------|-------------| | root | PassThroughOption | Used to pass attributes to the root's DOM element. | ## Theming ### CSS Classes | Class | Description | |-------|-------------| | p-inputtext | The class of root element | ### Design Tokens | Token | CSS Variable | Description | |-------|--------------|-------------| | inputtext.background | --p-inputtext-background | Background of root | | inputtext.disabled.background | --p-inputtext-disabled-background | Disabled background of root | | inputtext.filled.background | --p-inputtext-filled-background | Filled background of root | | inputtext.filled.hover.background | --p-inputtext-filled-hover-background | Filled hover background of root | | inputtext.filled.focus.background | --p-inputtext-filled-focus-background | Filled focus background of root | | inputtext.border.color | --p-inputtext-border-color | Border color of root | | inputtext.hover.border.color | --p-inputtext-hover-border-color | Hover border color of root | | inputtext.focus.border.color | --p-inputtext-focus-border-color | Focus border color of root | | inputtext.invalid.border.color | --p-inputtext-invalid-border-color | Invalid border color of root | | inputtext.color | --p-inputtext-color | Color of root | | inputtext.disabled.color | --p-inputtext-disabled-color | Disabled color of root | | inputtext.placeholder.color | --p-inputtext-placeholder-color | Placeholder color of root | | inputtext.invalid.placeholder.color | --p-inputtext-invalid-placeholder-color | Invalid placeholder color of root | | inputtext.shadow | --p-inputtext-shadow | Shadow of root | | inputtext.padding.x | --p-inputtext-padding-x | Padding x of root | | inputtext.padding.y | --p-inputtext-padding-y | Padding y of root | | inputtext.border.radius | --p-inputtext-border-radius | Border radius of root | | inputtext.focus.ring.width | --p-inputtext-focus-ring-width | Focus ring width of root | | inputtext.focus.ring.style | --p-inputtext-focus-ring-style | Focus ring style of root | | inputtext.focus.ring.color | --p-inputtext-focus-ring-color | Focus ring color of root | | inputtext.focus.ring.offset | --p-inputtext-focus-ring-offset | Focus ring offset of root | | inputtext.focus.ring.shadow | --p-inputtext-focus-ring-shadow | Focus ring shadow of root | | inputtext.transition.duration | --p-inputtext-transition-duration | Transition duration of root | | inputtext.sm.font.size | --p-inputtext-sm-font-size | Sm font size of root | | inputtext.sm.padding.x | --p-inputtext-sm-padding-x | Sm padding x of root | | inputtext.sm.padding.y | --p-inputtext-sm-padding-y | Sm padding y of root | | inputtext.lg.font.size | --p-inputtext-lg-font-size | Lg font size of root | | inputtext.lg.padding.x | --p-inputtext-lg-padding-x | Lg padding x of root | | inputtext.lg.padding.y | --p-inputtext-lg-padding-y | Lg padding y of root | | inputtext.font.weight | --p-inputtext-font-weight | Font weight of root | | inputtext.font.size | --p-inputtext-font-size | Font size of root | --- # Angular KeyFilter Component KeyFilter is a directive to restrict individual key strokes. In order to restrict the whole input, use InputNumber or InputMask instead. ## Accessibility Refer to InputText for accessibility as KeyFilter is a built-in add-on of the InputText. ## Presets KeyFilter provides various presets configured with the pKeyFilter property. **Example:** ```typescript import { Component } from '@angular/core'; import { InputTextModule } from 'primeng/inputtext'; @Component({ template: `
`, standalone: true, imports: [InputTextModule] }) export class KeyFilterPresetsDemo {} ``` ## Regex In addition to the presets, a regular expression can be configured for customization. **Example:** ```typescript import { Component } from '@angular/core'; import { InputTextModule } from 'primeng/inputtext'; @Component({ template: `
`, standalone: true, imports: [InputTextModule] }) export class KeyFilterRegexDemo { blockSpace: RegExp = /^[^\s]+$/; blockChars: RegExp = /^[^<>*!]+$/; } ``` ## Key Filter KeyFilter Directive is a built-in feature of InputText to restrict user input based on a regular expression. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | pValidateOnly | boolean | - | When enabled, instead of blocking keys, input is validated internally to test against the regular expression. | | pattern | RegExp \| KeyFilterPattern | - | Sets the pattern for key filtering. | ### Emits | Name | Parameters | Description | |------|------------|-------------| | ngModelChange | value: string \| number | Emits a value whenever the ngModel of the component changes. | --- # Angular Knob Component Knob is a form component to define number inputs with a dial. ## Accessibility Screen Reader Knob element component uses slider role in addition to the aria-valuemin , aria-valuemax and aria-valuenow attributes. Value to describe the component can be defined using ariaLabelledBy and ariaLabel props. ## Basic Knob is an input component and used with the standard ngModel directive. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { KnobModule } from 'primeng/knob'; @Component({ template: `
`, standalone: true, imports: [KnobModule, FormsModule] }) export class KnobBasicDemo { value!: number; } ``` ## Color Colors are customized with the textColor , rangeColor and valueColor properties. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { KnobModule } from 'primeng/knob'; @Component({ template: `
`, standalone: true, imports: [KnobModule, FormsModule] }) export class KnobColorDemo { value: number = 50; } ``` ## Disabled When disabled is present, a visual hint is applied to indicate that the Knob cannot be interacted with. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { KnobModule } from 'primeng/knob'; @Component({ template: `
`, standalone: true, imports: [KnobModule, FormsModule] }) export class KnobDisabledDemo { value: number = 75; } ``` ## Min/Max Boundaries are configured with the min and max properties whose defaults are 0 and 100 respectively. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { KnobModule } from 'primeng/knob'; @Component({ template: `
`, standalone: true, imports: [KnobModule, FormsModule] }) export class KnobMinMaxDemo { value: number = 10; } ``` ## Reactive Knob can be controlled with custom controls as well. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { ButtonModule } from 'primeng/button'; import { KnobModule } from 'primeng/knob'; @Component({ template: `
`, standalone: true, imports: [ButtonModule, KnobModule, FormsModule] }) export class KnobReactiveDemo { value: number = 0; } ``` ## Reactive Forms Knob can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control. **Example:** ```typescript import { Component, inject } from '@angular/core'; import { ReactiveFormsModule } from '@angular/forms'; import { KnobModule } from 'primeng/knob'; import { MessageModule } from 'primeng/message'; import { ButtonModule } from 'primeng/button'; import { MessageService } from 'primeng/api'; @Component({ template: `
@if (isInvalid('value')) { {{ getErrorMessage('value') }} }
`, standalone: true, imports: [KnobModule, MessageModule, ButtonModule, ReactiveFormsModule] }) export class KnobReactiveFormsDemo { messageService = inject(MessageService); items: any[] | undefined; exampleForm: FormGroup | undefined; formSubmitted: boolean = false; constructor() { this.exampleForm = this.fb.group({ value: [15, [Validators.min(25), Validators.max(75)]] }); } onSubmit() { this.formSubmitted = true; if (this.exampleForm.valid) { this.messageService.add({ severity: 'success', summary: 'Success', detail: 'Form is submitted', life: 3000 }); this.exampleForm.reset({ value: 15 }); this.formSubmitted = false; } } getControl(controlName: string): AbstractControl | null { return this.exampleForm?.get(controlName) ?? null; } getErrorMessage(controlName: string): string | null { const control = this.getControl(controlName); if (!control || !control.errors) return null; if (control.errors['min']) { return 'Value must be greater than 15.'; } if (control.errors['max']) { return 'Must be less than 75.'; } } isInvalid(controlName: string) { const control = this.getControl(controlName); return control?.invalid && (control.dirty || this.formSubmitted); } } ``` ## ReadOnly When readonly present, value cannot be edited. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { KnobModule } from 'primeng/knob'; @Component({ template: `
`, standalone: true, imports: [KnobModule, FormsModule] }) export class KnobReadonlyDemo { value: number = 50; } ``` ## Size Diameter of the knob is defined in pixels using the size property. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { KnobModule } from 'primeng/knob'; @Component({ template: `
`, standalone: true, imports: [KnobModule, FormsModule] }) export class KnobSizeDemo { value: number = 60; } ``` ## Step Size of each movement is defined with the step property. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { KnobModule } from 'primeng/knob'; @Component({ template: `
`, standalone: true, imports: [KnobModule, FormsModule] }) export class KnobStepDemo { value!: number; } ``` ## Stroke The border size is specified with the strokeWidth property as a number in pixels. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { KnobModule } from 'primeng/knob'; @Component({ template: `
`, standalone: true, imports: [KnobModule, FormsModule] }) export class KnobStrokeDemo { value: number = 40; } ``` ## Template Label is a string template that can be customized with the valueTemplate property having 60 as the placeholder . **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { KnobModule } from 'primeng/knob'; @Component({ template: `
`, standalone: true, imports: [KnobModule, FormsModule] }) export class KnobTemplateDemo { value: number = 60; } ``` ## templatedrivenforms-doc **Example:** ```typescript import { Component, inject } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { KnobModule } from 'primeng/knob'; import { MessageModule } from 'primeng/message'; import { ButtonModule } from 'primeng/button'; import { MessageService } from 'primeng/api'; @Component({ template: `
@if (isInvalid(model)) { {{ getErrorMessage(model) }} }
`, standalone: true, imports: [KnobModule, MessageModule, ButtonModule, FormsModule] }) export class KnobTemplateDrivenFormsDemo { messageService = inject(MessageService); value: number = 15; formSubmitted: boolean = false; onSubmit(form: NgForm) { this.formSubmitted = true; if (!this.isInvalid(form.controls['knob'])) { this.messageService.add({ severity: 'success', summary: 'Success', detail: 'Form is submitted', life: 3000 }); form.resetForm({ knob: 15 }); this.formSubmitted = false; } } getErrorMessage(control: any): string | null { const value = control?.value; return value < 25 ? 'Value must be greater than 25.' : value > 75 ? 'Must be less than 75.' : null; } isInvalid(control: any): boolean { if (!control) return false; const value = control.value; const hasError = value < 25 || value > 75; return hasError && (this.formSubmitted || control.dirty); } } ``` ## Knob Knob is a form component to define number inputs with a dial. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | | required | boolean | false | There must be a value (if set). | | invalid | boolean | false | When present, it specifies that the component should have invalid state style. | | disabled | boolean | false | When present, it specifies that the component should have disabled state style. | | name | string | undefined | When present, it specifies that the name of the input. | | ariaLabel | string | - | Defines a string that labels the input for accessibility. | | ariaLabelledBy | string | - | Specifies one or more IDs in the DOM that labels the input field. | | tabindex | number | - | Index of the element in tabbing order. | | valueColor | string | - | Background of the value. | | rangeColor | string | - | Background color of the range. | | textColor | string | - | Color of the value text. | | valueTemplate | string | - | Template string of the value. | | size | number | - | Size of the component in pixels. | | min | number | - | Mininum boundary value. | | max | number | - | Maximum boundary value. | | step | number | - | Step factor to increment/decrement the value. | | strokeWidth | number | - | Width of the knob stroke. | | showValue | boolean | - | Whether the show the value inside the knob. | | readonly | boolean | - | When present, it specifies that the component value cannot be edited. | ### Emits | Name | Parameters | Description | |------|------------|-------------| | onChange | value: number | Callback to invoke on value change. | ## Pass Through Options | Name | Type | Description | |------|------|-------------| | host | PassThroughOption | Used to pass attributes to the host's DOM element. | | svg | PassThroughOption | Used to pass attributes to the SVG's DOM element. | | range | PassThroughOption | Used to pass attributes to the range's DOM element. | | value | PassThroughOption | Used to pass attributes to the value's DOM element. | | text | PassThroughOption | Used to pass attributes to the text's DOM element. | ## Theming ### CSS Classes | Class | Description | |-------|-------------| | p-knob | Class name of the root element | | p-knob-range | Class name of the range element | | p-knob-value | Class name of the value element | | p-knob-text | Class name of the text element | ### Design Tokens | Token | CSS Variable | Description | |-------|--------------|-------------| | knob.transition.duration | --p-knob-transition-duration | Transition duration of root | | knob.focus.ring.width | --p-knob-focus-ring-width | Focus ring width of root | | knob.focus.ring.style | --p-knob-focus-ring-style | Focus ring style of root | | knob.focus.ring.color | --p-knob-focus-ring-color | Focus ring color of root | | knob.focus.ring.offset | --p-knob-focus-ring-offset | Focus ring offset of root | | knob.focus.ring.shadow | --p-knob-focus-ring-shadow | Focus ring shadow of root | | knob.value.background | --p-knob-value-background | Background of value | | knob.range.background | --p-knob-range-background | Background of range | | knob.text.color | --p-knob-text-color | Color of text | | knob.text.font.size | --p-knob-text-font-size | Font size of text | | knob.text.font.weight | --p-knob-text-font-weight | Font weight of text | --- # Angular Listbox Component Listbox is used to select one or more values from a list of items. ## Accessibility Screen Reader Value to describe the component can be provided ariaLabelledBy or ariaLabel props. The list element has a listbox role with the aria-multiselectable attribute that sets to true when multiple selection is enabled. Each list item has an option role with aria-selected and aria-disabled as their attributes. ## Basic Listbox is used as a controlled component with ngModel property along with an options collection. Label and value of an option are defined with the optionLabel and optionValue properties respectively. Default property name for the optionLabel is label and value for the optionValue . If optionValue is omitted and the object has no value property, the object itself becomes the value of an option. Note that, when options are simple primitive values such as a string array, no optionLabel and optionValue would be necessary. **Example:** ```typescript import { Component, OnInit } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { ListboxModule } from 'primeng/listbox'; interface City { name: string; code: string; } @Component({ template: `
`, standalone: true, imports: [ListboxModule, FormsModule] }) export class ListboxBasicDemo implements OnInit { cities!: City[]; selectedCity!: City; ngOnInit() { this.cities = [ { name: 'New York', code: 'NY' }, { name: 'Rome', code: 'RM' }, { name: 'London', code: 'LDN' }, { name: 'Istanbul', code: 'IST' }, { name: 'Paris', code: 'PRS' } ]; } } ``` ## Checkbox Listbox allows item selection using checkboxes. **Example:** ```typescript import { Component, OnInit } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { ListboxModule } from 'primeng/listbox'; interface City { name: string; code: string; } @Component({ template: `
`, standalone: true, imports: [ListboxModule, FormsModule] }) export class ListboxCheckboxDemo implements OnInit { cities!: City[]; selectedCity!: City; ngOnInit() { this.cities = [ { name: 'New York', code: 'NY' }, { name: 'Rome', code: 'RM' }, { name: 'London', code: 'LDN' }, { name: 'Istanbul', code: 'IST' }, { name: 'Paris', code: 'PRS' } ]; } } ``` ## Checkmark An alternative way to highlight the selected option is displaying a checkmark instead. **Example:** ```typescript import { Component, OnInit } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { ListboxModule } from 'primeng/listbox'; interface City { name: string; code: string; } @Component({ template: `
`, standalone: true, imports: [ListboxModule, FormsModule] }) export class ListboxCheckMarkDemo implements OnInit { cities!: City[]; selectedCity!: City; ngOnInit() { this.cities = [ { name: 'New York', code: 'NY' }, { name: 'Rome', code: 'RM' }, { name: 'London', code: 'LDN' }, { name: 'Istanbul', code: 'IST' }, { name: 'Paris', code: 'PRS' } ]; } } ``` ## Disabled When disabled is present, the element cannot be edited and focused. **Example:** ```typescript import { Component, OnInit } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { ListboxModule } from 'primeng/listbox'; interface City { name: string; code: string; } @Component({ template: `
`, standalone: true, imports: [ListboxModule, FormsModule] }) export class ListboxDisabledDemo implements OnInit { cities!: City[]; selectedCity!: City; ngOnInit() { this.cities = [ { name: 'New York', code: 'NY' }, { name: 'Rome', code: 'RM' }, { name: 'London', code: 'LDN' }, { name: 'Istanbul', code: 'IST' }, { name: 'Paris', code: 'PRS' } ]; } } ``` ## dragdrop-doc Items can be reordered using drag and drop by enabling dragdrop property. Depends on @angular/cdk package. **Example:** ```typescript import { Component, OnInit } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { ListboxModule } from 'primeng/listbox'; @Component({ template: `
`, standalone: true, imports: [ListboxModule, FormsModule] }) export class ListboxDragDropDemo implements OnInit { cities!: any[]; selectedCity!: any; ngOnInit() { this.cities = [ { name: 'New York', code: 'NY' }, { name: 'Rome', code: 'RM' }, { name: 'London', code: 'LDN' }, { name: 'Istanbul', code: 'IST' }, { name: 'Paris', code: 'PRS' } ]; } } ``` ## Filter ListBox provides built-in filtering that is enabled by adding the filter property. **Example:** ```typescript import { Component, OnInit } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { ListboxModule } from 'primeng/listbox'; interface City { name: string; code: string; } @Component({ template: `
`, standalone: true, imports: [ListboxModule, FormsModule] }) export class ListboxFilterDemo implements OnInit { cities!: City[]; selectedCity!: City; ngOnInit() { this.cities = [ { name: 'New York', code: 'NY' }, { name: 'Rome', code: 'RM' }, { name: 'London', code: 'LDN' }, { name: 'Istanbul', code: 'IST' }, { name: 'Paris', code: 'PRS' } ]; } } ``` ## Group Options can be grouped when a nested data structures is provided. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { ListboxModule } from 'primeng/listbox'; import { SelectItemGroup } from 'primeng/api'; import { Country } from '@/domain/customer'; interface Country { name: string; code: string; } @Component({ template: `
{{ group.label }}
`, standalone: true, imports: [ListboxModule, FormsModule] }) export class ListboxGroupDemo { groupedCities!: SelectItemGroup[]; selectedCountry!: Country; constructor() { this.groupedCities = [ { label: 'Germany', value: 'de', items: [ { label: 'Berlin', value: 'Berlin' }, { label: 'Frankfurt', value: 'Frankfurt' }, { label: 'Hamburg', value: 'Hamburg' }, { label: 'Munich', value: 'Munich' } ] }, { label: 'USA', value: 'us', items: [ { label: 'Chicago', value: 'Chicago' }, { label: 'Los Angeles', value: 'Los Angeles' }, { label: 'New York', value: 'New York' }, { label: 'San Francisco', value: 'San Francisco' } ] }, { label: 'Japan', value: 'jp', items: [ { label: 'Kyoto', value: 'Kyoto' }, { label: 'Osaka', value: 'Osaka' }, { label: 'Tokyo', value: 'Tokyo' }, { label: 'Yokohama', value: 'Yokohama' } ] } ]; } } ``` ## Invalid The invalid state is applied using the ⁠invalid property to indicate failed validation, which can be integrated with Angular Forms. **Example:** ```typescript import { Component, OnInit } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { ListboxModule } from 'primeng/listbox'; interface City { name: string; code: string; } @Component({ template: `
`, standalone: true, imports: [ListboxModule, FormsModule] }) export class ListboxInvalidDemo implements OnInit { cities!: City[]; selectedCity!: City; ngOnInit() { this.cities = [ { name: 'New York', code: 'NY' }, { name: 'Rome', code: 'RM' }, { name: 'London', code: 'LDN' }, { name: 'Istanbul', code: 'IST' }, { name: 'Paris', code: 'PRS' } ]; } } ``` ## Multiple ListBox allows choosing a single item by default, enable multiple property to choose more than one. When the optional metaKeySelection is present, behavior is changed in a way that selecting a new item requires meta key to be present. **Example:** ```typescript import { Component, OnInit } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { ListboxModule } from 'primeng/listbox'; interface City { name: string; code: string; } @Component({ template: `
`, standalone: true, imports: [ListboxModule, FormsModule] }) export class ListboxMultipleDemo implements OnInit { cities!: City[]; selectedCities!: City[]; ngOnInit() { this.cities = [ { name: 'New York', code: 'NY' }, { name: 'Rome', code: 'RM' }, { name: 'London', code: 'LDN' }, { name: 'Istanbul', code: 'IST' }, { name: 'Paris', code: 'PRS' } ]; } } ``` ## reactiveforms-doc Listbox can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control. **Example:** ```typescript import { Component, inject } from '@angular/core'; import { ReactiveFormsModule } from '@angular/forms'; import { ListboxModule } from 'primeng/listbox'; import { MessageModule } from 'primeng/message'; import { ButtonModule } from 'primeng/button'; import { MessageService } from 'primeng/api'; interface City { name: string; code: string; } @Component({ template: `
@if (isInvalid('selectedCity')) { City is required. }
`, standalone: true, imports: [ListboxModule, MessageModule, ButtonModule, ReactiveFormsModule] }) export class ListboxReactiveFormsDemo { messageService = inject(MessageService); exampleForm: FormGroup | undefined; formSubmitted: boolean = false; cities!: City[]; constructor() { this.cities = [ { name: 'New York', code: 'NY' }, { name: 'Rome', code: 'RM' }, { name: 'London', code: 'LDN' }, { name: 'Istanbul', code: 'IST' }, { name: 'Paris', code: 'PRS' } ]; this.exampleForm = this.fb.group({ selectedCity: ['', Validators.required] }); } onSubmit() { this.formSubmitted = true; if (this.exampleForm.valid) { this.messageService.add({ severity: 'success', summary: 'Success', detail: 'Form is submitted', life: 3000 }); this.exampleForm.reset(); this.formSubmitted = false; } } isInvalid(controlName: string) { const control = this.exampleForm.get(controlName); return control?.invalid && this.formSubmitted; } } ``` ## Template For custom content support define a template named item where the default local template variable refers to an option. **Example:** ```typescript import { Component, OnInit } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { ListboxModule } from 'primeng/listbox'; import { Country } from '@/domain/customer'; interface Country { name: string; code: string; } @Component({ template: `
{{ country.name }}
`, standalone: true, imports: [ListboxModule, FormsModule] }) export class ListboxTemplateDemo implements OnInit { countries!: Country[]; selectedCountry!: Country; ngOnInit() { this.countries = [ { name: 'Australia', code: 'AU' }, { name: 'Brazil', code: 'BR' }, { name: 'China', code: 'CN' }, { name: 'Egypt', code: 'EG' }, { name: 'France', code: 'FR' }, { name: 'Germany', code: 'DE' }, { name: 'India', code: 'IN' }, { name: 'Japan', code: 'JP' }, { name: 'Spain', code: 'ES' }, { name: 'United States', code: 'US' } ]; } } ``` ## templatedrivenforms-doc **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { ListboxModule } from 'primeng/listbox'; import { MessageModule } from 'primeng/message'; import { ButtonModule } from 'primeng/button'; import { MessageService } from 'primeng/api'; interface City { name: string; code: string; } @Component({ template: `
@if (city.invalid && exampleForm.submitted) { City is required. }
`, standalone: true, imports: [ListboxModule, MessageModule, ButtonModule, FormsModule] }) export class ListboxTemplateDrivenFormsDemo implements OnInit { messageService = inject(MessageService); selectedCity!: City; cities!: City[]; ngOnInit() { this.cities = [ { name: 'New York', code: 'NY' }, { name: 'Rome', code: 'RM' }, { name: 'London', code: 'LDN' }, { name: 'Istanbul', code: 'IST' }, { name: 'Paris', code: 'PRS' } ]; } onSubmit(form: any) { if (form.valid) { this.messageService.add({ severity: 'success', summary: 'Success', detail: 'Form Submitted', life: 3000 }); form.resetForm(); } } } ``` ## Virtual Scroll VirtualScrolling is an efficient way of rendering the options by displaying a small subset of data in the viewport at any time. When dealing with huge number of options, it is suggested to enable VirtualScrolling to avoid performance issues. Usage is simple as setting virtualScroll property to true and defining virtualScrollItemSize to specify the height of an item. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { ListboxModule } from 'primeng/listbox'; @Component({ template: `
`, standalone: true, imports: [ListboxModule, FormsModule] }) export class ListboxVirtualScrollDemo { items: any = Array.from({ length: 100000 }, (_, i) => ({ label: `Item #${i}`, value: i })); selectedItems!: any[]; selectAll: boolean = false; onSelectAllChange(event) { this.selectedItems = event.checked ? [...this.items] : []; this.selectAll = event.checked; } onChange(event) { const { value } = event; if (value) this.selectAll = value.length === this.items.length; } } ``` ## Listbox ListBox is used to select one or more values from a list of items. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | | required | boolean | false | There must be a value (if set). | | invalid | boolean | false | When present, it specifies that the component should have invalid state style. | | disabled | boolean | false | When present, it specifies that the component should have disabled state style. | | name | string | undefined | When present, it specifies that the name of the input. | | id | string | - | Unique identifier of the component. | | searchMessage | string | '{0} results are available' | Text to display when the search is active. Defaults to global value in i18n translation configuration. | | emptySelectionMessage | string | 'No selected item' | Text to display when filtering does not return any results. Defaults to global value in i18n translation configuration. | | selectionMessage | string | '{0} items selected' | Text to be displayed in hidden accessible field when options are selected. Defaults to global value in i18n translation configuration. | | autoOptionFocus | boolean | - | Whether to focus on the first visible or selected element when the overlay panel is shown. | | ariaLabel | string | - | Defines a string that labels the input for accessibility. | | selectOnFocus | boolean | - | When enabled, the focused option is selected. | | searchLocale | boolean | - | Locale to use in searching. The default locale is the host environment's current locale. | | focusOnHover | boolean | - | When enabled, the hovered option will be focused. | | filterMessage | string | - | Text to display when filtering. | | filterFields | any[] | - | Fields used when filtering the options, defaults to optionLabel. | | lazy | boolean | - | Defines if data is loaded and interacted with in lazy manner. | | virtualScroll | boolean | - | Whether the data should be loaded on demand during scroll. | | virtualScrollItemSize | number | - | Height of an item in the list for VirtualScrolling. | | virtualScrollOptions | ScrollerOptions | - | Whether to use the scroller feature. The properties of scroller component can be used like an object in it. | | scrollHeight | string | - | Height of the viewport in pixels, a scrollbar is defined if height of list exceeds this value. | | tabindex | number | - | Index of the element in tabbing order. | | multiple | boolean | - | When specified, allows selecting multiple values. | | listStyle | Partial | - | Inline style of the list element. | | listStyleClass | string | - | Style class of the list element. | | readonly | boolean | - | When present, it specifies that the element value cannot be changed. | | checkbox | boolean | - | When specified, allows selecting items with checkboxes. | | filter | boolean | - | When specified, displays a filter input at header. | | filterBy | string | - | When filtering is enabled, filterBy decides which field or fields (comma separated) to search against. | | filterMatchMode | "startsWith" \| "contains" \| "notContains" \| "endsWith" \| "equals" \| "notEquals" \| "in" \| "between" \| "lt" \| "lte" \| "gt" \| "gte" \| "is" \| "isNot" \| "before" \| "after" \| "dateIs" \| "dateIsNot" \| "dateBefore" \| "dateAfter" | - | Defines how the items are filtered. | | filterLocale | string | - | Locale to use in filtering. The default locale is the host environment's current locale. | | metaKeySelection | boolean | - | Defines how multiple items can be selected, when true metaKey needs to be pressed to select or unselect an item and when set to false selection of each item can be toggled individually. On touch enabled devices, metaKeySelection is turned off automatically. | | dataKey | string | - | A property to uniquely identify a value in options. | | showToggleAll | boolean | - | Whether header checkbox is shown in multiple mode. | | optionLabel | string | - | Name of the label field of an option. | | optionValue | string | - | Name of the value field of an option. | | optionGroupChildren | string | - | Name of the options field of an option group. | | optionGroupLabel | string | - | Name of the label field of an option group. | | optionDisabled | string \| ((item: any) => boolean) | - | Name of the disabled field of an option or function to determine disabled state. | | ariaFilterLabel | string | - | Defines a string that labels the filter input. | | filterPlaceHolder | string | - | Defines placeholder of the filter input. | | emptyFilterMessage | string | - | Text to display when filtering does not return any results. | | emptyMessage | string | - | Text to display when there is no data. Defaults to global value in i18n translation configuration. | | group | boolean | - | Whether to display options as grouped when nested options are provided. | | options | any[] | - | An array of selectitems to display as the available options. | | filterValue | string | - | When specified, filter displays with this value. | | selectAll | boolean | - | Whether all data is selected. | | striped | boolean | false | Whether to displays rows with alternating colors. | | highlightOnSelect | boolean | true | Whether the selected option will be add highlight class. | | checkmark | boolean | false | Whether the selected option will be shown with a check mark. | | dragdrop | boolean | - | Whether to enable dragdrop based reordering. | | dropListData | any[] | - | Array to use for CDK drop list data binding. When not provided, uses options array. | | fluid | boolean | undefined | Spans 100% width of the container when enabled. | ### Emits | Name | Parameters | Description | |------|------------|-------------| | onChange | event: ListboxChangeEvent | Callback to invoke on value change. | | onClick | event: ListboxClickEvent | Callback to invoke when option is clicked. | | onDblClick | event: ListboxDoubleClickEvent | Callback to invoke when option is double clicked. | | onFilter | event: ListboxFilterEvent | Callback to invoke when data is filtered. | | onFocus | event: FocusEvent | Callback to invoke when component receives focus. | | onBlur | event: FocusEvent | Callback to invoke when component loses focus. | | onSelectAllChange | event: ListboxSelectAllChangeEvent | Callback to invoke when all data is selected. | | onLazyLoad | event: ScrollerLazyLoadEvent | Emits on lazy load. | | onDrop | value: CdkDragDrop> | Custom item template. | | group | TemplateRef> | Custom group template. | | header | TemplateRef> | Custom header template. | | filter | TemplateRef | Custom filter template. | | footer | TemplateRef> | Custom footer template. | | emptyfilter | TemplateRef | Custom empty filter message template. | | empty | TemplateRef | Custom empty message template. | | filtericon | TemplateRef | Custom filter icon template. | | checkicon | TemplateRef | Custom check icon template. | | checkmark | TemplateRef | Custom checkmark icon template. | | loader | TemplateRef | Custom loader template. | ### Methods | Name | Parameters | Return Type | Description | |------|------------|-------------|-------------| | updateModel | value: any, event: any | void | Updates the model value. | ## Pass Through Options | Name | Type | Description | |------|------|-------------| | root | PassThroughOption | Used to pass attributes to the root's DOM element. | | header | PassThroughOption | Used to pass attributes to the header's DOM element. | | pcCheckbox | any | Used to pass attributes to the Checkbox component. | | pcFilterContainer | any | Used to pass attributes to the IconField component. | | pcFilter | any | Used to pass attributes to the filter input's DOM element. | | pcFilterIconContainer | any | Used to pass attributes to the InputIcon component. | | filterIcon | PassThroughOption | Used to pass attributes to the filter icon's DOM element. | | hiddenFilterResult | PassThroughOption | Used to pass attributes to the hidden filter result's DOM element. | | listContainer | PassThroughOption | Used to pass attributes to the list container's DOM element. | | virtualScroller | any | Used to pass attributes to the VirtualScroller component. | | list | PassThroughOption | Used to pass attributes to the list's DOM element. | | optionGroup | PassThroughOption | Used to pass attributes to the option group's DOM element. | | option | PassThroughOption | Used to pass attributes to the option's DOM element. | | optionCheckIcon | PassThroughOption | Used to pass attributes to the option check icon's DOM element. | | optionBlankIcon | PassThroughOption | Used to pass attributes to the option blank icon's DOM element. | | emptyMessage | PassThroughOption | Used to pass attributes to the empty message's DOM element. | | hiddenEmptyMessage | PassThroughOption | Used to pass attributes to the hidden empty message's DOM element. | | hiddenSelectedMessage | PassThroughOption | Used to pass attributes to the hidden selected message's DOM element. | | hiddenFirstFocusableEl | PassThroughOption | Used to pass attributes to the first hidden focusable element. | | hiddenLastFocusableEl | PassThroughOption | Used to pass attributes to the last hidden focusable element. | ## Theming ### CSS Classes | Class | Description | |-------|-------------| | p-listbox | Class name of the root element | | p-listbox-header | Class name of the header element | | p-listbox-filter | Class name of the filter element | | p-listbox-list-container | Class name of the list container element | | p-listbox-list | Class name of the list element | | p-listbox-option-group | Class name of the option group element | | p-listbox-option | Class name of the option element | | p-listbox-option-check-icon | Class name of the option check icon element | | p-listbox-option-blank-icon | Class name of the option blank icon element | | p-listbox-empty-message | Class name of the empty message element | ### Design Tokens | Token | CSS Variable | Description | |-------|--------------|-------------| | listbox.background | --p-listbox-background | Background of root | | listbox.disabled.background | --p-listbox-disabled-background | Disabled background of root | | listbox.border.color | --p-listbox-border-color | Border color of root | | listbox.invalid.border.color | --p-listbox-invalid-border-color | Invalid border color of root | | listbox.color | --p-listbox-color | Color of root | | listbox.disabled.color | --p-listbox-disabled-color | Disabled color of root | | listbox.shadow | --p-listbox-shadow | Shadow of root | | listbox.border.radius | --p-listbox-border-radius | Border radius of root | | listbox.transition.duration | --p-listbox-transition-duration | Transition duration of root | | listbox.list.padding | --p-listbox-list-padding | Padding of list | | listbox.list.gap | --p-listbox-list-gap | Gap of list | | listbox.list.header.padding | --p-listbox-list-header-padding | Header padding of list | | listbox.option.focus.background | --p-listbox-option-focus-background | Focus background of option | | listbox.option.selected.background | --p-listbox-option-selected-background | Selected background of option | | listbox.option.selected.focus.background | --p-listbox-option-selected-focus-background | Selected focus background of option | | listbox.option.color | --p-listbox-option-color | Color of option | | listbox.option.focus.color | --p-listbox-option-focus-color | Focus color of option | | listbox.option.selected.color | --p-listbox-option-selected-color | Selected color of option | | listbox.option.selected.focus.color | --p-listbox-option-selected-focus-color | Selected focus color of option | | listbox.option.selected.font.weight | --p-listbox-option-selected-font-weight | Font weight of a selected option | | listbox.option.padding | --p-listbox-option-padding | Padding of option | | listbox.option.border.radius | --p-listbox-option-border-radius | Border radius of option | | listbox.option.striped.background | --p-listbox-option-striped-background | Striped background of option | | listbox.option.font.weight | --p-listbox-option-font-weight | Font weight of option | | listbox.option.font.size | --p-listbox-option-font-size | Font size of option | | listbox.option.group.background | --p-listbox-option-group-background | Background of option group | | listbox.option.group.color | --p-listbox-option-group-color | Color of option group | | listbox.option.group.font.weight | --p-listbox-option-group-font-weight | Font weight of option group | | listbox.option.group.font.size | --p-listbox-option-group-font-size | Font size of option group | | listbox.option.group.padding | --p-listbox-option-group-padding | Padding of option group | | listbox.checkmark.color | --p-listbox-checkmark-color | Color of checkmark | | listbox.checkmark.gutter.start | --p-listbox-checkmark-gutter-start | Gutter start of checkmark | | listbox.checkmark.gutter.end | --p-listbox-checkmark-gutter-end | Gutter end of checkmark | | listbox.empty.message.padding | --p-listbox-empty-message-padding | Padding of empty message | --- # LLMs.txt - PrimeNG LLM-optimized documentation endpoints for PrimeNG components. ## /llms-full.txt The llms-full.txt file is a complete list of all the pages in the PrimeNG documentation. It is used to help AI models understand the entire documentation set. ## /llms.txt The llms.txt file is an industry standard that helps AI models better understand and navigate the PrimeNG documentation. It lists key pages in a structured format, making it easier for LLMs to retrieve relevant information. ## markdownextension-doc Add a .md to a page's URL to display a Markdown version of that page. --- # MCP Server - PrimeNG Model Context Protocol (MCP) server for PrimeNG component library. Provides AI assistants with comprehensive access to PrimeNG component documentation. ## Claude Code Add the PrimeNG MCP server using the CLI. After adding, start a new session and use /mcp to verify the connection. ## Cursor Create .cursor/mcp.json in your project or ~/.cursor/mcp.json for global configuration. ## exampleprompts-doc Once installed, try asking your AI assistant: ## Introduction Model Context Protocol (MCP) is an open standard that enables AI models to connect with external tools and data sources . The PrimeNG MCP server provides AI assistants with comprehensive access to: Component documentation including props , events , templates , and methods Theming and styling with Pass Through and design tokens Code examples and usage patterns Migration guides for version upgrades Installation and configuration guides ## OpenAI Codex Add the PrimeNG MCP server using the CLI or edit ~/.codex/config.toml directly. ## Available Tools Component Information Tools for exploring and understanding PrimeNG components. list_components : List all PrimeNG components with categories get_component : Get detailed info about a specific component search_components : Search components by name or description get_component_props : Get all props for a component get_component_events : Get all events for a component get_component_methods : Get all methods for a component get_component_slots : Get all templates for a component compare_components : Compare two components side by side Code Examples Tools for retrieving code samples and generating templates. get_usage_example : Get code examples for a component list_examples : List all available code examples get_example : Get a specific example by component and section generate_component_template : Generate a basic component template Theming & Styling Tools for customizing component appearance and styling. get_component_pt : Get Pass Through options for DOM customization get_component_tokens : Get design tokens (CSS variables) get_component_styles : Get CSS class names get_theming_guide : Get detailed theming guide get_passthrough_guide : Get Pass Through customization guide get_tailwind_guide : Get Tailwind CSS integration guide Documentation & Guides Tools for accessing PrimeNG documentation and guides. list_guides : List all guides and documentation pages get_guide : Get a specific guide by name get_configuration : Get PrimeNG configuration options get_installation : Get installation instructions get_accessibility_guide : Get accessibility guide get_accessibility_info : Get accessibility info for a component Migration Tools for upgrading between PrimeNG versions. get_migration_guide : Get migration guide overview migrate_v18_to_v19 : v18 to v19 migration guide migrate_v19_to_v20 : v19 to v20 migration guide migrate_v20_to_v21 : v20 to v21 migration guide Search & Discovery Tools for finding components based on various criteria. search_all : Search across components, guides, and props suggest_component : Suggest components based on use case find_by_prop : Find components with a specific prop find_by_event : Find components that emit a specific event find_components_with_feature : Find components supporting a feature get_related_components : Find related components ## VS Code Create .vscode/mcp.json in your project or ~/Library/Application Support/Code/User/mcp.json for global configuration. ## Windsurf Edit ~/.codeium/windsurf/mcp_config.json to add the PrimeNG MCP server. ## Zed Add to your Zed settings at ~/.config/zed/settings.json (Linux) or ~/Library/Application Support/Zed/settings.json (macOS). --- # Angular MegaMenu Component MegaMenu is navigation component that displays submenus together. ## Accessibility Screen Reader MegaMenu component uses the menubar role along with aria-orientation and the value to describe the component can either be provided with aria-labelledby or aria-label props. Each list item has a presentation role whereas anchor elements have a menuitem role with aria-label referring to the label of the item and aria-disabled defined if the item is disabled. A submenu within a MegaMenu uses the menu role with an aria-labelledby defined as the id of the submenu root menuitem label. In addition, root menuitems that open a submenu have aria-haspopup , aria-expanded and aria-controls to define the relation between the item and the submenu. Keyboard Support Key Function tab Add focus to the first item if focus moves in to the menu. If the focus is already within the menu, focus moves to the next focusable item in the page tab sequence. shift + tab Add focus to the last item if focus moves in to the menu. If the focus is already within the menu, focus moves to the previous focusable item in the page tab sequence. enter If menuitem has a submenu, toggles the visibility of the submenu otherwise activates the menuitem and closes all open overlays. space If menuitem has a submenu, toggles the visibility of the submenu otherwise activates the menuitem and closes all open overlays. escape If focus is inside a popup submenu, closes the submenu and moves focus to the root item of the closed submenu. down arrow If focus is on a root element, open a submenu and moves focus to the first element in the submenu otherwise moves focus to the next menuitem within the submenu. up arrow If focus is on a root element, opens a submenu and moves focus to the last element in the submenu otherwise moves focus to the previous menuitem within the submenu. right arrow If focus is on a root element, moves focus to the next menuitem. If the focus in inside a submenu, moves focus to the first menuitem of the next menu group. left arrow If focus is on a root element, moves focus to the previous menuitem. If the focus in inside a submenu, moves focus to the first menuitem of the previous menu group. home Moves focus to the first menuitem within the submenu. end Moves focus to the last menuitem within the submenu. ## Basic MegaMenu requires a collection of menuitems as its model . **Example:** ```typescript import { Component, OnInit } from '@angular/core'; import { MegaMenuModule } from 'primeng/megamenu'; import { MegaMenuItem } from 'primeng/api'; import { Table } from 'primeng/table'; @Component({ template: ` `, standalone: true, imports: [MegaMenuModule] }) export class MegaMenuBasicDemo implements OnInit { items: MegaMenuItem[] | undefined; ngOnInit() { this.items = [ { label: 'Furniture', icon: 'pi pi-box', items: [ [ { label: 'Living Room', items: [{ label: 'Accessories' }, { label: 'Armchair' }, { label: 'Coffee Table' }, { label: 'Couch' }, { label: 'TV Stand' }] } ], [ { label: 'Kitchen', items: [{ label: 'Bar stool' }, { label: 'Chair' }, { label: 'Table' }] }, { label: 'Bathroom', items: [{ label: 'Accessories' }] } ], [ { label: 'Bedroom', items: [{ label: 'Bed' }, { label: 'Chaise lounge' }, { label: 'Cupboard' }, { label: 'Dresser' }, { label: 'Wardrobe' }] } ], [ { label: 'Office', items: [{ label: 'Bookcase' }, { label: 'Cabinet' }, { label: 'Chair' }, { label: 'Desk' }, { label: 'Executive Chair' }] } ] ] }, { label: 'Electronics', icon: 'pi pi-mobile', items: [ [ { label: 'Computer', items: [{ label: 'Monitor' }, { label: 'Mouse' }, { label: 'Notebook' }, { label: 'Keyboard' }, { label: 'Printer' }, { label: 'Storage' }] } ], [ { label: 'Home Theater', items: [{ label: 'Projector' }, { label: 'Speakers' }, { label: 'TVs' }] } ], [ { label: 'Gaming', items: [{ label: 'Accessories' }, { label: 'Console' }, { label: 'PC' }, { label: 'Video Games' }] } ], [ { label: 'Appliances', items: [{ label: 'Coffee Machine' }, { label: 'Fridge' }, { label: 'Oven' }, { label: 'Vaccum Cleaner' }, { label: 'Washing Machine' }] } ] ] }, { label: 'Sports', icon: 'pi pi-clock', items: [ [ { label: 'Football', items: [{ label: 'Kits' }, { label: 'Shoes' }, { label: 'Shorts' }, { label: 'Training' }] } ], [ { label: 'Running', items: [{ label: 'Accessories' }, { label: 'Shoes' }, { label: 'T-Shirts' }, { label: 'Shorts' }] } ], [ { label: 'Swimming', items: [{ label: 'Kickboard' }, { label: 'Nose Clip' }, { label: 'Swimsuits' }, { label: 'Paddles' }] } ], [ { label: 'Tennis', items: [{ label: 'Balls' }, { label: 'Rackets' }, { label: 'Shoes' }, { label: 'Training' }] } ] ] } ]; } } ``` ## Command The command property of a menuitem defines the callback to run when an item is activated by click or a key event. ## Router Menu items support navigation via routerLink, programmatic routing using commands, or external URLs. **Example:** ```typescript import { Component, OnInit } from '@angular/core'; import { MegaMenuModule } from 'primeng/megamenu'; import { MegaMenuItem } from 'primeng/api'; @Component({ template: ` `, standalone: true, imports: [MegaMenuModule] }) export class MegaMenuRouterDemo implements OnInit { items: MegaMenuItem[] | undefined; ngOnInit() { this.items = [ { label: 'Router', icon: 'pi pi-palette', items: [ [ { label: 'RouterLink', items: [ { label: 'Theming', routerLink: '/theming' }, { label: 'UI Kit', routerLink: '/uikit' } ] } ] ] }, { label: 'Programmatic', icon: 'pi pi-link', command: () => { this.router.navigate(['/installation']); } }, { label: 'External', icon: 'pi pi-home', items: [ [ { label: 'External', items: [ { label: 'Angular', url: 'https://angular.dev/' }, { label: 'Vite.js', url: 'https://vitejs.dev/' } ] } ] ] } ]; } } ``` ## Template Custom content can be placed between p-megamenu tags. Megamenu should be horizontal for custom content. **Example:** ```typescript import { Component, OnInit } from '@angular/core'; import { AvatarModule } from 'primeng/avatar'; import { ButtonModule } from 'primeng/button'; import { MegaMenuModule } from 'primeng/megamenu'; import { RippleModule } from 'primeng/ripple'; import { MegaMenuItem } from 'primeng/api'; @Component({ template: ` @if (item.root) { {{ item.label }} } @else if (!item.image) { {{ item.label }} {{ item.subtext }} } @else {
megamenu-demo {{ item.subtext }}
} `, standalone: true, imports: [AvatarModule, ButtonModule, MegaMenuModule, RippleModule] }) export class MegaMenuTemplateDemo implements OnInit { items: MegaMenuItem[] | undefined; ngOnInit() { this.items = [ { label: 'Company', root: true, items: [ [ { items: [ { label: 'Features', icon: 'pi pi-list', subtext: 'Subtext of item' }, { label: 'Customers', icon: 'pi pi-users', subtext: 'Subtext of item' }, { label: 'Case Studies', icon: 'pi pi-file', subtext: 'Subtext of item' } ] } ], [ { items: [ { label: 'Solutions', icon: 'pi pi-shield', subtext: 'Subtext of item' }, { label: 'Faq', icon: 'pi pi-question', subtext: 'Subtext of item' }, { label: 'Library', icon: 'pi pi-search', subtext: 'Subtext of item' } ] } ], [ { items: [ { label: 'Community', icon: 'pi pi-comments', subtext: 'Subtext of item' }, { label: 'Rewards', icon: 'pi pi-star', subtext: 'Subtext of item' }, { label: 'Investors', icon: 'pi pi-globe', subtext: 'Subtext of item' } ] } ], [ { items: [ { image: 'https://primefaces.org/cdn/primeng/images/uikit/uikit-system.png', label: 'GET STARTED', subtext: 'Build spectacular apps in no time.' } ] } ] ] }, { label: 'Resources', root: true }, { label: 'Contact', root: true } ]; } } ``` ## Vertical Layout of the MegaMenu is changed with the orientation property that accepts horizontal and vertical as options. **Example:** ```typescript import { Component, OnInit } from '@angular/core'; import { MegaMenu, MegaMenuModule } from 'primeng/megamenu'; import { MegaMenuItem } from 'primeng/api'; import { Table } from 'primeng/table'; import { MegaMenu } from 'primeng/megamenu'; @Component({ template: ` `, standalone: true, imports: [MegaMenuModule] }) export class MegaMenuVerticalDemo implements OnInit { items: MegaMenuItem[] | undefined; ngOnInit() { this.items = [ { label: 'Furniture', icon: 'pi pi-box', items: [ [ { label: 'Living Room', items: [{ label: 'Accessories' }, { label: 'Armchair' }, { label: 'Coffee Table' }, { label: 'Couch' }, { label: 'TV Stand' }] } ], [ { label: 'Kitchen', items: [{ label: 'Bar stool' }, { label: 'Chair' }, { label: 'Table' }] }, { label: 'Bathroom', items: [{ label: 'Accessories' }] } ], [ { label: 'Bedroom', items: [{ label: 'Bed' }, { label: 'Chaise lounge' }, { label: 'Cupboard' }, { label: 'Dresser' }, { label: 'Wardrobe' }] } ], [ { label: 'Office', items: [{ label: 'Bookcase' }, { label: 'Cabinet' }, { label: 'Chair' }, { label: 'Desk' }, { label: 'Executive Chair' }] } ] ] }, { label: 'Electronics', icon: 'pi pi-mobile', items: [ [ { label: 'Computer', items: [{ label: 'Monitor' }, { label: 'Mouse' }, { label: 'Notebook' }, { label: 'Keyboard' }, { label: 'Printer' }, { label: 'Storage' }] } ], [ { label: 'Home Theater', items: [{ label: 'Projector' }, { label: 'Speakers' }, { label: 'TVs' }] } ], [ { label: 'Gaming', items: [{ label: 'Accessories' }, { label: 'Console' }, { label: 'PC' }, { label: 'Video Games' }] } ], [ { label: 'Appliances', items: [{ label: 'Coffee Machine' }, { label: 'Fridge' }, { label: 'Oven' }, { label: 'Vaccum Cleaner' }, { label: 'Washing Machine' }] } ] ] }, { label: 'Sports', icon: 'pi pi-clock', items: [ [ { label: 'Football', items: [{ label: 'Kits' }, { label: 'Shoes' }, { label: 'Shorts' }, { label: 'Training' }] } ], [ { label: 'Running', items: [{ label: 'Accessories' }, { label: 'Shoes' }, { label: 'T-Shirts' }, { label: 'Shorts' }] } ], [ { label: 'Swimming', items: [{ label: 'Kickboard' }, { label: 'Nose Clip' }, { label: 'Swimsuits' }, { label: 'Paddles' }] } ], [ { label: 'Tennis', items: [{ label: 'Balls' }, { label: 'Rackets' }, { label: 'Shoes' }, { label: 'Training' }] } ] ] } ]; } } ``` ## Mega Menu MegaMenu is navigation component that displays submenus together. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | | model | MegaMenuItem[] | - | An array of menuitems. | | orientation | "horizontal" \| "vertical" | - | Defines the orientation. | | id | string | - | Current id state as a string. | | ariaLabel | string | - | Defines a string value that labels an interactive element. | | ariaLabelledBy | string | - | Identifier of the underlying input element. | | breakpoint | string | - | The breakpoint to define the maximum width boundary. | | scrollHeight | string | - | Height of the viewport, a scrollbar is defined if height of list exceeds this value. | | disabled | boolean | - | When present, it specifies that the component should be disabled. | | tabindex | number | - | Index of the element in tabbing order. | ### Templates | Name | Type | Description | |------|------|-------------| | start | TemplateRef | Defines template option for start. | | end | TemplateRef | Defines template option for end. | | menuicon | TemplateRef | Defines template option for menu icon. | | submenuicon | TemplateRef | Defines template option for submenu icon. | | item | TemplateRef | Custom item template. | | button | TemplateRef | Custom menu button template on responsive mode. | | buttonicon | TemplateRef | Custom menu button icon template on responsive mode. | ## Pass Through Options | Name | Type | Description | |------|------|-------------| | root | PassThroughOption | Used to pass attributes to the root's DOM element. | | start | PassThroughOption | Used to pass attributes to the start's DOM element. | | button | PassThroughOption | Used to pass attributes to the button's DOM element. | | buttonIcon | PassThroughOption | Used to pass attributes to the button icon's DOM element. | | rootList | PassThroughOption | Used to pass attributes to the root list's DOM element. | | submenuLabel | PassThroughOption | Used to pass attributes to the submenu label's DOM element. | | separator | PassThroughOption | Used to pass attributes to the separator's DOM element. | | item | PassThroughOption | Used to pass attributes to the item's DOM element. | | itemContent | PassThroughOption | Used to pass attributes to the item content's DOM element. | | itemLink | PassThroughOption | Used to pass attributes to the item link's DOM element. | | itemIcon | PassThroughOption | Used to pass attributes to the item icon's DOM element. | | itemLabel | PassThroughOption | Used to pass attributes to the item label's DOM element. | | submenuIcon | PassThroughOption | Used to pass attributes to the submenu icon's DOM element. | | overlay | PassThroughOption | Used to pass attributes to the overlay's DOM element. | | grid | PassThroughOption | Used to pass attributes to the grid's DOM element. | | column | PassThroughOption | Used to pass attributes to the column's DOM element. | | submenu | PassThroughOption | Used to pass attributes to the submenu's DOM element. | | end | PassThroughOption | Used to pass attributes to the end's DOM element. | ## Theming ### CSS Classes | Class | Description | |-------|-------------| | p-megamenu | Class name of the root element | | p-megamenu-start | Class name of the start element | | p-megamenu-button | Class name of the button element | | p-megamenu-root-list | Class name of the root list element | | p-megamenu-submenu-item | Class name of the submenu item element | | p-megamenu-item | Class name of the item element | | p-megamenu-item-content | Class name of the item content element | | p-megamenu-item-link | Class name of the item link element | | p-megamenu-item-icon | Class name of the item icon element | | p-megamenu-item-label | Class name of the item label element | | p-megamenu-submenu-icon | Class name of the submenu icon element | | p-megamenu-panel | Class name of the panel element | | p-megamenu-grid | Class name of the grid element | | p-megamenu-submenu | Class name of the submenu element | | p-megamenu-submenu-item-label | Class name of the submenu item label element | | p-megamenu-separator | Class name of the separator element | | p-megamenu-end | Class name of the end element | ### Design Tokens | Token | CSS Variable | Description | |-------|--------------|-------------| | megamenu.background | --p-megamenu-background | Background of root | | megamenu.border.color | --p-megamenu-border-color | Border color of root | | megamenu.border.radius | --p-megamenu-border-radius | Border radius of root | | megamenu.color | --p-megamenu-color | Color of root | | megamenu.gap | --p-megamenu-gap | Gap of root | | megamenu.vertical.orientation.padding | --p-megamenu-vertical-orientation-padding | Vertical orientation padding of root | | megamenu.vertical.orientation.gap | --p-megamenu-vertical-orientation-gap | Vertical orientation gap of root | | megamenu.horizontal.orientation.padding | --p-megamenu-horizontal-orientation-padding | Horizontal orientation padding of root | | megamenu.horizontal.orientation.gap | --p-megamenu-horizontal-orientation-gap | Horizontal orientation gap of root | | megamenu.transition.duration | --p-megamenu-transition-duration | Transition duration of root | | megamenu.base.item.border.radius | --p-megamenu-base-item-border-radius | Border radius of base item | | megamenu.base.item.padding | --p-megamenu-base-item-padding | Padding of base item | | megamenu.item.focus.background | --p-megamenu-item-focus-background | Focus background of item | | megamenu.item.active.background | --p-megamenu-item-active-background | Active background of item | | megamenu.item.color | --p-megamenu-item-color | Color of item | | megamenu.item.focus.color | --p-megamenu-item-focus-color | Focus color of item | | megamenu.item.active.color | --p-megamenu-item-active-color | Active color of item | | megamenu.item.padding | --p-megamenu-item-padding | Padding of item | | megamenu.item.border.radius | --p-megamenu-item-border-radius | Border radius of item | | megamenu.item.gap | --p-megamenu-item-gap | Gap of item | | megamenu.item.icon.color | --p-megamenu-item-icon-color | Icon color of item | | megamenu.item.icon.focus.color | --p-megamenu-item-icon-focus-color | Icon focus color of item | | megamenu.item.icon.active.color | --p-megamenu-item-icon-active-color | Icon active color of item | | megamenu.item.icon.size | --p-megamenu-item-icon-size | Icon size of item | | megamenu.item.label.font.weight | --p-megamenu-item-label-font-weight | Font weight of item label | | megamenu.item.label.font.size | --p-megamenu-item-label-font-size | Font size of item label | | megamenu.overlay.padding | --p-megamenu-overlay-padding | Padding of overlay | | megamenu.overlay.background | --p-megamenu-overlay-background | Background of overlay | | megamenu.overlay.border.color | --p-megamenu-overlay-border-color | Border color of overlay | | megamenu.overlay.border.radius | --p-megamenu-overlay-border-radius | Border radius of overlay | | megamenu.overlay.color | --p-megamenu-overlay-color | Color of overlay | | megamenu.overlay.shadow | --p-megamenu-overlay-shadow | Shadow of overlay | | megamenu.overlay.gap | --p-megamenu-overlay-gap | Gap of overlay | | megamenu.submenu.padding | --p-megamenu-submenu-padding | Padding of submenu | | megamenu.submenu.gap | --p-megamenu-submenu-gap | Gap of submenu | | megamenu.submenu.label.padding | --p-megamenu-submenu-label-padding | Padding of submenu label | | megamenu.submenu.label.font.weight | --p-megamenu-submenu-label-font-weight | Font weight of submenu label | | megamenu.submenu.label.font.size | --p-megamenu-submenu-label-font-size | Font size of submenu label | | megamenu.submenu.label.background | --p-megamenu-submenu-label-background | Background of submenu label | | megamenu.submenu.label.color | --p-megamenu-submenu-label-color | Color of submenu label | | megamenu.submenu.icon.size | --p-megamenu-submenu-icon-size | Size of submenu icon | | megamenu.submenu.icon.color | --p-megamenu-submenu-icon-color | Color of submenu icon | | megamenu.submenu.icon.focus.color | --p-megamenu-submenu-icon-focus-color | Focus color of submenu icon | | megamenu.submenu.icon.active.color | --p-megamenu-submenu-icon-active-color | Active color of submenu icon | | megamenu.separator.border.color | --p-megamenu-separator-border-color | Border color of separator | | megamenu.mobile.button.border.radius | --p-megamenu-mobile-button-border-radius | Border radius of mobile button | | megamenu.mobile.button.size | --p-megamenu-mobile-button-size | Size of mobile button | | megamenu.mobile.button.color | --p-megamenu-mobile-button-color | Color of mobile button | | megamenu.mobile.button.hover.color | --p-megamenu-mobile-button-hover-color | Hover color of mobile button | | megamenu.mobile.button.hover.background | --p-megamenu-mobile-button-hover-background | Hover background of mobile button | | megamenu.mobile.button.focus.ring.width | --p-megamenu-mobile-button-focus-ring-width | Focus ring width of mobile button | | megamenu.mobile.button.focus.ring.style | --p-megamenu-mobile-button-focus-ring-style | Focus ring style of mobile button | | megamenu.mobile.button.focus.ring.color | --p-megamenu-mobile-button-focus-ring-color | Focus ring color of mobile button | | megamenu.mobile.button.focus.ring.offset | --p-megamenu-mobile-button-focus-ring-offset | Focus ring offset of mobile button | | megamenu.mobile.button.focus.ring.shadow | --p-megamenu-mobile-button-focus-ring-shadow | Focus ring shadow of mobile button | --- # Angular Menu Component Menu is a navigation / command component that supports dynamic and static positioning. ## Accessibility Screen Reader Menu component uses the menu role and the value to describe the menu can either be provided with aria-labelledby or aria-label props. Each list item has a presentation role whereas anchor elements have a menuitem role with aria-label referring to the label of the item and aria-disabled defined if the item is disabled. A submenu within a Menu uses the group role with an aria-labelledby defined as the id of the submenu root menuitem label. In popup mode, the component implicitly manages the aria-expanded , aria-haspopup and aria-controls attributes of the target element to define the relation between the target and the popup. Keyboard Support Key Function tab Add focus to the first item if focus moves in to the menu. If the focus is already within the menu, focus moves to the next focusable item in the page tab sequence. shift + tab Add focus to the last item if focus moves in to the menu. If the focus is already within the menu, focus moves to the previous focusable item in the page tab sequence. enter Activates the focused menuitem. If menu is in overlay mode, popup gets closes and focus moves to target. space Activates the focused menuitem. If menu is in overlay mode, popup gets closes and focus moves to target. escape If menu is in overlay mode, popup gets closes and focus moves to target. down arrow Moves focus to the next menuitem. up arrow Moves focus to the previous menuitem. home Moves focus to the first menuitem. end Moves focus to the last menuitem. ## Basic Menu requires a collection of menuitems as its model . **Example:** ```typescript import { Component, OnInit } from '@angular/core'; import { MenuModule } from 'primeng/menu'; import { MenuItem } from 'primeng/api'; @Component({ template: `
`, standalone: true, imports: [MenuModule] }) export class MenuBasicDemo implements OnInit { items: MenuItem[] | undefined; ngOnInit() { this.items = [ { label: 'New', icon: 'pi pi-plus' }, { label: 'Search', icon: 'pi pi-search' } ]; } } ``` ## Command The function to invoke when an item is clicked is defined using the command property. **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { MenuModule } from 'primeng/menu'; import { MenuItem, MessageService } from 'primeng/api'; @Component({ template: `
`, standalone: true, imports: [MenuModule], providers: [MessageService] }) export class MenuCommandDemo implements OnInit { private messageService = inject(MessageService); items: MenuItem[] | undefined; ngOnInit() { this.items = [ { label: 'New', icon: 'pi pi-plus', command: () => { this.update(); } }, { label: 'Search', icon: 'pi pi-search', command: () => { this.delete(); } } ]; } update() { this.messageService.add({ severity: 'success', summary: 'Success', detail: 'File created', life: 3000 }); } delete() { this.messageService.add({ severity: 'warn', summary: 'Search Completed', detail: 'No results found', life: 3000 }); } } ``` ## Group Menu supports one level of nesting by defining children with items property. **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { MenuModule } from 'primeng/menu'; import { MenuItem, MessageService } from 'primeng/api'; @Component({ template: `
`, standalone: true, imports: [MenuModule], providers: [MessageService] }) export class MenuGroupDemo implements OnInit { private messageService = inject(MessageService); items: MenuItem[] | undefined; ngOnInit() { this.items = [ { label: 'Documents', items: [ { label: 'New', icon: 'pi pi-plus' }, { label: 'Search', icon: 'pi pi-search' } ] }, { label: 'Profile', items: [ { label: 'Settings', icon: 'pi pi-cog' }, { label: 'Logout', icon: 'pi pi-sign-out' } ] } ]; } } ``` ## Popup Popup mode is enabled by setting popup property to true and calling toggle method with an event of the target. **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { ButtonModule } from 'primeng/button'; import { MenuModule } from 'primeng/menu'; import { MenuItem, MessageService } from 'primeng/api'; @Component({ template: `
`, standalone: true, imports: [ButtonModule, MenuModule], providers: [MessageService] }) export class MenuPopupDemo implements OnInit { private messageService = inject(MessageService); items: MenuItem[] | undefined; ngOnInit() { this.items = [ { label: 'Options', items: [ { label: 'Refresh', icon: 'pi pi-refresh' }, { label: 'Export', icon: 'pi pi-upload' } ] } ]; } } ``` ## Router Menu items support navigation via routerLink, programmatic routing using commands, or external URLs. **Example:** ```typescript import { Component, OnInit } from '@angular/core'; import { MenuModule } from 'primeng/menu'; import { MenuItem } from 'primeng/api'; @Component({ template: `
`, standalone: true, imports: [MenuModule] }) export class MenuRouterDemo implements OnInit { items: MenuItem[] | undefined; ngOnInit() { this.items = [ { label: 'Navigate', items: [ { label: 'Router Link', icon: 'pi pi-palette', routerLink: '/theming' }, { label: 'Programmatic', icon: 'pi pi-link', command: () => { this.router.navigate(['/installation']); } }, { label: 'External', icon: 'pi pi-home', url: 'https://angular.io//' } ] } ]; } } ``` ## Template Menu offers item customization with the item template that receives the menuitem instance from the model as a parameter. The submenu header has its own submenuheader template, additional slots named start and end are provided to embed content before or after the menu. **Example:** ```typescript import { Component, OnInit } from '@angular/core'; import { AvatarModule } from 'primeng/avatar'; import { BadgeModule } from 'primeng/badge'; import { Menu, MenuModule } from 'primeng/menu'; import { RippleModule } from 'primeng/ripple'; import { MenuItem } from 'primeng/api'; @Component({ template: ` PRIMEAPP {{ item.label }} {{ item.label }} @if (item.badge) { } @if (item.shortcut) { {{ item.shortcut }} } `, standalone: true, imports: [AvatarModule, BadgeModule, MenuModule, RippleModule] }) export class MenuTemplateDemo implements OnInit { items: MenuItem[] | undefined; ngOnInit() { this.items = [ { separator: true }, { label: 'Documents', items: [ { label: 'New', icon: 'pi pi-plus', shortcut: '⌘+N' }, { label: 'Search', icon: 'pi pi-search', shortcut: '⌘+S' } ] }, { label: 'Profile', items: [ { label: 'Settings', icon: 'pi pi-cog', shortcut: '⌘+O' }, { label: 'Messages', icon: 'pi pi-inbox', badge: '2' }, { label: 'Logout', icon: 'pi pi-sign-out', shortcut: '⌘+Q', linkClass: 'text-red-500! dark:text-red-400!' } ] }, { separator: true } ]; } } ``` ## Toggleable Nested submenus are toggleable by default. Use expanded to control the initial state and toggleable to override the default behavior per item. **Example:** ```typescript import { Component, OnInit } from '@angular/core'; import { MenuModule } from 'primeng/menu'; import { MenuItem } from 'primeng/api'; @Component({ template: `
`, standalone: true, imports: [MenuModule] }) export class MenuToggleableDemo implements OnInit { items: MenuItem[] | undefined; ngOnInit() { this.items = [ { label: 'Dashboard', icon: 'pi pi-home' }, { separator: true }, { label: 'Workspace', items: [ { label: 'Analytics', icon: 'pi pi-chart-line' }, { label: 'Projects', icon: 'pi pi-folder', items: [ { label: 'Active Projects', icon: 'pi pi-briefcase' }, { label: 'Recent', icon: 'pi pi-clock' }, { label: 'Favorites', icon: 'pi pi-star' }, { label: 'Completed', icon: 'pi pi-check-circle' } ] } ] }, { separator: true }, { label: 'Help & Support', icon: 'pi pi-question-circle' } ]; } } ``` ## Menu Menu is a navigation / command component that supports dynamic and static positioning. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | | model | MenuItem[] | - | An array of menuitems. | | popup | boolean | - | Defines if menu would displayed as a popup. | | style | Partial | - | Inline style of the component. | | styleClass | string | - | Style class of the component. | | autoZIndex | boolean | - | Whether to automatically manage layering. | | baseZIndex | number | - | Base zIndex value to use in layering. | | ariaLabel | string | - | Defines a string value that labels an interactive element. | | ariaLabelledBy | string | - | Identifier of the underlying input element. | | id | string | - | Current id state as a string. | | tabindex | number | - | Index of the element in tabbing order. | | appendTo | HTMLElement \| ElementRef \| TemplateRef \| "self" \| "body" \| null \| undefined | 'self' | Target element to attach the overlay, valid values are "body" or a local ng-template variable of another element (note: use binding with brackets for template variables, e.g. [appendTo]="mydiv" for a div element having #mydiv as variable name). | | motionOptions | MotionOptions | - | The motion options. | ### Emits | Name | Parameters | Description | |------|------------|-------------| | onShow | value: object | Callback to invoke when overlay menu is shown. | | onHide | value: object | Callback to invoke when overlay menu is hidden. | | onBlur | event: Event | Callback to invoke when the list loses focus. | | onFocus | event: Event | Callback to invoke when the list receives focus. | ### Templates | Name | Type | Description | |------|------|-------------| | start | TemplateRef | Defines template option for start. | | end | TemplateRef | Defines template option for end. | | item | TemplateRef | Custom item template. | | submenuheader | TemplateRef | Custom submenu header template. | | submenuicon | TemplateRef | Custom submenu toggle icon template. | ### Methods | Name | Parameters | Return Type | Description | |------|------------|-------------|-------------| | toggle | event: Event | void | Toggles the visibility of the popup menu. | | show | event: Event | void | Displays the popup menu. | | hide | | void | Hides the popup menu. | ## Pass Through Options | Name | Type | Description | |------|------|-------------| | root | PassThroughOption | Used to pass attributes to the root's DOM element. | | start | PassThroughOption | Used to pass attributes to the start's DOM element. | | list | PassThroughOption | Used to pass attributes to the list's DOM element. | | submenuLabel | PassThroughOption | Used to pass attributes to the submenu label's DOM element. | | submenuIcon | PassThroughOption | Used to pass attributes to the submenu icon's DOM element. | | separator | PassThroughOption | Used to pass attributes to the separator's DOM element. | | item | PassThroughOption | Used to pass attributes to the item's DOM element. | | itemContent | PassThroughOption | Used to pass attributes to the item content's DOM element. | | itemLink | PassThroughOption | Used to pass attributes to the item link's DOM element. | | itemIcon | PassThroughOption | Used to pass attributes to the item icon's DOM element. | | itemLabel | PassThroughOption | Used to pass attributes to the item label's DOM element. | | end | PassThroughOption | Used to pass attributes to the end's DOM element. | | motion | MotionOptions | Used to pass options to the motion component/directive. | ## Theming ### CSS Classes | Class | Description | |-------|-------------| | p-menu | Class name of the root element | | p-menu-start | Class name of the start element | | p-menu-list | Class name of the list element | | p-menu-submenu-item | Class name of the submenu item element | | p-menu-separator | Class name of the separator element | | p-menu-end | Class name of the end element | | p-menu-item | Class name of the item element | | p-menu-item-content | Class name of the item content element | | p-menu-item-link | Class name of the item link element | | p-menu-item-icon | Class name of the item icon element | | p-menu-item-label | Class name of the item label element | | p-menu-submenu | Class name of the submenu element | | p-menu-submenu-label | Class name of the submenu label element | | p-menu-submenu-icon | Class name of the submenu icon element | | p-menu-submenu-list | Class name of the submenu list element | ### Design Tokens | Token | CSS Variable | Description | |-------|--------------|-------------| | menu.background | --p-menu-background | Background of root | | menu.border.color | --p-menu-border-color | Border color of root | | menu.color | --p-menu-color | Color of root | | menu.border.radius | --p-menu-border-radius | Border radius of root | | menu.shadow | --p-menu-shadow | Shadow of root | | menu.transition.duration | --p-menu-transition-duration | Transition duration of root | | menu.list.padding | --p-menu-list-padding | Padding of list | | menu.list.gap | --p-menu-list-gap | Gap of list | | menu.item.focus.background | --p-menu-item-focus-background | Focus background of item | | menu.item.color | --p-menu-item-color | Color of item | | menu.item.focus.color | --p-menu-item-focus-color | Focus color of item | | menu.item.padding | --p-menu-item-padding | Padding of item | | menu.item.border.radius | --p-menu-item-border-radius | Border radius of item | | menu.item.gap | --p-menu-item-gap | Gap of item | | menu.item.icon.color | --p-menu-item-icon-color | Icon color of item | | menu.item.icon.focus.color | --p-menu-item-icon-focus-color | Icon focus color of item | | menu.item.icon.size | --p-menu-item-icon-size | Icon size of item | | menu.item.label.font.weight | --p-menu-item-label-font-weight | Font weight of item label | | menu.item.label.font.size | --p-menu-item-label-font-size | Font size of item label | | menu.submenu.label.padding | --p-menu-submenu-label-padding | Padding of submenu label | | menu.submenu.label.font.weight | --p-menu-submenu-label-font-weight | Font weight of submenu label | | menu.submenu.label.font.size | --p-menu-submenu-label-font-size | Font size of submenu label | | menu.submenu.label.background | --p-menu-submenu-label-background | Background of submenu label | | menu.submenu.label.color | --p-menu-submenu-label-color | Color of submenu label | | menu.submenu.icon.size | --p-menu-submenu-icon-size | Size of submenu icon | | menu.submenu.icon.color | --p-menu-submenu-icon-color | Color of submenu icon | | menu.submenu.icon.focus.color | --p-menu-submenu-icon-focus-color | Focus color of submenu icon | | menu.separator.border.color | --p-menu-separator-border-color | Border color of separator | --- # Angular Menubar Component Menubar is a horizontal menu component. ## Accessibility Screen Reader Menubar component uses the menubar role and the value to describe the menu can either be provided with aria-labelledby or aria-label props. Each list item has a presentation role whereas anchor elements have a menuitem role with aria-label referring to the label of the item and aria-disabled defined if the item is disabled. A submenu within a MenuBar uses the menu role with an aria-labelledby defined as the id of the submenu root menuitem label. In addition, menuitems that open a submenu have aria-haspopup , aria-expanded and aria-controls to define the relation between the item and the submenu. In mobile viewports, a menu icon appears with a button role along with aria-haspopup , aria-expanded and aria-controls to manage the relation between the overlay menubar and the button. The value to describe the button can be defined aria-label or aria-labelledby specified using buttonProps , by default navigation key of the aria property from the locale API as the aria-label . Keyboard Support Key Function tab Add focus to the first item if focus moves in to the menu. If the focus is already within the menu, focus moves to the next focusable item in the page tab sequence. shift + tab Add focus to the last item if focus moves in to the menu. If the focus is already within the menu, focus moves to the previous focusable item in the page tab sequence. enter If menuitem has a submenu, toggles the visibility of the submenu otherwise activates the menuitem and closes all open overlays. space If menuitem has a submenu, toggles the visibility of the submenu otherwise activates the menuitem and closes all open overlays. escape If focus is inside a popup submenu, closes the submenu and moves focus to the root item of the closed submenu. down arrow If focus is on a root element, open a submenu and moves focus to the first element in the submenu otherwise moves focus to the next menuitem within the submenu. up arrow If focus is on a root element, opens a submenu and moves focus to the last element in the submenu otherwise moves focus to the previous menuitem within the submenu. right arrow If focus is on a root element, moves focus to the next menuitem otherwise opens a submenu if there is one available and moves focus to the first item. left arrow If focus is on a root element, moves focus to the previous menuitem otherwise closes a submenu and moves focus to the root item of the closed submenu. home Moves focus to the first menuitem within the submenu. end Moves focus to the last menuitem within the submenu. ## Basic Menubar requires nested menuitems as its model. **Example:** ```typescript import { Component, OnInit } from '@angular/core'; import { MenubarModule } from 'primeng/menubar'; import { MenuItem } from 'primeng/api'; @Component({ template: ` `, standalone: true, imports: [MenubarModule] }) export class MenubarBasicDemo implements OnInit { items: MenuItem[] | undefined; ngOnInit() { this.items = [ { label: 'Home', icon: 'pi pi-home' }, { label: 'Features', icon: 'pi pi-star' }, { label: 'Projects', icon: 'pi pi-search', items: [ { label: 'Components', icon: 'pi pi-bolt' }, { label: 'Blocks', icon: 'pi pi-server' }, { label: 'UI Kit', icon: 'pi pi-pencil' }, { label: 'Templates', icon: 'pi pi-palette', items: [ { label: 'Apollo', icon: 'pi pi-palette' }, { label: 'Ultima', icon: 'pi pi-palette' } ] } ] }, { label: 'Contact', icon: 'pi pi-envelope' } ]; } } ``` ## Command The command property defines the callback to run when an item is activated by click or a key event. **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { MenubarModule } from 'primeng/menubar'; import { MenuItem, MessageService } from 'primeng/api'; @Component({ template: ` `, standalone: true, imports: [MenubarModule], providers: [MessageService] }) export class MenubarCommandDemo implements OnInit { private messageService = inject(MessageService); items: MenuItem[] | undefined; ngOnInit() { this.items = [ { label: 'File', icon: 'pi pi-file', items: [ { label: 'New', icon: 'pi pi-plus', command: () => { this.messageService.add({ severity: 'success', summary: 'Success', detail: 'File created', life: 3000 }); } }, { label: 'Print', icon: 'pi pi-print', command: () => { this.messageService.add({ severity: 'error', summary: 'Error', detail: 'No printer connected', life: 3000 }); } } ] }, { label: 'Search', icon: 'pi pi-search', command: () => { this.messageService.add({ severity: 'warn', summary: 'Search Results', detail: 'No results found', life: 3000 }); } }, { separator: true }, { label: 'Sync', icon: 'pi pi-cloud', items: [ { label: 'Import', icon: 'pi pi-cloud-download', command: () => { this.messageService.add({ severity: 'info', summary: 'Downloads', detail: 'Downloaded from cloud', life: 3000 }); } }, { label: 'Export', icon: 'pi pi-cloud-upload', command: () => { this.messageService.add({ severity: 'info', summary: 'Shared', detail: 'Exported to cloud', life: 3000 }); } } ] } ]; } } ``` ## Router Menu items support navigation via routerLink, programmatic routing using commands, or external URLs. **Example:** ```typescript import { Component, OnInit } from '@angular/core'; import { MenubarModule } from 'primeng/menubar'; import { MenuItem } from 'primeng/api'; @Component({ template: ` `, standalone: true, imports: [MenubarModule] }) export class MenubarRouterDemo implements OnInit { items: MenuItem[] | undefined; ngOnInit() { this.items = [ { label: 'Router', icon: 'pi pi-palette', items: [ { label: 'Installation', routerLink: '/installation' }, { label: 'Configuration', routerLink: '/configuration' } ] }, { label: 'Programmatic', icon: 'pi pi-link', command: () => { this.router.navigate(['/installation']); } }, { label: 'External', icon: 'pi pi-home', items: [ { label: 'Angular', url: 'https://angular.io/' }, { label: 'Vite.js', url: 'https://vitejs.dev/' } ] } ]; } } ``` ## Template Custom content can be placed inside the menubar using the start and end templates. **Example:** ```typescript import { Component, OnInit } from '@angular/core'; import { AvatarModule } from 'primeng/avatar'; import { BadgeModule } from 'primeng/badge'; import { MenubarModule } from 'primeng/menubar'; import { InputTextModule } from 'primeng/inputtext'; import { RippleModule } from 'primeng/ripple'; import { MenuItem } from 'primeng/api'; @Component({ template: ` {{ item.label }} @if (item.badge) { } @if (item.shortcut) { {{ item.shortcut }} } @if (item.items) { }
`, standalone: true, imports: [AvatarModule, BadgeModule, MenubarModule, InputTextModule, RippleModule] }) export class MenubarTemplateDemo implements OnInit { items: MenuItem[] | undefined; ngOnInit() { this.items = [ { label: 'Home', icon: 'pi pi-home' }, { label: 'Projects', icon: 'pi pi-search', badge: '3', items: [ { label: 'Core', icon: 'pi pi-bolt', shortcut: '⌘+S' }, { label: 'Blocks', icon: 'pi pi-server', shortcut: '⌘+B' }, { separator: true }, { label: 'UI Kit', icon: 'pi pi-pencil', shortcut: '⌘+U' } ] } ]; } } ``` ## Menubar Menubar is a horizontal menu component. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | | model | MenuItem[] | - | An array of menuitems. | | autoZIndex | boolean | - | Whether to automatically manage layering. | | baseZIndex | number | - | Base zIndex value to use in layering. | | autoDisplay | boolean | true | Whether to show a root submenu on mouse over. | | autoHide | boolean | - | Whether to hide a root submenu when mouse leaves. | | breakpoint | string | - | The breakpoint to define the maximum width boundary. | | autoHideDelay | number | - | Delay to hide the root submenu in milliseconds when mouse leaves. | | id | string | - | Current id state as a string. | | ariaLabel | string | - | Defines a string value that labels an interactive element. | | ariaLabelledBy | string | - | Identifier of the underlying input element. | ### Emits | Name | Parameters | Description | |------|------------|-------------| | onFocus | event: FocusEvent | Callback to execute when button is focused. | | onBlur | event: FocusEvent | Callback to execute when button loses focus. | ### Templates | Name | Type | Description | |------|------|-------------| | start | TemplateRef | Defines template option for start. | | end | TemplateRef | Defines template option for end. | | item | TemplateRef | Custom item template. | | menuicon | TemplateRef | Defines template option for menu icon. | | submenuicon | TemplateRef | Defines template option for submenu icon. | ## Pass Through Options | Name | Type | Description | |------|------|-------------| | root | PassThroughOption | Used to pass attributes to the root's DOM element. | | rootList | PassThroughOption | Used to pass attributes to the root list's DOM element. | | item | PassThroughOption | Used to pass attributes to the item's DOM element. | | itemContent | PassThroughOption | Used to pass attributes to the item content's DOM element. | | itemLink | PassThroughOption | Used to pass attributes to the item link's DOM element. | | itemIcon | PassThroughOption | Used to pass attributes to the item icon's DOM element. | | itemLabel | PassThroughOption | Used to pass attributes to the item label's DOM element. | | submenuIcon | PassThroughOption | Used to pass attributes to the submenu icon's DOM element. | | separator | PassThroughOption | Used to pass attributes to the separator's DOM element. | | button | PassThroughOption | Used to pass attributes to the mobile menu button's DOM element. | | buttonIcon | PassThroughOption | Used to pass attributes to the mobile menu button icon's DOM element. | | submenu | PassThroughOption | Used to pass attributes to the submenu's DOM element. | | start | PassThroughOption | Used to pass attributes to the start of the component. | | end | PassThroughOption | Used to pass attributes to the end of the component. | | pcBadge | BadgePassThrough | Used to pass attributes to Badge component. | ## Theming ### CSS Classes | Class | Description | |-------|-------------| | p-menubar | Class name of the root element | | p-menubar-start | Class name of the start element | | p-menubar-button | Class name of the button element | | p-menubar-root-list | Class name of the root list element | | p-menubar-item | Class name of the item element | | p-menubar-item-content | Class name of the item content element | | p-menubar-item-link | Class name of the item link element | | p-menubar-item-icon | Class name of the item icon element | | p-menubar-item-label | Class name of the item label element | | p-menubar-submenu-icon | Class name of the submenu icon element | | p-menubar-submenu | Class name of the submenu element | | p-menubar-separator | Class name of the separator element | | p-menubar-end | Class name of the end element | ### Design Tokens | Token | CSS Variable | Description | |-------|--------------|-------------| | menubar.background | --p-menubar-background | Background of root | | menubar.border.color | --p-menubar-border-color | Border color of root | | menubar.border.radius | --p-menubar-border-radius | Border radius of root | | menubar.color | --p-menubar-color | Color of root | | menubar.gap | --p-menubar-gap | Gap of root | | menubar.padding | --p-menubar-padding | Padding of root | | menubar.transition.duration | --p-menubar-transition-duration | Transition duration of root | | menubar.base.item.border.radius | --p-menubar-base-item-border-radius | Border radius of base item | | menubar.base.item.padding | --p-menubar-base-item-padding | Padding of base item | | menubar.item.focus.background | --p-menubar-item-focus-background | Focus background of item | | menubar.item.active.background | --p-menubar-item-active-background | Active background of item | | menubar.item.color | --p-menubar-item-color | Color of item | | menubar.item.focus.color | --p-menubar-item-focus-color | Focus color of item | | menubar.item.active.color | --p-menubar-item-active-color | Active color of item | | menubar.item.padding | --p-menubar-item-padding | Padding of item | | menubar.item.border.radius | --p-menubar-item-border-radius | Border radius of item | | menubar.item.gap | --p-menubar-item-gap | Gap of item | | menubar.item.icon.color | --p-menubar-item-icon-color | Icon color of item | | menubar.item.icon.focus.color | --p-menubar-item-icon-focus-color | Icon focus color of item | | menubar.item.icon.active.color | --p-menubar-item-icon-active-color | Icon active color of item | | menubar.item.icon.size | --p-menubar-item-icon-size | Icon size of item | | menubar.item.label.font.weight | --p-menubar-item-label-font-weight | Font weight of item label | | menubar.item.label.font.size | --p-menubar-item-label-font-size | Font size of item label | | menubar.submenu.padding | --p-menubar-submenu-padding | Padding of submenu | | menubar.submenu.gap | --p-menubar-submenu-gap | Gap of submenu | | menubar.submenu.background | --p-menubar-submenu-background | Background of submenu | | menubar.submenu.border.color | --p-menubar-submenu-border-color | Border color of submenu | | menubar.submenu.border.radius | --p-menubar-submenu-border-radius | Border radius of submenu | | menubar.submenu.shadow | --p-menubar-submenu-shadow | Shadow of submenu | | menubar.submenu.mobile.indent | --p-menubar-submenu-mobile-indent | Mobile indent of submenu | | menubar.submenu.icon.size | --p-menubar-submenu-icon-size | Icon size of submenu | | menubar.submenu.icon.color | --p-menubar-submenu-icon-color | Icon color of submenu | | menubar.submenu.icon.focus.color | --p-menubar-submenu-icon-focus-color | Icon focus color of submenu | | menubar.submenu.icon.active.color | --p-menubar-submenu-icon-active-color | Icon active color of submenu | | menubar.separator.border.color | --p-menubar-separator-border-color | Border color of separator | | menubar.mobile.button.border.radius | --p-menubar-mobile-button-border-radius | Border radius of mobile button | | menubar.mobile.button.size | --p-menubar-mobile-button-size | Size of mobile button | | menubar.mobile.button.color | --p-menubar-mobile-button-color | Color of mobile button | | menubar.mobile.button.hover.color | --p-menubar-mobile-button-hover-color | Hover color of mobile button | | menubar.mobile.button.hover.background | --p-menubar-mobile-button-hover-background | Hover background of mobile button | | menubar.mobile.button.focus.ring.width | --p-menubar-mobile-button-focus-ring-width | Focus ring width of mobile button | | menubar.mobile.button.focus.ring.style | --p-menubar-mobile-button-focus-ring-style | Focus ring style of mobile button | | menubar.mobile.button.focus.ring.color | --p-menubar-mobile-button-focus-ring-color | Focus ring color of mobile button | | menubar.mobile.button.focus.ring.offset | --p-menubar-mobile-button-focus-ring-offset | Focus ring offset of mobile button | | menubar.mobile.button.focus.ring.shadow | --p-menubar-mobile-button-focus-ring-shadow | Focus ring shadow of mobile button | --- # Angular Message Component Message component is used to display inline messages. ## Accessibility Screen Reader Message component uses alert role that implicitly defines aria-live as "assertive" and aria-atomic as "true". Since any attribute is passed to the root element, attributes like aria-labelledby and aria-label can optionally be used as well. Close element is a button with an aria-label that refers to the aria.close property of the locale API by default. Close Button Keyboard Support Key Function enter Closes the message. space Closes the message. ## Basic Message component requires a content to display. **Example:** ```typescript import { Component } from '@angular/core'; import { MessageModule } from 'primeng/message'; @Component({ template: ` Message Content `, standalone: true, imports: [MessageModule] }) export class MessageBasicDemo {} ``` ## Closable Enable closable option to display an icon to remove a message. **Example:** ```typescript import { Component } from '@angular/core'; import { MessageModule } from 'primeng/message'; @Component({ template: ` Closable Message `, standalone: true, imports: [MessageModule] }) export class MessageClosableDemo {} ``` ## Dynamic Multiple messages can be displayed using the standard for block. **Example:** ```typescript import { Component, signal } from '@angular/core'; import { ButtonModule } from 'primeng/button'; import { MessageModule } from 'primeng/message'; @Component({ template: `
@for (message of messages(); track message.severity; let first = $first) { {{ message.content }} }
`, standalone: true, imports: [ButtonModule, MessageModule] }) export class MessageDynamicDemo { messages = signal([]); clearMessages() { this.messages.set([]); } addMessages() { this.messages.set([ { severity: 'info', content: 'Dynamic Info Message' }, { severity: 'success', content: 'Dynamic Success Message' }, { severity: 'warn', content: 'Dynamic Warn Message' } ]); } } ``` ## form-doc Validation errors in a form are displayed with the error severity. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { InputMaskModule } from 'primeng/inputmask'; import { MessageModule } from 'primeng/message'; import { InputTextModule } from 'primeng/inputtext'; @Component({ template: `
Validation Failed
@if (!username) { Username is required }
@if (!phone) { Phone number is required }
`, standalone: true, imports: [InputMaskModule, MessageModule, InputTextModule, FormsModule] }) export class MessageFormDemo { username: string | undefined; phone: string | undefined; } ``` ## Icon The icon of a message is specified with the icon property. **Example:** ```typescript import { Component } from '@angular/core'; import { AvatarModule } from 'primeng/avatar'; import { MessageModule } from 'primeng/message'; @Component({ template: `
Info Message How may I help you?
`, standalone: true, imports: [AvatarModule, MessageModule] }) export class MessageIconDemo {} ``` ## Life Messages can disappear automatically by defined the life in milliseconds. **Example:** ```typescript import { Component, signal } from '@angular/core'; import { ButtonModule } from 'primeng/button'; import { MessageModule } from 'primeng/message'; @Component({ template: `
@if (visible()) { Auto disappear message }
`, standalone: true, imports: [ButtonModule, MessageModule] }) export class MessageLifeDemo { visible = signal(false); showMessage() { this.visible.set(true); setTimeout(() => { this.visible.set(false); }, 3000); } } ``` ## Outlined Configure the variant value as outlined for messages with borders and no background. **Example:** ```typescript import { Component } from '@angular/core'; import { MessageModule } from 'primeng/message'; @Component({ template: `
Success Message Info Message Warn Message Error Message Secondary Message Contrast Message
`, standalone: true, imports: [MessageModule] }) export class MessageOutlinedDemo {} ``` ## Severity The severity option specifies the type of the message. **Example:** ```typescript import { Component } from '@angular/core'; import { MessageModule } from 'primeng/message'; @Component({ template: `
Success Message Info Message Warn Message Error Message Secondary Message Contrast Message
`, standalone: true, imports: [MessageModule] }) export class MessageSeverityDemo {} ``` ## Simple Configure the variant value as simple for messages without borders and backgrounds. **Example:** ```typescript import { Component } from '@angular/core'; import { MessageModule } from 'primeng/message'; @Component({ template: `
Success Message Info Message Warn Message Error Message Secondary Message Contrast Message
`, standalone: true, imports: [MessageModule] }) export class MessageSimpleDemo {} ``` ## Sizes Message provides small and large sizes as alternatives to the base. **Example:** ```typescript import { Component } from '@angular/core'; import { MessageModule } from 'primeng/message'; @Component({ template: `
Small Message Normal Message Large Message
`, standalone: true, imports: [MessageModule] }) export class MessageSizesDemo {} ``` ## Message Message groups a collection of contents in tabs. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | | severity | "success" \| "info" \| "warn" \| "error" \| "secondary" \| "contrast" | 'info' | Severity level of the message. | | closable | boolean | false | Whether the message can be closed manually using the close icon. | | icon | string | undefined | Icon to display in the message. | | closeIcon | string | undefined | Icon to display in the message close button. | | size | "large" \| "small" | - | Defines the size of the component. | | variant | "outlined" \| "text" \| "simple" | - | Specifies the input variant of the component. | | motionOptions | MotionOptions | - | The motion options. | ### Emits | Name | Parameters | Description | |------|------------|-------------| | onClose | event: MessageCloseEvent | Emits when the message is closed. | ### Templates | Name | Type | Description | |------|------|-------------| | container | TemplateRef | Custom template of the message container. | | icon | TemplateRef | Custom template of the message icon. | | closeicon | TemplateRef | Custom template of the close icon. | ### Methods | Name | Parameters | Return Type | Description | |------|------------|-------------|-------------| | close | event: Event | void | Closes the message. | ## Pass Through Options | Name | Type | Description | |------|------|-------------| | host | PassThroughOption | Used to pass attributes to the host's DOM element. | | root | PassThroughOption | Used to pass attributes to the root's DOM element. | | content | PassThroughOption | Used to pass attributes to the content's DOM element. | | contentWrapper | PassThroughOption | Used to pass attributes to the content's DOM element. | | icon | PassThroughOption | Used to pass attributes to the icon's DOM element. | | text | PassThroughOption | Used to pass attributes to the text's DOM element. | | closeButton | PassThroughOption | Used to pass attributes to the close button's DOM element. | | closeIcon | PassThroughOption | Used to pass attributes to the close icon's DOM element. | | motion | MotionOptions | Used to pass options to the motion component/directive. | ## Theming ### CSS Classes | Class | Description | |-------|-------------| | p-message | Class name of the root element | | p-message-content | Class name of the content element | | p-message-icon | Class name of the icon element | | p-message-text | Class name of the text element | | p-message-close-button | Class name of the close button element | | p-message-close-icon | Class name of the close icon element | ### Design Tokens | Token | CSS Variable | Description | |-------|--------------|-------------| | message.border.radius | --p-message-border-radius | Border radius of root | | message.border.width | --p-message-border-width | Border width of root | | message.transition.duration | --p-message-transition-duration | Transition duration of root | | message.content.padding | --p-message-content-padding | Padding of content | | message.content.gap | --p-message-content-gap | Gap of content | | message.content.sm.padding | --p-message-content-sm-padding | Sm padding of content | | message.content.lg.padding | --p-message-content-lg-padding | Lg padding of content | | message.text.font.size | --p-message-text-font-size | Font size of text | | message.text.font.weight | --p-message-text-font-weight | Font weight of text | | message.text.sm.font.size | --p-message-text-sm-font-size | Sm font size of text | | message.text.lg.font.size | --p-message-text-lg-font-size | Lg font size of text | | message.icon.size | --p-message-icon-size | Size of icon | | message.icon.sm.size | --p-message-icon-sm-size | Sm size of icon | | message.icon.lg.size | --p-message-icon-lg-size | Lg size of icon | | message.close.button.width | --p-message-close-button-width | Width of close button | | message.close.button.height | --p-message-close-button-height | Height of close button | | message.close.button.border.radius | --p-message-close-button-border-radius | Border radius of close button | | message.close.button.focus.ring.width | --p-message-close-button-focus-ring-width | Focus ring width of close button | | message.close.button.focus.ring.style | --p-message-close-button-focus-ring-style | Focus ring style of close button | | message.close.button.focus.ring.offset | --p-message-close-button-focus-ring-offset | Focus ring offset of close button | | message.close.icon.size | --p-message-close-icon-size | Size of close icon | | message.close.icon.sm.size | --p-message-close-icon-sm-size | Sm size of close icon | | message.close.icon.lg.size | --p-message-close-icon-lg-size | Lg size of close icon | | message.outlined.border.width | --p-message-outlined-border-width | Root border width of outlined | | message.simple.content.padding | --p-message-simple-content-padding | Content padding of simple | | message.info.background | --p-message-info-background | Background of info | | message.info.border.color | --p-message-info-border-color | Border color of info | | message.info.color | --p-message-info-color | Color of info | | message.info.shadow | --p-message-info-shadow | Shadow of info | | message.info.close.button.hover.background | --p-message-info-close-button-hover-background | Close button hover background of info | | message.info.close.button.focus.ring.color | --p-message-info-close-button-focus-ring-color | Close button focus ring color of info | | message.info.close.button.focus.ring.shadow | --p-message-info-close-button-focus-ring-shadow | Close button focus ring shadow of info | | message.info.outlined.color | --p-message-info-outlined-color | Outlined color of info | | message.info.outlined.border.color | --p-message-info-outlined-border-color | Outlined border color of info | | message.info.simple.color | --p-message-info-simple-color | Simple color of info | | message.success.background | --p-message-success-background | Background of success | | message.success.border.color | --p-message-success-border-color | Border color of success | | message.success.color | --p-message-success-color | Color of success | | message.success.shadow | --p-message-success-shadow | Shadow of success | | message.success.close.button.hover.background | --p-message-success-close-button-hover-background | Close button hover background of success | | message.success.close.button.focus.ring.color | --p-message-success-close-button-focus-ring-color | Close button focus ring color of success | | message.success.close.button.focus.ring.shadow | --p-message-success-close-button-focus-ring-shadow | Close button focus ring shadow of success | | message.success.outlined.color | --p-message-success-outlined-color | Outlined color of success | | message.success.outlined.border.color | --p-message-success-outlined-border-color | Outlined border color of success | | message.success.simple.color | --p-message-success-simple-color | Simple color of success | | message.warn.background | --p-message-warn-background | Background of warn | | message.warn.border.color | --p-message-warn-border-color | Border color of warn | | message.warn.color | --p-message-warn-color | Color of warn | | message.warn.shadow | --p-message-warn-shadow | Shadow of warn | | message.warn.close.button.hover.background | --p-message-warn-close-button-hover-background | Close button hover background of warn | | message.warn.close.button.focus.ring.color | --p-message-warn-close-button-focus-ring-color | Close button focus ring color of warn | | message.warn.close.button.focus.ring.shadow | --p-message-warn-close-button-focus-ring-shadow | Close button focus ring shadow of warn | | message.warn.outlined.color | --p-message-warn-outlined-color | Outlined color of warn | | message.warn.outlined.border.color | --p-message-warn-outlined-border-color | Outlined border color of warn | | message.warn.simple.color | --p-message-warn-simple-color | Simple color of warn | | message.error.background | --p-message-error-background | Background of error | | message.error.border.color | --p-message-error-border-color | Border color of error | | message.error.color | --p-message-error-color | Color of error | | message.error.shadow | --p-message-error-shadow | Shadow of error | | message.error.close.button.hover.background | --p-message-error-close-button-hover-background | Close button hover background of error | | message.error.close.button.focus.ring.color | --p-message-error-close-button-focus-ring-color | Close button focus ring color of error | | message.error.close.button.focus.ring.shadow | --p-message-error-close-button-focus-ring-shadow | Close button focus ring shadow of error | | message.error.outlined.color | --p-message-error-outlined-color | Outlined color of error | | message.error.outlined.border.color | --p-message-error-outlined-border-color | Outlined border color of error | | message.error.simple.color | --p-message-error-simple-color | Simple color of error | | message.secondary.background | --p-message-secondary-background | Background of secondary | | message.secondary.border.color | --p-message-secondary-border-color | Border color of secondary | | message.secondary.color | --p-message-secondary-color | Color of secondary | | message.secondary.shadow | --p-message-secondary-shadow | Shadow of secondary | | message.secondary.close.button.hover.background | --p-message-secondary-close-button-hover-background | Close button hover background of secondary | | message.secondary.close.button.focus.ring.color | --p-message-secondary-close-button-focus-ring-color | Close button focus ring color of secondary | | message.secondary.close.button.focus.ring.shadow | --p-message-secondary-close-button-focus-ring-shadow | Close button focus ring shadow of secondary | | message.secondary.outlined.color | --p-message-secondary-outlined-color | Outlined color of secondary | | message.secondary.outlined.border.color | --p-message-secondary-outlined-border-color | Outlined border color of secondary | | message.secondary.simple.color | --p-message-secondary-simple-color | Simple color of secondary | | message.contrast.background | --p-message-contrast-background | Background of contrast | | message.contrast.border.color | --p-message-contrast-border-color | Border color of contrast | | message.contrast.color | --p-message-contrast-color | Color of contrast | | message.contrast.shadow | --p-message-contrast-shadow | Shadow of contrast | | message.contrast.close.button.hover.background | --p-message-contrast-close-button-hover-background | Close button hover background of contrast | | message.contrast.close.button.focus.ring.color | --p-message-contrast-close-button-focus-ring-color | Close button focus ring color of contrast | | message.contrast.close.button.focus.ring.shadow | --p-message-contrast-close-button-focus-ring-shadow | Close button focus ring shadow of contrast | | message.contrast.outlined.color | --p-message-contrast-outlined-color | Outlined color of contrast | | message.contrast.outlined.border.color | --p-message-contrast-outlined-border-color | Outlined border color of contrast | | message.contrast.simple.color | --p-message-contrast-simple-color | Simple color of contrast | --- # Angular MeterGroup Component MeterGroup displays scalar measurements within a known range. ## Accessibility Screen Reader MeterGroup component uses meter role in addition to the aria-valuemin , aria-valuemax and aria-valuenow attributes. Value to describe the component can be defined using aria-labelledby prop. Keyboard Support Component does not include any interactive elements. ## Basic MeterGroup requires a value as the data to display where each item in the collection should be a type of MeterItem . **Example:** ```typescript import { Component } from '@angular/core'; import { MeterGroupModule } from 'primeng/metergroup'; @Component({ template: ` `, standalone: true, imports: [MeterGroupModule] }) export class MeterGroupBasicDemo { value: any[] = [{ label: 'Space used', value: 15, color: 'var(--p-primary-color)' }]; } ``` ## Icon Icons can be displayed next to the labels instead of the default marker. **Example:** ```typescript import { Component } from '@angular/core'; import { MeterGroupModule } from 'primeng/metergroup'; @Component({ template: ` `, standalone: true, imports: [MeterGroupModule] }) export class MeterGroupIconDemo { value: any[] = [ { label: 'Apps', color: '#34d399', value: 16, icon: 'pi pi-table' }, { label: 'Messages', color: '#fbbf24', value: 8, icon: 'pi pi-inbox' }, { label: 'Media', color: '#60a5fa', value: 24, icon: 'pi pi-image' }, { label: 'System', color: '#c084fc', value: 10, icon: 'pi pi-cog' } ]; } ``` ## Label The position of the labels relative to the meters is defined using the labelPosition property. The default orientation of the labels is horizontal, and the vertical alternative is available through the labelOrientation option. **Example:** ```typescript import { Component } from '@angular/core'; import { MeterGroupModule } from 'primeng/metergroup'; @Component({ template: ` `, standalone: true, imports: [MeterGroupModule] }) export class MeterGroupLabelDemo { value: any[] = [ { label: 'Apps', color: '#34d399', value: 16 }, { label: 'Messages', color: '#fbbf24', value: 8 }, { label: 'Media', color: '#60a5fa', value: 24 }, { label: 'System', color: '#c084fc', value: 10 } ]; } ``` ## Min Max Boundaries are configured with the min and max values whose defaults are 0 and 100 respectively. **Example:** ```typescript import { Component } from '@angular/core'; import { MeterGroupModule } from 'primeng/metergroup'; @Component({ template: ` `, standalone: true, imports: [MeterGroupModule] }) export class MeterGroupMinMaxDemo { value: any[] = [ { label: 'Apps', color: '#34d399', value: 16 }, { label: 'Messages', color: '#fbbf24', value: 8 }, { label: 'Media', color: '#60a5fa', value: 24 }, { label: 'System', color: '#c084fc', value: 10 } ]; } ``` ## Multiple Adding more items to the array displays the meters in a group. **Example:** ```typescript import { Component } from '@angular/core'; import { MeterGroupModule } from 'primeng/metergroup'; @Component({ template: ` `, standalone: true, imports: [MeterGroupModule] }) export class MeterGroupMultipleDemo { value: any[] = [ { label: 'Apps', color: '#34d399', value: 16 }, { label: 'Messages', color: '#fbbf24', value: 8 }, { label: 'Media', color: '#60a5fa', value: 24 }, { label: 'System', color: '#c084fc', value: 10 } ]; } ``` ## Template MeterGroup provides templating support for labels, meter items, and content around the meters. **Example:** ```typescript import { Component } from '@angular/core'; import { ButtonModule } from 'primeng/button'; import { CardModule } from 'primeng/card'; import { MeterGroupModule } from 'primeng/metergroup'; @Component({ template: `
@for (meterItem of value; track $index; let index = $index) {
{{ meterItem.label }} {{ meterItem.value }}%
}
Storage {{ totalPercent }}% 1TB
`, standalone: true, imports: [ButtonModule, CardModule, MeterGroupModule] }) export class MeterGroupTemplateDemo { value: any[] = [ { label: 'Apps', color1: '#34d399', color2: '#fbbf24', value: 25, icon: 'pi pi-table' }, { label: 'Messages', color1: '#fbbf24', color2: '#60a5fa', value: 15, icon: 'pi pi-inbox' }, { label: 'Media', color1: '#60a5fa', color2: '#c084fc', value: 20, icon: 'pi pi-image' }, { label: 'System', color1: '#c084fc', color2: '#c084fc', value: 10, icon: 'pi pi-cog' } ]; } ``` ## Vertical Layout of the MeterGroup is configured with the orientation property that accepts either horizontal or vertical as available options. **Example:** ```typescript import { Component } from '@angular/core'; import { MeterGroupModule } from 'primeng/metergroup'; @Component({ template: `
`, standalone: true, imports: [MeterGroupModule] }) export class MeterGroupVerticalDemo { value: any[] = [ { label: 'Apps', color: '#34d399', value: 16 }, { label: 'Messages', color: '#fbbf24', value: 8 }, { label: 'Media', color: '#60a5fa', value: 24 }, { label: 'System', color: '#c084fc', value: 10 } ]; } ``` ## Meter Group MeterGroup displays scalar measurements within a known range. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | | value | MeterItem[] | - | Current value of the metergroup. | | min | number | - | Mininum boundary value. | | max | number | - | Maximum boundary value. | | orientation | "horizontal" \| "vertical" | - | Specifies the layout of the component, valid values are 'horizontal' and 'vertical'. | | labelPosition | "start" \| "end" | - | Specifies the label position of the component, valid values are 'start' and 'end'. | | labelOrientation | "horizontal" \| "vertical" | - | Specifies the label orientation of the component, valid values are 'horizontal' and 'vertical'. | ### Templates | Name | Type | Description | |------|------|-------------| | label | TemplateRef | Custom label template. | | meter | TemplateRef | Custom meter template. | | end | TemplateRef | Custom end template. | | start | TemplateRef | Custom start template. | | icon | TemplateRef | Custom icon template. | ## Pass Through Options | Name | Type | Description | |------|------|-------------| | host | PassThroughOption | Used to pass attributes to the host's DOM element. | | root | PassThroughOption | Used to pass attributes to the root's DOM element. | | meters | PassThroughOption | Used to pass attributes to the meters' DOM element. | | meter | PassThroughOption | Used to pass attributes to the meter's DOM element. | | labelList | PassThroughOption | Used to pass attributes to the label list's DOM element. | | label | PassThroughOption | Used to pass attributes to the label's DOM element. | | labelIcon | PassThroughOption | Used to pass attributes to the label icon's DOM element. | | labelMarker | PassThroughOption | Used to pass attributes to the label marker's DOM element. | | labelText | PassThroughOption | Used to pass attributes to the label text's DOM element. | ## Theming ### CSS Classes | Class | Description | |-------|-------------| | p-metergroup | Class name of the root element | | p-metergroup-meters | Class name of the meters element | | p-metergroup-meter | Class name of the meter element | | p-metergroup-label-list | Class name of the label list element | | p-metergroup-label | Class name of the label element | | p-metergroup-label-icon | Class name of the label icon element | | p-metergroup-label-marker | Class name of the label marker element | | p-metergroup-label-text | Class name of the label text element | ### Design Tokens | Token | CSS Variable | Description | |-------|--------------|-------------| | metergroup.border.radius | --p-metergroup-border-radius | Border radius of root | | metergroup.gap | --p-metergroup-gap | Gap of root | | metergroup.meters.background | --p-metergroup-meters-background | Background of meters | | metergroup.meters.size | --p-metergroup-meters-size | Size of meters | | metergroup.label.gap | --p-metergroup-label-gap | Gap of label | | metergroup.label.marker.size | --p-metergroup-label-marker-size | Size of label marker | | metergroup.label.text.font.weight | --p-metergroup-label-text-font-weight | Font weight of label text | | metergroup.label.text.font.size | --p-metergroup-label-text-font-size | Font size of label text | | metergroup.label.icon.size | --p-metergroup-label-icon-size | Size of label icon | | metergroup.label.list.vertical.gap | --p-metergroup-label-list-vertical-gap | Vertical gap of label list | | metergroup.label.list.horizontal.gap | --p-metergroup-label-list-horizontal-gap | Horizontal gap of label list | --- # Angular MultiSelect Component MultiSelect is used to select multiple items from a collection. ## Accessibility Screen Reader Value to describe the component can either be provided with ariaLabelledBy or ariaLabel props. The multiselect component has a combobox role in addition to aria-haspopup and aria-expanded attributes. The relation between the combobox and the popup is created with aria-controls attribute that refers to the id of the popup listbox. The popup listbox uses listbox as the role with aria-multiselectable enabled. Each list item has an option role along with aria-label , aria-selected and aria-disabled attributes. Checkbox component at the header uses a hidden native checkbox element internally that is only visible to screen readers. Value to read is defined with the selectAll and unselectAll keys of the aria property from the locale API. If filtering is enabled, filterInputProps can be defined to give aria-* props to the input element. Close button uses close key of the aria property from the locale API as the aria-label by default, this can be overriden with the closeButtonProps . ## Basic MultiSelect is used as a controlled component with ngModel property along with an options collection. Label and value of an option are defined with the optionLabel and optionValue properties respectively. Default property name for the optionLabel is label and value for the optionValue . If optionValue is omitted and the object has no value property, the object itself becomes the value of an option. Note that, when options are simple primitive values such as a string array, no optionLabel and optionValue would be necessary. **Example:** ```typescript import { Component, OnInit } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { MultiSelectModule } from 'primeng/multiselect'; interface City { name: string; code: string; } @Component({ template: `
`, standalone: true, imports: [MultiSelectModule, FormsModule] }) export class MultiSelectBasicDemo implements OnInit { cities!: City[]; selectedCities!: any[]; ngOnInit() { this.cities = [ { name: 'New York', code: 'NY' }, { name: 'Rome', code: 'RM' }, { name: 'London', code: 'LDN' }, { name: 'Istanbul', code: 'IST' }, { name: 'Paris', code: 'PRS' } ]; } } ``` ## Chips Selected values are displayed as a comma separated list by default, setting display as chip displays them as chips. **Example:** ```typescript import { Component, OnInit } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { MultiSelectModule } from 'primeng/multiselect'; interface City { name: string; code: string; } @Component({ template: `
`, standalone: true, imports: [MultiSelectModule, FormsModule] }) export class MultiSelectChipsDemo implements OnInit { cities!: City[]; selectedCities!: City[]; ngOnInit() { this.cities = [ { name: 'New York', code: 'NY' }, { name: 'Rome', code: 'RM' }, { name: 'London', code: 'LDN' }, { name: 'Istanbul', code: 'IST' }, { name: 'Paris', code: 'PRS' } ]; } } ``` ## Clear Icon When showClear is enabled, a clear icon is displayed to clear the value. **Example:** ```typescript import { Component, OnInit } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { MultiSelectModule } from 'primeng/multiselect'; interface City { name: string; code: string; } @Component({ template: `
`, standalone: true, imports: [MultiSelectModule, FormsModule] }) export class MultiSelectClearIconDemo implements OnInit { cities!: City[]; selectedCities!: any[]; ngOnInit() { this.cities = [ { name: 'New York', code: 'NY' }, { name: 'Rome', code: 'RM' }, { name: 'London', code: 'LDN' }, { name: 'Istanbul', code: 'IST' }, { name: 'Paris', code: 'PRS' } ]; } } ``` ## Disabled When disabled is present, the element cannot be edited and focused. **Example:** ```typescript import { Component, OnInit } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { MultiSelectModule } from 'primeng/multiselect'; interface City { name: string; code: string; } @Component({ template: `
`, standalone: true, imports: [MultiSelectModule, FormsModule] }) export class MultiSelectDisabledDemo implements OnInit { cities!: City[]; selectedCities!: City[]; ngOnInit() { this.cities = [ { name: 'New York', code: 'NY' }, { name: 'Rome', code: 'RM' }, { name: 'London', code: 'LDN' }, { name: 'Istanbul', code: 'IST' }, { name: 'Paris', code: 'PRS' } ]; } } ``` ## Filled Specify the variant property as filled to display the component with a higher visual emphasis than the default outlined style. **Example:** ```typescript import { Component, OnInit } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { MultiSelectModule } from 'primeng/multiselect'; interface City { name: string; code: string; } @Component({ template: `
`, standalone: true, imports: [MultiSelectModule, FormsModule] }) export class MultiSelectFilledDemo implements OnInit { cities!: City[]; selectedCities!: any[]; ngOnInit() { this.cities = [ { name: 'New York', code: 'NY' }, { name: 'Rome', code: 'RM' }, { name: 'London', code: 'LDN' }, { name: 'Istanbul', code: 'IST' }, { name: 'Paris', code: 'PRS' } ]; } } ``` ## Filter MultiSelect provides built-in filtering that is enabled by adding the filter property. **Example:** ```typescript import { Component, OnInit } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { MultiSelectModule } from 'primeng/multiselect'; interface City { name: string; code: string; } @Component({ template: `
`, standalone: true, imports: [MultiSelectModule, FormsModule] }) export class MultiSelectFilterDemo implements OnInit { cities!: City[]; selectedCities!: City[]; ngOnInit() { this.cities = [ { name: 'New York', code: 'NY' }, { name: 'Rome', code: 'RM' }, { name: 'London', code: 'LDN' }, { name: 'Istanbul', code: 'IST' }, { name: 'Paris', code: 'PRS' } ]; } } ``` ## Float Label A floating label appears on top of the input field when focused. Visit FloatLabel documentation for more information. **Example:** ```typescript import { Component, OnInit } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { FloatLabelModule } from 'primeng/floatlabel'; import { MultiSelectModule } from 'primeng/multiselect'; interface City { name: string; code: string; } @Component({ template: `
`, standalone: true, imports: [FloatLabelModule, MultiSelectModule, FormsModule] }) export class MultiSelectFloatLabelDemo implements OnInit { cities!: City[]; value1!: City[]; value2!: City[]; value3!: City[]; ngOnInit() { this.cities = [ { name: 'New York', code: 'NY' }, { name: 'Rome', code: 'RM' }, { name: 'London', code: 'LDN' }, { name: 'Istanbul', code: 'IST' }, { name: 'Paris', code: 'PRS' } ]; } } ``` ## Fluid The fluid prop makes the component take up the full width of its container when set to true. **Example:** ```typescript import { Component, OnInit } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { MultiSelectModule } from 'primeng/multiselect'; interface City { name: string; code: string; } @Component({ template: `
`, standalone: true, imports: [MultiSelectModule, FormsModule] }) export class MultiSelectFluidDemo implements OnInit { cities!: City[]; selectedCities!: any[]; ngOnInit() { this.cities = [ { name: 'New York', code: 'NY' }, { name: 'Rome', code: 'RM' }, { name: 'London', code: 'LDN' }, { name: 'Istanbul', code: 'IST' }, { name: 'Paris', code: 'PRS' } ]; } } ``` ## Group Options can be grouped when a nested data structures is provided. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { MultiSelectModule } from 'primeng/multiselect'; import { SelectItemGroup } from 'primeng/api'; interface City { name: string; code: string; } @Component({ template: `
{{ group.label }}
`, standalone: true, imports: [MultiSelectModule, FormsModule] }) export class MultiSelectGroupDemo { groupedCities!: SelectItemGroup[]; selectedCities!: City[]; constructor() { this.groupedCities = [ { label: 'Germany', value: 'de', items: [ { label: 'Berlin', value: 'Berlin' }, { label: 'Frankfurt', value: 'Frankfurt' }, { label: 'Hamburg', value: 'Hamburg' }, { label: 'Munich', value: 'Munich' } ] }, { label: 'USA', value: 'us', items: [ { label: 'Chicago', value: 'Chicago' }, { label: 'Los Angeles', value: 'Los Angeles' }, { label: 'New York', value: 'New York' }, { label: 'San Francisco', value: 'San Francisco' } ] }, { label: 'Japan', value: 'jp', items: [ { label: 'Kyoto', value: 'Kyoto' }, { label: 'Osaka', value: 'Osaka' }, { label: 'Tokyo', value: 'Tokyo' }, { label: 'Yokohama', value: 'Yokohama' } ] } ]; } } ``` ## Ifta Label IftaLabel is used to create infield top aligned labels. Visit IftaLabel documentation for more information. **Example:** ```typescript import { Component, OnInit } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { IftaLabelModule } from 'primeng/iftalabel'; import { MultiSelectModule } from 'primeng/multiselect'; interface City { name: string; code: string; } @Component({ template: `
`, standalone: true, imports: [IftaLabelModule, MultiSelectModule, FormsModule] }) export class MultiSelectIftaLabelDemo implements OnInit { cities!: City[]; selectedCities!: City[]; ngOnInit() { this.cities = [ { name: 'New York', code: 'NY' }, { name: 'Rome', code: 'RM' }, { name: 'London', code: 'LDN' }, { name: 'Istanbul', code: 'IST' }, { name: 'Paris', code: 'PRS' } ]; } } ``` ## Invalid The invalid state is applied using the ⁠invalid property to indicate failed validation, which can be integrated with Angular Forms. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { MultiSelectModule } from 'primeng/multiselect'; interface City { name: string; code: string; } @Component({ template: `
`, standalone: true, imports: [MultiSelectModule, FormsModule] }) export class MultiSelectInvalidDemo { value1: boolean = true; value2: boolean = true; cities: City[] = [ { name: 'New York', code: 'NY' }, { name: 'Rome', code: 'RM' }, { name: 'London', code: 'LDN' }, { name: 'Istanbul', code: 'IST' }, { name: 'Paris', code: 'PRS' } ]; selectedCities1!: City[]; selectedCities2!: City[]; } ``` ## Loading State Loading state can be used loading property. **Example:** ```typescript import { Component, OnInit } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { MultiSelectModule } from 'primeng/multiselect'; interface City { name: string; code: string; } @Component({ template: `
`, standalone: true, imports: [MultiSelectModule, FormsModule] }) export class MultiSelectLoadingStateDemo implements OnInit { cities!: City[]; selectedCities!: any[]; ngOnInit() { this.cities = [ { name: 'New York', code: 'NY' }, { name: 'Rome', code: 'RM' }, { name: 'London', code: 'LDN' }, { name: 'Istanbul', code: 'IST' }, { name: 'Paris', code: 'PRS' } ]; } } ``` ## reactiveforms-doc MultiSelect can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control. **Example:** ```typescript import { Component, inject } from '@angular/core'; import { ReactiveFormsModule } from '@angular/forms'; import { MessageModule } from 'primeng/message'; import { MultiSelectModule } from 'primeng/multiselect'; import { ButtonModule } from 'primeng/button'; import { MessageService } from 'primeng/api'; interface City { name: string; code: string; } @Component({ template: `
@if (isInvalid('city')) { City is required. }
`, standalone: true, imports: [MessageModule, MultiSelectModule, ButtonModule, ReactiveFormsModule], providers: [MessageService] }) export class MultiSelectReactiveFormsDemo { private messageService = inject(MessageService); messageService = inject(MessageService); cities: City[] = [ { name: 'New York', code: 'NY' }, { name: 'Rome', code: 'RM' }, { name: 'London', code: 'LDN' }, { name: 'Istanbul', code: 'IST' }, { name: 'Paris', code: 'PRS' } ]; exampleForm: FormGroup | undefined; formSubmitted: boolean = false; constructor() { this.exampleForm = this.fb.group({ city: ['', Validators.required] }); } onSubmit() { this.formSubmitted = true; if (this.exampleForm.valid) { this.messageService.add({ severity: 'success', summary: 'Success', detail: 'Form Submitted', life: 3000 }); this.exampleForm.reset(); this.formSubmitted = false; } } isInvalid(controlName: string) { const control = this.exampleForm.get(controlName); return control?.invalid && (control.touched || this.formSubmitted); } } ``` ## Sizes MultiSelect provides small and large sizes as alternatives to the base. **Example:** ```typescript import { Component, OnInit } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { MultiSelectModule } from 'primeng/multiselect'; interface City { name: string; code: string; } @Component({ template: `
`, standalone: true, imports: [MultiSelectModule, FormsModule] }) export class MultiSelectSizesDemo implements OnInit { cities!: City[]; value1: any[]; value2: any[]; value3: any[]; ngOnInit() { this.cities = [ { name: 'New York', code: 'NY' }, { name: 'Rome', code: 'RM' }, { name: 'London', code: 'LDN' }, { name: 'Istanbul', code: 'IST' }, { name: 'Paris', code: 'PRS' } ]; } } ``` ## Template Available options and the selected options support customization with item and selecteditems templates respectively. In addition, header, footer and filter sections can be templated as well. **Example:** ```typescript import { Component, OnInit } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { ButtonModule } from 'primeng/button'; import { MultiSelectModule } from 'primeng/multiselect'; import { Country } from '@/domain/customer'; interface Country { name: string; code: string; } @Component({ template: `
{{ country.name }}
Available Countries
`, standalone: true, imports: [ButtonModule, MultiSelectModule, FormsModule] }) export class MultiSelectTemplateDemo implements OnInit { countries!: Country[]; selectedCountries!: Country[]; ngOnInit() { this.countries = [ { name: 'Australia', code: 'AU' }, { name: 'Brazil', code: 'BR' }, { name: 'China', code: 'CN' }, { name: 'Egypt', code: 'EG' }, { name: 'France', code: 'FR' }, { name: 'Germany', code: 'DE' }, { name: 'India', code: 'IN' }, { name: 'Japan', code: 'JP' }, { name: 'Spain', code: 'ES' }, { name: 'United States', code: 'US' } ]; } } ``` ## templatedrivenforms-doc **Example:** ```typescript import { Component, inject } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { MessageModule } from 'primeng/message'; import { MultiSelectModule } from 'primeng/multiselect'; import { ButtonModule } from 'primeng/button'; import { MessageService } from 'primeng/api'; interface City { name: string; code: string; } @Component({ template: `
@if (city.invalid && (city.touched || exampleForm.submitted)) { City is required. }
`, standalone: true, imports: [MessageModule, MultiSelectModule, ButtonModule, FormsModule], providers: [MessageService] }) export class MultiSelectTemplateDrivenFormsDemo { private messageService = inject(MessageService); messageService = inject(MessageService); cities: City[] = [ { name: 'New York', code: 'NY' }, { name: 'Rome', code: 'RM' }, { name: 'London', code: 'LDN' }, { name: 'Istanbul', code: 'IST' }, { name: 'Paris', code: 'PRS' } ]; selectedCity: City | undefined; onSubmit(form: any) { if (form.valid) { this.messageService.add({ severity: 'success', summary: 'Success', detail: 'Form Submitted', life: 3000 }); form.resetForm(); } } } ``` ## VirtualScroll VirtualScrolling is an efficient way of rendering the options by displaying a small subset of data in the viewport at any time. When dealing with huge number of options, it is suggested to enable VirtualScrolling to avoid performance issues. Usage is simple as setting virtualScroll property to true and defining virtualScrollItemSize to specify the height of an item. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { MultiSelectModule } from 'primeng/multiselect'; @Component({ template: `
@if (allSelected) { } @if (partialSelected) { }
`, standalone: true, imports: [MultiSelectModule, FormsModule] }) export class MultiSelectVirtualScrollDemo { items: any = Array.from({ length: 100000 }, (_, i) => ({ label: `Item #${i}`, value: i })); selectedItems!: any[]; selectAll: boolean = false; onSelectAllChange(event) { this.selectedItems = event.checked ? [...this.ms.visibleOptions()] : []; this.selectAll = event.checked; } } ``` ## Multi Select MultiSelect is used to select multiple items from a collection. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | | required | boolean | false | There must be a value (if set). | | invalid | boolean | false | When present, it specifies that the component should have invalid state style. | | disabled | boolean | false | When present, it specifies that the component should have disabled state style. | | name | string | undefined | When present, it specifies that the name of the input. | | id | string | - | Unique identifier of the component | | ariaLabel | string | - | Defines a string that labels the input for accessibility. | | panelStyle | Partial | - | Inline style of the overlay panel. | | panelStyleClass | string | - | Style class of the overlay panel element. | | inputId | string | - | Identifier of the focus input to match a label defined for the component. | | readonly | boolean | - | When present, it specifies that the component cannot be edited. | | group | boolean | - | Whether to display options as grouped when nested options are provided. | | filter | boolean | - | When specified, displays an input field to filter the items on keyup. | | filterPlaceHolder | string | - | Defines placeholder of the filter input. | | filterLocale | string | - | Locale to use in filtering. The default locale is the host environment's current locale. | | overlayVisible | boolean | - | Specifies the visibility of the options panel. | | tabindex | number | - | Index of the element in tabbing order. | | dataKey | string | - | A property to uniquely identify a value in options. | | ariaLabelledBy | string | - | Establishes relationships between the component and label(s) where its value should be one or more element IDs. | | displaySelectedLabel | boolean | true | Whether to show labels of selected item labels or use default label. | | maxSelectedLabels | number | 3 | Decides how many selected item labels to show at most. | | selectionLimit | number | - | Maximum number of selectable items. | | selectedItemsLabel | string | - | Label to display after exceeding max selected labels e.g. ({0} items selected), defaults "ellipsis" keyword to indicate a text-overflow. | | showToggleAll | boolean | - | Whether to show the checkbox at header to toggle all items at once. | | emptyFilterMessage | string | - | Text to display when filtering does not return any results. | | emptyMessage | string | - | Text to display when there is no data. Defaults to global value in i18n translation configuration. | | resetFilterOnHide | boolean | - | Clears the filter value when hiding the dropdown. | | dropdownIcon | string | - | Icon class of the dropdown icon. | | chipIcon | string | - | Icon class of the chip icon. | | optionLabel | string | - | Name of the label field of an option. | | optionValue | string | - | Name of the value field of an option. | | optionDisabled | string | - | Name of the disabled field of an option. | | optionGroupLabel | string | - | Name of the label field of an option group. | | optionGroupChildren | string | - | Name of the options field of an option group. | | showHeader | boolean | - | Whether to show the header. | | filterBy | string | - | When filtering is enabled, filterBy decides which field or fields (comma separated) to search against. | | scrollHeight | string | - | Height of the viewport in pixels, a scrollbar is defined if height of list exceeds this value. | | lazy | boolean | - | Defines if data is loaded and interacted with in lazy manner. | | virtualScroll | boolean | - | Whether the data should be loaded on demand during scroll. | | loading | boolean | - | Whether the multiselect is in loading state. | | virtualScrollItemSize | number | - | Height of an item in the list for VirtualScrolling. | | loadingIcon | string | - | Icon to display in loading state. | | virtualScrollOptions | ScrollerOptions | - | Whether to use the scroller feature. The properties of scroller component can be used like an object in it. | | overlayOptions | OverlayOptions | - | Whether to use overlay API feature. The properties of overlay API can be used like an object in it. | | ariaFilterLabel | string | - | Defines a string that labels the filter input. | | filterMatchMode | "startsWith" \| "contains" \| "notContains" \| "endsWith" \| "equals" \| "notEquals" \| "in" \| "between" \| "lt" \| "lte" \| "gt" \| "gte" \| "is" \| "isNot" \| "before" \| "after" \| "dateIs" \| "dateIsNot" \| "dateBefore" \| "dateAfter" | - | Defines how the items are filtered. | | tooltip | string | - | Advisory information to display in a tooltip on hover. | | tooltipPosition | "right" \| "left" \| "top" \| "bottom" | - | Position of the tooltip. | | tooltipPositionStyle | string | - | Type of CSS position. | | tooltipStyleClass | string | - | Style class of the tooltip. | | autofocusFilter | boolean | - | Applies focus to the filter element when the overlay is shown. | | display | "comma" \| "chip" | - | Defines how the selected items are displayed. | | autocomplete | string | - | Defines the autocomplete is active. | | showClear | boolean | - | When enabled, a clear icon is displayed to clear the value. | | autofocus | boolean | - | When present, it specifies that the component should automatically get focus on load. | | placeholder | string | - | Label to display when there are no selections. | | options | any[] | - | An array of objects to display as the available options. | | filterValue | string | - | When specified, filter displays with this value. | | selectAll | boolean | - | Whether all data is selected. | | focusOnHover | boolean | - | Indicates whether to focus on options when hovering over them, defaults to optionLabel. | | filterFields | string[] | - | Fields used when filtering the options, defaults to optionLabel. | | selectOnFocus | boolean | - | Determines if the option will be selected on focus. | | autoOptionFocus | boolean | - | Whether to focus on the first visible or selected element when the overlay panel is shown. | | highlightOnSelect | boolean | - | Whether the selected option will be add highlight class. | | size | "small" \| "large" | undefined | Specifies the size of the component. | | variant | "filled" \| "outlined" | undefined | Specifies the input variant of the component. | | fluid | boolean | undefined | Spans 100% width of the container when enabled. | | appendTo | HTMLElement \| ElementRef \| TemplateRef \| "self" \| "body" \| null \| undefined | 'self' | Target element to attach the overlay, valid values are "body" or a local ng-template variable of another element (note: use binding with brackets for template variables, e.g. [appendTo]="mydiv" for a div element having #mydiv as variable name). | | motionOptions | MotionOptions | - | The motion options. | ### Emits | Name | Parameters | Description | |------|------------|-------------| | onChange | event: MultiSelectChangeEvent | Callback to invoke when value changes. | | onFilter | event: MultiSelectFilterEvent | Callback to invoke when data is filtered. | | onFocus | event: MultiSelectFocusEvent | Callback to invoke when multiselect receives focus. | | onBlur | event: MultiSelectBlurEvent | Callback to invoke when multiselect loses focus. | | onClick | event: Event | Callback to invoke when component is clicked. | | onClear | value: void | Callback to invoke when input field is cleared. | | onPanelShow | event: AnimationEvent | Callback to invoke when overlay panel becomes visible. | | onPanelHide | event: AnimationEvent | Callback to invoke when overlay panel becomes hidden. | | onLazyLoad | event: MultiSelectLazyLoadEvent | Callback to invoke in lazy mode to load new data. | | onRemove | event: MultiSelectRemoveEvent | Callback to invoke in lazy mode to load new data. | | onSelectAllChange | event: MultiSelectSelectAllChangeEvent | Callback to invoke when all data is selected. | ### Templates | Name | Type | Description | |------|------|-------------| | item | TemplateRef> | Custom item template. | | group | TemplateRef> | Custom group template. | | loader | TemplateRef | Custom loader template. | | header | TemplateRef | Custom header template. | | filter | TemplateRef | Custom filter template. | | footer | TemplateRef | Custom footer template. | | emptyfilter | TemplateRef | Custom empty filter template. | | empty | TemplateRef | Custom empty template. | | selecteditems | TemplateRef> | Custom selected items template. | | loadingicon | TemplateRef | Custom loading icon template. | | filtericon | TemplateRef | Custom filter icon template. | | removetokenicon | TemplateRef | Custom remove token icon template. | | chipicon | TemplateRef | Custom chip icon template. | | clearicon | TemplateRef | Custom clear icon template. | | dropdownicon | TemplateRef | Custom dropdown icon template. | | itemcheckboxicon | TemplateRef | Custom item checkbox icon template. | | headercheckboxicon | TemplateRef | Custom header checkbox icon template. | ### Methods | Name | Parameters | Return Type | Description | |------|------------|-------------|-------------| | updateModel | value: any, event: any | void | Updates the model value. | | show | isFocus: any | void | Displays the panel. | | hide | isFocus: any | void | Hides the panel. | ## Pass Through Options | Name | Type | Description | |------|------|-------------| | root | PassThroughOption | Used to pass attributes to the root's DOM element. | | labelContainer | PassThroughOption | Used to pass attributes to the label container's DOM element. | | label | PassThroughOption | Used to pass attributes to the label's DOM element. | | clearIcon | PassThroughOption | Used to pass attributes to the clear icon's DOM element. | | chipItem | PassThroughOption | Used to pass attributes to the chip item's DOM element. | | pcChip | ChipPassThrough | Used to pass attributes to the Chip component. | | dropdown | PassThroughOption | Used to pass attributes to the dropdown's DOM element. | | loadingIcon | PassThroughOption | Used to pass attributes to the loading icon's DOM element. | | dropdownIcon | PassThroughOption | Used to pass attributes to the dropdown icon's DOM element. | | overlay | PassThroughOption | Used to pass attributes to the overlay's DOM element. | | header | PassThroughOption | Used to pass attributes to the header's DOM element. | | pcHeaderCheckbox | CheckboxPassThrough | Used to pass attributes to the header checkbox component. | | pcFilterContainer | IconFieldPassThrough | Used to pass attributes to the IconField component. | | pcFilter | InputTextPassThrough | Used to pass attributes to the InputText component. | | pcFilterIconContainer | InputIconPassThrough | Used to pass attributes to the InputIcon component. | | filterIcon | PassThroughOption | Used to pass attributes to the filter icon's DOM element. | | listContainer | PassThroughOption | Used to pass attributes to the list container's DOM element. | | list | PassThroughOption | Used to pass attributes to the list's DOM element. | | optionGroup | PassThroughOption | Used to pass attributes to the option group's DOM element. | | option | PassThroughOption | Used to pass attributes to the option's DOM element. | | pcOptionCheckbox | CheckboxPassThrough | Used to pass attributes to the option checkbox component. | | emptyMessage | PassThroughOption | Used to pass attributes to the empty message's DOM element. | ## Theming ### CSS Classes | Class | Description | |-------|-------------| | p-multiselect | Class name of the root element | | p-multiselect-label-container | Class name of the label container element | | p-multiselect-label | Class name of the label element | | p-multiselect-chip-item | Class name of the chip item element | | p-multiselect-chip | Class name of the chip element | | p-multiselect-chip-icon | Class name of the chip icon element | | p-multiselect-dropdown | Class name of the dropdown element | | p-multiselect-loading-icon | Class name of the loading icon element | | p-multiselect-dropdown-icon | Class name of the dropdown icon element | | p-multiselect-overlay | Class name of the overlay element | | p-multiselect-header | Class name of the header element | | p-multiselect-filter-container | Class name of the filter container element | | p-multiselect-filter | Class name of the filter element | | p-multiselect-list-container | Class name of the list container element | | p-multiselect-list | Class name of the list element | | p-multiselect-option-group | Class name of the option group element | | p-multiselect-option | Class name of the option element | | p-multiselect-empty-message | Class name of the empty message element | | p-autocomplete-clear-icon | Class name of the clear icon | ### Design Tokens | Token | CSS Variable | Description | |-------|--------------|-------------| | multiselect.background | --p-multiselect-background | Background of root | | multiselect.disabled.background | --p-multiselect-disabled-background | Disabled background of root | | multiselect.filled.background | --p-multiselect-filled-background | Filled background of root | | multiselect.filled.hover.background | --p-multiselect-filled-hover-background | Filled hover background of root | | multiselect.filled.focus.background | --p-multiselect-filled-focus-background | Filled focus background of root | | multiselect.border.color | --p-multiselect-border-color | Border color of root | | multiselect.hover.border.color | --p-multiselect-hover-border-color | Hover border color of root | | multiselect.focus.border.color | --p-multiselect-focus-border-color | Focus border color of root | | multiselect.invalid.border.color | --p-multiselect-invalid-border-color | Invalid border color of root | | multiselect.color | --p-multiselect-color | Color of root | | multiselect.disabled.color | --p-multiselect-disabled-color | Disabled color of root | | multiselect.placeholder.color | --p-multiselect-placeholder-color | Placeholder color of root | | multiselect.invalid.placeholder.color | --p-multiselect-invalid-placeholder-color | Invalid placeholder color of root | | multiselect.shadow | --p-multiselect-shadow | Shadow of root | | multiselect.padding.x | --p-multiselect-padding-x | Padding x of root | | multiselect.padding.y | --p-multiselect-padding-y | Padding y of root | | multiselect.border.radius | --p-multiselect-border-radius | Border radius of root | | multiselect.focus.ring.width | --p-multiselect-focus-ring-width | Focus ring width of root | | multiselect.focus.ring.style | --p-multiselect-focus-ring-style | Focus ring style of root | | multiselect.focus.ring.color | --p-multiselect-focus-ring-color | Focus ring color of root | | multiselect.focus.ring.offset | --p-multiselect-focus-ring-offset | Focus ring offset of root | | multiselect.focus.ring.shadow | --p-multiselect-focus-ring-shadow | Focus ring shadow of root | | multiselect.transition.duration | --p-multiselect-transition-duration | Transition duration of root | | multiselect.sm.font.size | --p-multiselect-sm-font-size | Sm font size of root | | multiselect.sm.padding.x | --p-multiselect-sm-padding-x | Sm padding x of root | | multiselect.sm.padding.y | --p-multiselect-sm-padding-y | Sm padding y of root | | multiselect.lg.font.size | --p-multiselect-lg-font-size | Lg font size of root | | multiselect.lg.padding.x | --p-multiselect-lg-padding-x | Lg padding x of root | | multiselect.lg.padding.y | --p-multiselect-lg-padding-y | Lg padding y of root | | multiselect.font.weight | --p-multiselect-font-weight | Font weight of root | | multiselect.font.size | --p-multiselect-font-size | Font size of root | | multiselect.dropdown.width | --p-multiselect-dropdown-width | Width of dropdown | | multiselect.dropdown.color | --p-multiselect-dropdown-color | Color of dropdown | | multiselect.overlay.background | --p-multiselect-overlay-background | Background of overlay | | multiselect.overlay.border.color | --p-multiselect-overlay-border-color | Border color of overlay | | multiselect.overlay.border.radius | --p-multiselect-overlay-border-radius | Border radius of overlay | | multiselect.overlay.color | --p-multiselect-overlay-color | Color of overlay | | multiselect.overlay.shadow | --p-multiselect-overlay-shadow | Shadow of overlay | | multiselect.list.padding | --p-multiselect-list-padding | Padding of list | | multiselect.list.gap | --p-multiselect-list-gap | Gap of list | | multiselect.list.header.padding | --p-multiselect-list-header-padding | Header padding of list | | multiselect.option.focus.background | --p-multiselect-option-focus-background | Focus background of option | | multiselect.option.selected.background | --p-multiselect-option-selected-background | Selected background of option | | multiselect.option.selected.focus.background | --p-multiselect-option-selected-focus-background | Selected focus background of option | | multiselect.option.color | --p-multiselect-option-color | Color of option | | multiselect.option.focus.color | --p-multiselect-option-focus-color | Focus color of option | | multiselect.option.selected.color | --p-multiselect-option-selected-color | Selected color of option | | multiselect.option.selected.focus.color | --p-multiselect-option-selected-focus-color | Selected focus color of option | | multiselect.option.selected.font.weight | --p-multiselect-option-selected-font-weight | Font weight of a selected option | | multiselect.option.padding | --p-multiselect-option-padding | Padding of option | | multiselect.option.border.radius | --p-multiselect-option-border-radius | Border radius of option | | multiselect.option.gap | --p-multiselect-option-gap | Gap of option | | multiselect.option.font.weight | --p-multiselect-option-font-weight | Font weight of option | | multiselect.option.font.size | --p-multiselect-option-font-size | Font size of option | | multiselect.option.group.background | --p-multiselect-option-group-background | Background of option group | | multiselect.option.group.color | --p-multiselect-option-group-color | Color of option group | | multiselect.option.group.font.weight | --p-multiselect-option-group-font-weight | Font weight of option group | | multiselect.option.group.font.size | --p-multiselect-option-group-font-size | Font size of option group | | multiselect.option.group.padding | --p-multiselect-option-group-padding | Padding of option group | | multiselect.clear.icon.color | --p-multiselect-clear-icon-color | Color of clear icon | | multiselect.chip.border.radius | --p-multiselect-chip-border-radius | Border radius of chip | | multiselect.empty.message.padding | --p-multiselect-empty-message-padding | Padding of empty message | --- # Angular OrderList Component OrderList is used to sort a collection. ## Accessibility Screen Reader Value to describe the source listbox and target listbox can be provided with sourceListProps and targetListProps by passing aria-labelledby or aria-label props. The list elements has a listbox role with the aria-multiselectable attribute. Each list item has an option role with aria-selected and aria-disabled as their attributes. Controls buttons are button elements with an aria-label that refers to the aria.moveTop , aria.moveUp , aria.moveDown , aria.moveBottom , aria.moveTo , aria.moveAllTo , aria.moveFrom and aria.moveAllFrom properties of the locale API by default, alternatively you may use moveTopButtonProps , moveUpButtonProps , moveDownButtonProps , moveToButtonProps , moveAllToButtonProps , moveFromButtonProps , moveFromButtonProps and moveAllFromButtonProps to customize the buttons like overriding the default aria-label attributes. OrderList Keyboard Support Key Function tab Moves focus to the first selected option, if there is none then first option receives the focus. up arrow Moves focus to the previous option. down arrow Moves focus to the next option. enter Toggles the selected state of the focused option. space Toggles the selected state of the focused option. home Moves focus to the first option. end Moves focus to the last option. shift + down arrow Moves focus to the next option and toggles the selection state. shift + up arrow Moves focus to the previous option and toggles the selection state. shift + space Selects the items between the most recently selected option and the focused option. control + shift + home Selects the focused options and all the options up to the first one. control + shift + end Selects the focused options and all the options down to the first one. control + a Selects all options. Buttons Keyboard Support Key Function enter Executes button action. space Executes button action. ## Basic OrderList is used as a controlled input with value property. Content of a list item needs to be defined with the item template that receives an object in the list as parameter. **Example:** ```typescript import { Component, OnInit, inject, signal } from '@angular/core'; import { OrderListModule } from 'primeng/orderlist'; import { ProductService } from '@/service/productservice'; import { Product } from '@/domain/product'; @Component({ template: `
{{ option.name }}
`, standalone: true, imports: [OrderListModule], providers: [ProductService] }) export class OrderListBasicDemo implements OnInit { private productService = inject(ProductService); products = signal([]); ngOnInit() { this.productService.getProductsSmall().then((cars) => { this.products.set(cars); }); } getSeverity(status: string) { switch (status) { case 'INSTOCK': return 'success'; case 'LOWSTOCK': return 'warning'; case 'OUTOFSTOCK': return 'danger'; } } } ``` ## dragdrop-doc Items can be reordered using drag and drop by enabling dragdrop property. Depends on @angular/cdk package. **Example:** ```typescript import { Component, OnInit, inject, signal } from '@angular/core'; import { OrderListModule } from 'primeng/orderlist'; import { ProductService } from '@/service/productservice'; import { Product } from '@/domain/product'; @Component({ template: `
{{ option.name }} {{ option.category }}
{{ '$' + option.price }}
`, standalone: true, imports: [OrderListModule], providers: [ProductService] }) export class OrderListDragDropDemo implements OnInit { private productService = inject(ProductService); products = signal([]); ngOnInit() { this.productService.getProductsSmall().then((cars) => { this.products.set(cars); }); } getSeverity(status: string) { switch (status) { case 'INSTOCK': return 'success'; case 'LOWSTOCK': return 'warning'; case 'OUTOFSTOCK': return 'danger'; } } } ``` ## Filter Filter value is checked against the property of an object configured with the filterBy property **Example:** ```typescript import { Component, OnInit, inject, signal } from '@angular/core'; import { OrderListModule } from 'primeng/orderlist'; import { ProductService } from '@/service/productservice'; import { Product } from '@/domain/product'; @Component({ template: `
{{ option.name }} {{ option.category }}
{{ '$' + option.price }}
`, standalone: true, imports: [OrderListModule], providers: [ProductService] }) export class OrderListFilterDemo implements OnInit { private productService = inject(ProductService); products = signal([]); ngOnInit() { this.productService.getProductsSmall().then((cars) => { this.products.set(cars); }); } getSeverity(status: string) { switch (status) { case 'INSTOCK': return 'success'; case 'LOWSTOCK': return 'warning'; case 'OUTOFSTOCK': return 'danger'; } } } ``` ## Template For custom content support define an item template that gets the item instance as a parameter. In addition header template is provided for further customization. **Example:** ```typescript import { Component, OnInit, inject, signal } from '@angular/core'; import { OrderListModule } from 'primeng/orderlist'; import { ProductService } from '@/service/productservice'; import { Product } from '@/domain/product'; @Component({ template: `
{{ option.name }} {{ option.category }}
{{ '$' + option.price }}
`, standalone: true, imports: [OrderListModule], providers: [ProductService] }) export class OrderListTemplateDemo implements OnInit { private productService = inject(ProductService); products = signal([]); ngOnInit() { this.productService.getProductsSmall().then((cars) => { this.products.set(cars); }); } getSeverity(status: string) { switch (status) { case 'INSTOCK': return 'success'; case 'LOWSTOCK': return 'warning'; case 'OUTOFSTOCK': return 'danger'; } } } ``` ## Order List OrderList is used to manage the order of a collection. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | | header | string | - | Text for the caption. | | tabindex | number | - | Index of the element in tabbing order. | | ariaLabel | string | - | Defines a string that labels the input for accessibility. | | ariaLabelledBy | string | - | Specifies one or more IDs in the DOM that labels the input field. | | listStyle | Partial | - | Inline style of the list element. | | responsive | boolean | - | A boolean value that indicates whether the component should be responsive. | | filterBy | string | - | When specified displays an input field to filter the items on keyup and decides which fields to search against. | | filterPlaceholder | string | - | Placeholder of the filter input. | | filterLocale | string | - | Locale to use in filtering. The default locale is the host environment's current locale. | | metaKeySelection | boolean | - | When true metaKey needs to be pressed to select or unselect an item and when set to false selection of each item can be toggled individually. On touch enabled devices, metaKeySelection is turned off automatically. | | dragdrop | boolean | - | Whether to enable dragdrop based reordering. | | controlsPosition | "left" \| "right" | - | Defines the location of the buttons with respect to the list. | | ariaFilterLabel | string | - | Defines a string that labels the filter input. | | filterMatchMode | "startsWith" \| "contains" \| "notContains" \| "endsWith" \| "equals" \| "notEquals" \| "in" \| "between" \| "lt" \| "lte" \| "gt" \| "gte" \| "is" \| "isNot" \| "before" \| "after" \| "dateIs" \| "dateIsNot" \| "dateBefore" \| "dateAfter" | - | Defines how the items are filtered. | | breakpoint | string | - | Indicates the width of the screen at which the component should change its behavior. | | stripedRows | boolean | - | Whether to displays rows with alternating colors. | | disabled | boolean | - | When present, it specifies that the component should be disabled. | | trackBy | Function | - | Function to optimize the dom operations by delegating to ngForTrackBy, default algorithm checks for object identity. | | scrollHeight | string | - | Height of the viewport, a scrollbar is defined if height of list exceeds this value. | | autoOptionFocus | boolean | - | Whether to focus on the first visible or selected element. | | dataKey | string | - | Name of the field that uniquely identifies the record in the data. | | selection | any[] | - | A list of values that are currently selected. | | value | any[] | - | Array of values to be displayed in the component. It represents the data source for the list of items. | | buttonProps | ButtonProps | - | Used to pass all properties of the ButtonProps to the Button component. | | moveUpButtonProps | ButtonProps | - | Used to pass all properties of the ButtonProps to the move up button inside the component. | | moveTopButtonProps | ButtonProps | - | Used to pass all properties of the ButtonProps to the move top button inside the component. | | moveDownButtonProps | ButtonProps | - | Used to pass all properties of the ButtonProps to the move down button inside the component. | | moveBottomButtonProps | ButtonProps | - | Used to pass all properties of the ButtonProps to the move bottom button inside the component. | ### Emits | Name | Parameters | Description | |------|------------|-------------| | onReorder | value: any | Callback to invoke when list is reordered. | | onSelectionChange | event: OrderListSelectionChangeEvent | Callback to invoke when selection changes. | | onFilterEvent | event: OrderListFilterEvent | Callback to invoke when filtering occurs. | | onFocus | event: Event | Callback to invoke when the list is focused | | onBlur | event: Event | Callback to invoke when the list is blurred | ### Templates | Name | Type | Description | |------|------|-------------| | item | TemplateRef | Custom item template. | | emptymessage | TemplateRef | Custom empty template. | | emptyfiltermessage | TemplateRef | Custom empty filter template. | | filter | TemplateRef | Custom filter template. | | header | TemplateRef | Custom header template. | | moveupicon | TemplateRef | Custom move up icon template. | | movetopicon | TemplateRef | Custom move top icon template. | | movedownicon | TemplateRef | Custom move down icon template. | | movebottomicon | TemplateRef | Custom move bottom icon template. | | filtericon | TemplateRef | Custom filter icon template. | ### Methods | Name | Parameters | Return Type | Description | |------|------------|-------------|-------------| | resetFilter | | void | Callback to invoke on filter reset. | ## Pass Through Options | Name | Type | Description | |------|------|-------------| | host | PassThroughOption | Used to pass attributes to the host's DOM element. | | root | PassThroughOption | Used to pass attributes to the root's DOM element. | | controls | PassThroughOption | Used to pass attributes to the controls container's DOM element. | | pcMoveUpButton | ButtonPassThrough | Used to pass attributes to the move up button's DOM element. | | pcMoveTopButton | ButtonPassThrough | Used to pass attributes to the move top button's DOM element. | | pcMoveDownButton | ButtonPassThrough | Used to pass attributes to the move down button's DOM element. | | pcMoveBottomButton | ButtonPassThrough | Used to pass attributes to the move bottom button's DOM element. | | pcListbox | ListBoxPassThrough | Used to pass attributes to the Listbox component. | ## Theming ### CSS Classes | Class | Description | |-------|-------------| | p-orderlist | Class name of the root element | | p-orderlist-controls | Class name of the controls element | ### Design Tokens | Token | CSS Variable | Description | |-------|--------------|-------------| | orderlist.gap | --p-orderlist-gap | Gap of root | | orderlist.controls.gap | --p-orderlist-controls-gap | Gap of controls | --- # Angular Organization Chart Component OrganizationChart visualizes hierarchical organization data. ## Accessibility Screen Reader Component uses ARIA roles and attributes for screen reader accessibility. The root element has role="tree" with aria-multiselectable for multiple selection support. Each tree item uses role="treeitem" with aria-level for hierarchy, aria-expanded for collapse state, and aria-selected for selection state. Child nodes are grouped with role="group" . Keyboard Support Node Key Function tab Moves focus through the focusable nodes within the chart. enter Toggles the selection state of a node. space Toggles the selection state of a node. Collapse Button Key Function tab Moves focus through the focusable elements within the chart. enter Toggles the expanded state of a node. space Toggles the expanded state of a node. ## Basic OrganizationChart requires a collection of TreeNode instances as a value . **Example:** ```typescript import { Component } from '@angular/core'; import { TreeNode } from 'primeng/api'; import { Product } from '@/domain/product'; @Component({ template: `
`, standalone: true, imports: [] }) export class OrganizationChartBasicDemo { data: TreeNode[] = [ { label: 'Founder', expanded: true, children: [ { label: 'Product Lead', expanded: true, children: [ { label: 'UX/UI Designer' }, { label: 'Product Manager' } ] }, { label: 'Engineering Lead', expanded: true, children: [ { label: 'Frontend Developer' }, { label: 'Backend Developer' } ] } ] } ]; } ``` ## Collapsible Nodes can be expanded and collapsed when collapsible is enabled. **Example:** ```typescript import { Component } from '@angular/core'; import { TreeNode } from 'primeng/api'; import { Product } from '@/domain/product'; @Component({ template: `
`, standalone: true, imports: [] }) export class OrganizationChartCollapsibleDemo { data: TreeNode[] = [ { label: 'Founder', expanded: true, children: [ { label: 'Product Lead', expanded: true, children: [ { label: 'UX/UI Designer' }, { label: 'Product Manager' } ] }, { label: 'Engineering Lead', expanded: true, children: [ { label: 'Frontend Developer' }, { label: 'Backend Developer' } ] } ] } ]; } ``` ## Colored Styling a specific node is configured with styleClass option of a TreeNode and custom templates. **Example:** ```typescript import { Component } from '@angular/core'; import { TreeNode } from 'primeng/api'; @Component({ template: `
@if (node.type === 'person') {
{{ node.data.name }} {{ node.data.title }}
} @else {
{{ node.label }}
}
`, standalone: true, imports: [] }) export class OrganizationChartColoredDemo { data: TreeNode[] = [ { expanded: true, type: 'person', styleClass: 'bg-rose-500/5! border-rose-500! text-rose-900! dark:text-rose-50! rounded-xl', data: { image: 'https://primefaces.org/cdn/primeng/images/demo/avatar/amyelsner.png', name: 'Amy Elsner', title: 'CEO' }, children: [ { expanded: true, type: 'person', styleClass: 'bg-emerald-500/5! border-emerald-500! text-emerald-900! dark:text-emerald-50! rounded-xl', data: { image: 'https://primefaces.org/cdn/primeng/images/demo/avatar/annafali.png', name: 'Anna Fali', title: 'CMO' }, children: [ { label: 'Sales' }, { label: 'Marketing' } ] }, { expanded: true, type: 'person', styleClass: 'bg-blue-500/5! border-blue-500! text-blue-900! dark:text-blue-50! rounded-xl', data: { image: 'https://primefaces.org/cdn/primeng/images/demo/avatar/stephenshaw.png', name: 'Stephen Shaw', title: 'CTO' }, children: [ { label: 'Development' }, { label: 'UI/UX Design' } ] } ] } ]; } ``` ## Default Collapsed & Selected Nodes can define collapsedByDefault and selectedByDefault properties to configure the initial state. **Example:** ```typescript import { Component } from '@angular/core'; import { Product } from '@/domain/product'; @Component({ template: `
`, standalone: true, imports: [] }) export class OrganizationChartDefaultDemo { data: OrgChartNode[] = [ { label: 'Founder', expanded: true, children: [ { label: 'Product Lead', collapsedByDefault: true, expanded: true, children: [ { label: 'UX/UI Designer' }, { label: 'Product Manager' } ] }, { label: 'Engineering Lead', expanded: true, children: [ { label: 'Frontend Developer', selectedByDefault: true }, { label: 'Backend Developer' } ] } ] } ]; } ``` ## Partial Collapsible & Selectable Collapsible and selectable behaviors can be controlled at the node level using the collapsible and selectable properties of a TreeNode. **Example:** ```typescript import { Component } from '@angular/core'; import { TreeNode } from 'primeng/api'; import { Product } from '@/domain/product'; @Component({ template: `
`, standalone: true, imports: [] }) export class OrganizationChartPartialDemo { selectedNode: any; data: OrgChartNode[] = [ { label: 'Founder', expanded: true, collapsible: true, selectable: false, children: [ { label: 'Product Lead', expanded: true, children: [ { label: 'UX/UI Designer', selectable: false }, { label: 'Product Manager' } ] }, { label: 'Engineering Lead', expanded: true, selectable: false, collapsible: true, children: [ { label: 'Frontend Developer' }, { label: 'Backend Developer' } ] } ] } ]; } ``` ## selection-doc Nodes can be selected by defining selectionMode along with a value binding with selection properties. By default only one node can be selected, set selectionMode as multiple to select more than one. **Example:** ```typescript import { Component } from '@angular/core'; import { TreeNode } from 'primeng/api'; import { Product } from '@/domain/product'; @Component({ template: `
`, standalone: true, imports: [] }) export class OrganizationChartSelectionDemo { selectedNodes!: TreeNode[]; data: TreeNode[] = [ { label: 'Founder', expanded: true, children: [ { label: 'Product Lead', expanded: true, children: [ { label: 'UX/UI Designer' }, { label: 'Product Manager' } ] }, { label: 'Engineering Lead', expanded: true, children: [ { label: 'Frontend Developer' }, { label: 'Backend Developer' } ] } ] } ]; } ``` ## Template Custom content instead of a node label is defined using the #node template reference. **Example:** ```typescript import { Component } from '@angular/core'; import { TreeNode } from 'primeng/api'; @Component({ template: `
{{ node.label }}
{{ node.data.description }}
`, standalone: true, imports: [] }) export class OrganizationChartTemplateDemo { data: TreeNode[] = [ { label: 'USD', expanded: true, data: { flag: 'us', description: 'United States Dollar' }, children: [ { label: 'CAD', expanded: true, data: { flag: 'ca', description: 'Canadian Dollar' }, children: [ { label: 'AUD', data: { flag: 'au', description: 'Australian Dollar' } }, { label: 'NZD', data: { flag: 'nz', description: 'New Zealand Dollar' } } ] }, { label: 'MXN', expanded: true, data: { flag: 'mx', description: 'Mexican Peso' }, children: [ { label: 'COP', data: { flag: 'ar', description: 'Argentine Peso' } }, { label: 'BRL', data: { flag: 'br', description: 'Brazilian Real' } } ] } ] } ]; } ``` ## Organization Chart OrganizationChart visualizes hierarchical organization data. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | | value | OrgChartNode[] | - | An array of nested TreeNodes. | | selectionMode | "single" \| "multiple" | - | Defines the selection mode. | | collapsible | boolean | - | Whether the nodes can be expanded or toggled. | | gap | number \| [number, number] | - | Defines the gap between nodes. Can be a single number or a tuple [gapX, gapY]. | | selection | any | - | A single treenode instance or an array to refer to the selections. | ### Emits | Name | Parameters | Description | |------|------------|-------------| | onNodeSelect | event: OrganizationChartNodeSelectEvent | Callback to invoke when a node is selected. | | onNodeUnselect | event: OrganizationChartNodeUnSelectEvent | Callback to invoke when a node is unselected. | | onNodeExpand | event: OrganizationChartNodeExpandEvent | Callback to invoke when a node is expanded. | | onNodeCollapse | event: OrganizationChartNodeCollapseEvent | Callback to invoke when a node is collapsed. | ### Templates | Name | Type | Description | |------|------|-------------| | togglericon | TemplateRef | Custom toggler icon template. | | collapsebutton | TemplateRef | Custom collapse button template. | | node | TemplateRef | Custom node template. | ## Pass Through Options | Name | Type | Description | |------|------|-------------| | root | PassThroughOption | Used to pass attributes to the root's DOM element. | | subtree | PassThroughOption | Used to pass attributes to the subtree's DOM element. | | tree | PassThroughOption | Used to pass attributes to the tree's DOM element. | | node | PassThroughOption | Used to pass attributes to the node's DOM element. | | nodeContent | PassThroughOption | Used to pass attributes to the node content's DOM element. | | collapseButton | PassThroughOption | Used to pass attributes to the collapse button's DOM element. | | collapseButtonDownIcon | PassThroughOption | Used to pass attributes to the collapse button down icon's DOM element. | | collapseButtonUpIcon | PassThroughOption | Used to pass attributes to the collapse button up icon's DOM element. | ## Theming ### CSS Classes | Class | Description | |-------|-------------| | p-organizationchart | Class name of the root element | | p-organizationchart-subtree | Class name of the subtree element | | p-organizationchart-tree | Class name of the tree element | | p-organizationchart-node | Class name of the node element | | p-organizationchart-node-content | Class name of the node content element | | p-organizationchart-collapse-button | Class name of the collapse button element | | p-organizationchart-collapse-button-down-icon | Class name of the collapse button down icon element | | p-organizationchart-collapse-button-up-icon | Class name of the collapse button up icon element | ### Design Tokens | Token | CSS Variable | Description | |-------|--------------|-------------| | organizationchart.gutter | --p-organizationchart-gutter | Gutter of root | | organizationchart.transition.duration | --p-organizationchart-transition-duration | Transition duration of root | | organizationchart.node.background | --p-organizationchart-node-background | Background of node | | organizationchart.node.hover.background | --p-organizationchart-node-hover-background | Hover background of node | | organizationchart.node.selected.background | --p-organizationchart-node-selected-background | Selected background of node | | organizationchart.node.border.color | --p-organizationchart-node-border-color | Border color of node | | organizationchart.node.color | --p-organizationchart-node-color | Color of node | | organizationchart.node.selected.color | --p-organizationchart-node-selected-color | Selected color of node | | organizationchart.node.hover.color | --p-organizationchart-node-hover-color | Hover color of node | | organizationchart.node.padding | --p-organizationchart-node-padding | Padding of node | | organizationchart.node.toggleable.padding | --p-organizationchart-node-toggleable-padding | Toggleable padding of node | | organizationchart.node.border.radius | --p-organizationchart-node-border-radius | Border radius of node | | organizationchart.node.font.size | --p-organizationchart-node-font-size | Font size of node | | organizationchart.node.font.weight | --p-organizationchart-node-font-weight | Font weight of node | | organizationchart.node.focus.ring.width | --p-organizationchart-node-focus-ring-width | Focus ring width of node | | organizationchart.node.focus.ring.style | --p-organizationchart-node-focus-ring-style | Focus ring style of node | | organizationchart.node.focus.ring.color | --p-organizationchart-node-focus-ring-color | Focus ring color of node | | organizationchart.node.focus.ring.offset | --p-organizationchart-node-focus-ring-offset | Focus ring offset of node | | organizationchart.node.focus.ring.shadow | --p-organizationchart-node-focus-ring-shadow | Focus ring shadow of node | | organizationchart.node.toggle.button.background | --p-organizationchart-node-toggle-button-background | Background of node toggle button | | organizationchart.node.toggle.button.hover.background | --p-organizationchart-node-toggle-button-hover-background | Hover background of node toggle button | | organizationchart.node.toggle.button.border.color | --p-organizationchart-node-toggle-button-border-color | Border color of node toggle button | | organizationchart.node.toggle.button.color | --p-organizationchart-node-toggle-button-color | Color of node toggle button | | organizationchart.node.toggle.button.hover.color | --p-organizationchart-node-toggle-button-hover-color | Hover color of node toggle button | | organizationchart.node.toggle.button.size | --p-organizationchart-node-toggle-button-size | Size of node toggle button | | organizationchart.node.toggle.button.border.radius | --p-organizationchart-node-toggle-button-border-radius | Border radius of node toggle button | | organizationchart.node.toggle.button.focus.ring.width | --p-organizationchart-node-toggle-button-focus-ring-width | Focus ring width of node toggle button | | organizationchart.node.toggle.button.focus.ring.style | --p-organizationchart-node-toggle-button-focus-ring-style | Focus ring style of node toggle button | | organizationchart.node.toggle.button.focus.ring.color | --p-organizationchart-node-toggle-button-focus-ring-color | Focus ring color of node toggle button | | organizationchart.node.toggle.button.focus.ring.offset | --p-organizationchart-node-toggle-button-focus-ring-offset | Focus ring offset of node toggle button | | organizationchart.node.toggle.button.focus.ring.shadow | --p-organizationchart-node-toggle-button-focus-ring-shadow | Focus ring shadow of node toggle button | | organizationchart.node.toggle.button.icon.size | --p-organizationchart-node-toggle-button-icon-size | Icon size of node toggle button | | organizationchart.connector.color | --p-organizationchart-connector-color | Color of connector | | organizationchart.connector.border.radius | --p-organizationchart-connector-border-radius | Border radius of connector | | organizationchart.connector.height | --p-organizationchart-connector-height | Height of connector | --- # Overlay API - PrimeNG This API allows overlay components to be controlled from the PrimeNG. In this way, all overlay components in the application can have the same behavior. ## Accessibility Screen Reader Overlay component uses dialog role and since any attribute is passed to the root element you may define attributes like aria-label or aria-labelledby to describe the popup contents. In addition aria-modal is added since focus is kept within the popup. It is recommended to use a trigger component that can be accessed with keyboard such as a button, if not adding tabIndex would be necessary. Overlay adds aria-expanded state attribute and aria-controls to the trigger so that the relation between the trigger and the popup is defined. Overlay Keyboard Support When the popup gets opened, the first focusable element receives the focus and this can be customized by adding autofocus to an element within the popup. Key Function tab Moves focus to the next the focusable element within the popup. shift + tab Moves focus to the previous the focusable element within the popup. escape Closes the popup and moves focus to the trigger. Close Button Keyboard Support Key Function enter Closes the popup and moves focus to the trigger. space Closes the popup and moves focus to the trigger. ## appendto-doc Overlay can be mounted into its location, body or DOM element instance using this option. ## autozindex-doc The autoZIndex determines whether to automatically manage layering. Its default value is 'false'. ## basezindex-doc The baseZIndex is base zIndex value to use in layering. Its default value is 0. ## Basic Overlay is a container to display content in an overlay window. All the options mentioned above can be used as props for this component. **Example:** ```typescript import { Component } from '@angular/core'; import { ButtonModule } from 'primeng/button'; @Component({ template: `
Content
`, standalone: true, imports: [ButtonModule] }) export class OverlayBasicDemo { overlayVisible: boolean = false; toggle() { this.overlayVisible = !this.overlayVisible; } } ``` ## Events **Example:** ```typescript import { Component } from '@angular/core'; @Component({ template: `
`, standalone: true, imports: [] }) export class OverlayEventsDemo {} ``` ## hideonescape-doc The hideOnEscape determines to hide the overlay when escape key pressed. Accepts boolean, default value is false . ## Mode It has two valid values; overlay and modal . In overlay mode, a container element is opened like overlaypanel or dropdown's panel. In modal mode, the container element behaves like popup. This behaviour is similar to a dialog component. ## Responsive It is the option used to determine in which mode it should appear according to the given media or breakpoint . **Example:** ```typescript import { Component } from '@angular/core'; @Component({ template: `

Valid values of the direction property would be;

  • center (default)
  • top
  • top-start
  • top-end
  • bottom
  • bottom-start
  • bottom-end
  • left
  • left-start
  • left-end
  • right
  • right-start
  • right-end
`, standalone: true, imports: [] }) export class OverlayResponsiveDemo {} ``` ## Target The target is used to detect the element that will be used to position the overlay. Valid values would be; **Example:** ```typescript import { Component } from '@angular/core'; @Component({ template: `
  • @prev (default)
  • @next
  • @parent
  • @grandparent
  • Use CSS selector
  • Use () => HTMLElement
`, standalone: true, imports: [] }) export class OverlayTargetDemo {} ``` ## Template Content can be customized with the content template. **Example:** ```typescript import { Component } from '@angular/core'; import { ButtonModule } from 'primeng/button'; @Component({ template: `
Content - {{ option.mode }}
`, standalone: true, imports: [ButtonModule] }) export class OverlayTemplateDemo { overlayVisible: boolean = false; toggle() { this.overlayVisible = !this.overlayVisible; } } ``` ## Overlay This API allows overlay components to be controlled from the PrimeNG. In this way, all overlay components in the application can have the same behavior. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | any | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | | visible | boolean | false | The visible property is an input that determines the visibility of the component. | | mode | string | null | The mode property is an input that determines the overlay mode type or string. | | style | Partial | null | The style property is an input that determines the style object for the component. | | styleClass | string | null | The styleClass property is an input that determines the CSS class(es) for the component. | | contentStyle | Partial | null | The contentStyle property is an input that determines the style object for the content of the component. | | contentStyleClass | string | null | The contentStyleClass property is an input that determines the CSS class(es) for the content of the component. | | target | string | null | The target property is an input that specifies the target element or selector for the component. | | autoZIndex | boolean | false | The autoZIndex determines whether to automatically manage layering. Its default value is 'false'. | | baseZIndex | number | null | The baseZIndex is base zIndex value to use in layering. | | listener | any | null | The listener property is an input that specifies the listener object for the component. | | responsive | ResponsiveOverlayOptions | null | It is the option used to determine in which mode it should appear according to the given media or breakpoint. | | options | OverlayOptions | null | The options property is an input that specifies the overlay options for the component. | | appendTo | HTMLElement \| ElementRef \| TemplateRef \| "self" \| "body" \| null \| undefined | 'self' | Target element to attach the overlay, valid values are "body" or a local ng-template variable of another element (note: use binding with brackets for template variables, e.g. [appendTo]="mydiv" for a div element having #mydiv as variable name). | | inline | boolean | false | Specifies whether the overlay should be rendered inline within the current component's template. | | motionOptions | MotionOptions | - | The motion options. | ### Emits | Name | Parameters | Description | |------|------------|-------------| | onBeforeShow | event: OverlayOnBeforeShowEvent | Callback to invoke before the overlay is shown. | | onShow | event: OverlayOnShowEvent | Callback to invoke when the overlay is shown. | | onBeforeHide | event: OverlayOnBeforeHideEvent | Callback to invoke before the overlay is hidden. | | onHide | event: OverlayOnHideEvent | Callback to invoke when the overlay is hidden | | onAnimationStart | event: AnimationEvent | Callback to invoke when the animation is started. | | onAnimationDone | event: AnimationEvent | Callback to invoke when the animation is done. | | onBeforeEnter | event: MotionEvent | Callback to invoke before the overlay enters. | | onEnter | event: MotionEvent | Callback to invoke when the overlay enters. | | onAfterEnter | event: MotionEvent | Callback to invoke after the overlay has entered. | | onBeforeLeave | event: MotionEvent | Callback to invoke before the overlay leaves. | | onLeave | event: MotionEvent | Callback to invoke when the overlay leaves. | | onAfterLeave | event: MotionEvent | Callback to invoke after the overlay has left. | ### Templates | Name | Type | Description | |------|------|-------------| | content | TemplateRef | Content template of the component. | ## Pass Through Options | Name | Type | Description | |------|------|-------------| | root | PassThroughOption | Used to pass attributes to the root's DOM element. | | content | PassThroughOption | Used to pass attributes to the content's DOM element. | | motion | MotionOptions | Used to pass options to the motion component/directive. | --- # Angular Paginator Component Paginator displays data in paged format and provides navigation between pages. ## Accessibility Screen Reader Paginator is placed inside a nav element to indicate a navigation section. All of the paginator elements can be customized using templating however the default behavious is listed below. First, previous, next and last page navigators elements with aria-label attributes referring to the aria.firstPageLabel , aria.prevPageLabel , aria.nextPageLabel and aria.lastPageLabel properties of the locale API respectively. Page links are also button elements with an aria-label attribute derived from the aria.pageLabel of the locale API. Current page is marked with aria-current set to "page" as well. Current page report uses aria-live="polite" to instruct screen reader about the changes to the pagination state. Rows per page dropdown internally uses a dropdown component, refer to the dropdown documentation for accessibility details. Additionally, the dropdown uses an aria-label from the aria.rowsPerPage property of the locale API. Jump to page input is an input element with an aria-label that refers to the aria.jumpToPage property of the locale API. Keyboard Support Key Function tab Moves focus through the paginator elements. enter Executes the paginator element action. space Executes the paginator element action. Rows Per Page Dropdown Keyboard Support Refer to the dropdown documentation for more details about keyboard support. ## Basic Paginator is used as a controlled component with first , rows and onPageChange properties to manage the first index and number of records to display per page. Total number of records need to be with totalRecords property. Default template includes a dropdown to change the rows so rowsPerPageOptions is also necessary for the dropdown options. **Example:** ```typescript import { Component } from '@angular/core'; import { Paginator, PaginatorModule } from 'primeng/paginator'; @Component({ template: `
`, standalone: true, imports: [PaginatorModule] }) export class PaginatorBasicDemo { first: number = 0; rows: number = 10; onPageChange(event: PaginatorState) { this.first = event.first ?? 0; this.rows = event.rows ?? 10; } } ``` ## currentpagereport-doc Current page report item in the template displays information about the pagination state. Default value is ({{ '{' }}currentPage{{ '}' }} of {{ '{' }}totalPages{{ '}' }}) whereas available placeholders are the following; {{ '{' }}currentPage{{ '}' }} {{ '{' }}totalPages{{ '}' }} {{ '{' }}rows{{ '}' }} {{ '{' }}first{{ '}' }} {{ '{' }}last{{ '}' }} {{ '{' }}totalRecords{{ '}' }} **Example:** ```typescript import { Component } from '@angular/core'; import { PaginatorModule } from 'primeng/paginator'; @Component({ template: `
`, standalone: true, imports: [PaginatorModule] }) export class PaginatorCurrentPageReportDemo { first: number = 0; rows: number = 10; onPageChange(event: PaginatorState) { this.first = event.first ?? 0; this.rows = event.rows ?? 10; } } ``` ## Images Sample image gallery implementation using paginator. **Example:** ```typescript import { Component } from '@angular/core'; import { PaginatorModule } from 'primeng/paginator'; @Component({ template: `
`, standalone: true, imports: [PaginatorModule] }) export class PaginatorImagesDemo { first: number = 0; rows: number = 10; onPageChange(event: PaginatorState) { this.first = event.first ?? 0; this.rows = event.rows ?? 10; } } ``` ## Template Templating allows overriding the default content of the UI elements by defining callbacks using the element name. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { ButtonModule } from 'primeng/button'; import { DividerModule } from 'primeng/divider'; import { SelectModule } from 'primeng/select'; import { PaginatorModule } from 'primeng/paginator'; import { SliderModule } from 'primeng/slider'; @Component({ template: `
Items per page:
Items per page:
`, standalone: true, imports: [ButtonModule, DividerModule, SelectModule, PaginatorModule, SliderModule, FormsModule] }) export class PaginatorTemplateDemo { first1: number = 0; rows1: number = 10; first2: number = 0; rows2: number = 10; first3: number = 0; rows3: number = 10; totalRecords: number = 120; options: any[] = [ { label: 5, value: 5 }, { label: 10, value: 10 }, { label: 20, value: 20 }, { label: 120, value: 120 } ]; onPageChange1(event: PaginatorState) { this.first1 = event.first ?? 0; this.rows1 = event.rows ?? 10; } onPageChange2(event: PaginatorState) { this.first2 = event.first ?? 0; this.rows2 = event.rows ?? 10; } onPageChange3(event: PaginatorState) { this.first3 = event.first ?? 0; this.rows3 = event.rows ?? 10; } } ``` ## Paginator Paginator is a generic component to display content in paged format. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | | pageLinkSize | number | - | Number of page links to display. | | alwaysShow | boolean | - | Whether to show it even there is only one page. | | templateLeft | TemplateRef | - | Template instance to inject into the left side of the paginator. | | templateRight | TemplateRef | - | Template instance to inject into the right side of the paginator. | | dropdownScrollHeight | string | - | Dropdown height of the viewport in pixels, a scrollbar is defined if height of list exceeds this value. | | currentPageReportTemplate | string | - | Template of the current page report element. Available placeholders are {currentPage},{totalPages},{rows},{first},{last} and {totalRecords} | | showCurrentPageReport | boolean | - | Whether to display current page report. | | showFirstLastIcon | boolean | - | When enabled, icons are displayed on paginator to go first and last page. | | totalRecords | number | - | Number of total records. | | rows | number | - | Data count to display per page. | | first | number | - | Zero-relative number of the first row to be displayed. | | rowsPerPageOptions | any[] | - | Array of integer/object values to display inside rows per page dropdown. A object that have 'showAll' key can be added to it to show all data. Exp; [10,20,30,{showAll:'All'}] | | showJumpToPageDropdown | boolean | - | Whether to display a dropdown to navigate to any page. | | showJumpToPageInput | boolean | - | Whether to display a input to navigate to any page. | | jumpToPageItemTemplate | TemplateRef | - | Template instance to inject into the jump to page dropdown item inside in the paginator. | | showPageLinks | boolean | - | Whether to show page links. | | locale | string | - | Locale to be used in formatting. | | dropdownItemTemplate | TemplateRef | - | Template instance to inject into the rows per page dropdown item inside in the paginator. | | appendTo | HTMLElement \| ElementRef \| TemplateRef \| "self" \| "body" \| null \| undefined | 'self' | Target element to attach the overlay, valid values are "body" or a local ng-template variable of another element (note: use binding with brackets for template variables, e.g. [appendTo]="mydiv" for a div element having #mydiv as variable name). | ### Emits | Name | Parameters | Description | |------|------------|-------------| | onPageChange | value: PaginatorState | Callback to invoke when page changes, the event object contains information about the new state. | ### Templates | Name | Type | Description | |------|------|-------------| | dropdownicon | TemplateRef | Template for the dropdown icon. | | firstpagelinkicon | TemplateRef | Template for the first page link icon. | | previouspagelinkicon | TemplateRef | Template for the previous page link icon. | | lastpagelinkicon | TemplateRef | Template for the last page link icon. | | nextpagelinkicon | TemplateRef | Template for the next page link icon. | ## Pass Through Options | Name | Type | Description | |------|------|-------------| | host | PassThroughOption | Used to pass attributes to the host's DOM element. | | root | PassThroughOption | Used to pass attributes to the root's DOM element. | | contentStart | PassThroughOption | Used to pass attributes to the content start's DOM element. | | current | PassThroughOption | Used to pass attributes to the current page report's DOM element. | | first | PassThroughOption | Used to pass attributes to the first page button's DOM element. | | firstIcon | PassThroughOption | Used to pass attributes to the first page button icon's DOM element. | | prev | PassThroughOption | Used to pass attributes to the previous page button's DOM element. | | prevIcon | PassThroughOption | Used to pass attributes to the previous page button icon's DOM element. | | pages | PassThroughOption | Used to pass attributes to the pages container's DOM element. | | page | PassThroughOption | Used to pass attributes to the page button's DOM element. | | next | PassThroughOption | Used to pass attributes to the next page button's DOM element. | | nextIcon | PassThroughOption | Used to pass attributes to the next page button icon's DOM element. | | last | PassThroughOption | Used to pass attributes to the last page button's DOM element. | | lastIcon | PassThroughOption | Used to pass attributes to the last page button icon's DOM element. | | contentEnd | PassThroughOption | Used to pass attributes to the content end's DOM element. | | pcJumpToPageDropdown | SelectPassThrough | Used to pass attributes to the Select component (jump to page dropdown). | | pcJumpToPageInput | InputNumberPassThrough | Used to pass attributes to the InputNumber component (jump to page input). | | pcRowPerPageDropdown | SelectPassThrough | Used to pass attributes to the Select component (rows per page dropdown). | ## Theming ### CSS Classes | Class | Description | |-------|-------------| | p-paginator | Class name of the paginator element | | p-paginator-content-start | Class name of the content start element | | p-paginator-content-end | Class name of the content end element | | p-paginator-first | Class name of the first element | | p-paginator-first-icon | Class name of the first icon element | | p-paginator-prev | Class name of the prev element | | p-paginator-prev-icon | Class name of the prev icon element | | p-paginator-next | Class name of the next element | | p-paginator-next-icon | Class name of the next icon element | | p-paginator-last | Class name of the last element | | p-paginator-last-icon | Class name of the last icon element | | p-paginator-pages | Class name of the pages element | | p-paginator-page | Class name of the page element | | p-paginator-current | Class name of the current element | | p-paginator-rpp-dropdown | Class name of the row per page dropdown element | | p-paginator-jtp-dropdown | Class name of the jump to page dropdown element | | p-paginator-jtp-input | Class name of the jump to page input element | ### Design Tokens | Token | CSS Variable | Description | |-------|--------------|-------------| | paginator.padding | --p-paginator-padding | Padding of root | | paginator.gap | --p-paginator-gap | Gap of root | | paginator.border.radius | --p-paginator-border-radius | Border radius of root | | paginator.background | --p-paginator-background | Background of root | | paginator.color | --p-paginator-color | Color of root | | paginator.transition.duration | --p-paginator-transition-duration | Transition duration of root | | paginator.nav.button.background | --p-paginator-nav-button-background | Background of nav button | | paginator.nav.button.hover.background | --p-paginator-nav-button-hover-background | Hover background of nav button | | paginator.nav.button.selected.background | --p-paginator-nav-button-selected-background | Selected background of nav button | | paginator.nav.button.color | --p-paginator-nav-button-color | Color of nav button | | paginator.nav.button.hover.color | --p-paginator-nav-button-hover-color | Hover color of nav button | | paginator.nav.button.selected.color | --p-paginator-nav-button-selected-color | Selected color of nav button | | paginator.nav.button.width | --p-paginator-nav-button-width | Width of nav button | | paginator.nav.button.height | --p-paginator-nav-button-height | Height of nav button | | paginator.nav.button.border.radius | --p-paginator-nav-button-border-radius | Border radius of nav button | | paginator.nav.button.font.weight | --p-paginator-nav-button-font-weight | Font weight of nav button | | paginator.nav.button.font.size | --p-paginator-nav-button-font-size | Font size of nav button | | paginator.nav.button.focus.ring.width | --p-paginator-nav-button-focus-ring-width | Focus ring width of nav button | | paginator.nav.button.focus.ring.style | --p-paginator-nav-button-focus-ring-style | Focus ring style of nav button | | paginator.nav.button.focus.ring.color | --p-paginator-nav-button-focus-ring-color | Focus ring color of nav button | | paginator.nav.button.focus.ring.offset | --p-paginator-nav-button-focus-ring-offset | Focus ring offset of nav button | | paginator.nav.button.focus.ring.shadow | --p-paginator-nav-button-focus-ring-shadow | Focus ring shadow of nav button | | paginator.current.page.report.color | --p-paginator-current-page-report-color | Color of current page report | | paginator.current.page.report.font.weight | --p-paginator-current-page-report-font-weight | Font weight of current page report | | paginator.current.page.report.font.size | --p-paginator-current-page-report-font-size | Font size of current page report | | paginator.jump.to.page.input.max.width | --p-paginator-jump-to-page-input-max-width | Max width of jump to page input | --- # Angular Panel Component Panel is a container component with an optional content toggle feature. ## Accessibility Screen Reader Toggleable panels use a content toggle button at the header that has aria-controls to define the id of the content section along with aria-expanded for the visibility state. The value to read the button defaults to the value of the header property and can be customized by defining an aria-label or aria-labelledby via the toggleButtonProps property. The content uses region , defines an id that matches the aria-controls of the content toggle button and aria-labelledby referring to the id of the header. Content Toggle Button Keyboard Support Key Function tab Moves focus to the next the focusable element in the page tab sequence. shift + tab Moves focus to the previous the focusable element in the page tab sequence. enter Toggles the visibility of the content. space Toggles the visibility of the content. ## Basic A simple Panel is created with a header property along with the content as children. **Example:** ```typescript import { Component } from '@angular/core'; import { PanelModule } from 'primeng/panel'; @Component({ template: `

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

`, standalone: true, imports: [PanelModule] }) export class PanelBasicDemo {} ``` ## Template Header and Footers sections can be customized using header and footer templates. **Example:** ```typescript import { Component, OnInit } from '@angular/core'; import { AvatarModule } from 'primeng/avatar'; import { ButtonModule } from 'primeng/button'; import { MenuModule } from 'primeng/menu'; import { PanelModule } from 'primeng/panel'; @Component({ template: `
Amy Elsner
Updated 2 hours ago

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

`, standalone: true, imports: [AvatarModule, ButtonModule, MenuModule, PanelModule] }) export class PanelTemplateDemo implements OnInit { ngOnInit() { this.items = [ { label: 'Refresh', icon: 'pi pi-refresh' }, { label: 'Search', icon: 'pi pi-search' }, { separator: true }, { label: 'Delete', icon: 'pi pi-times' } ]; } } ``` ## Toggleable Content of the panel can be expanded and collapsed using toggleable option, default state is defined with collapsed option. By default, toggle icon is used to toggle the contents whereas setting toggler to "header" enables clicking anywhere in the header to trigger a toggle. **Example:** ```typescript import { Component } from '@angular/core'; import { PanelModule } from 'primeng/panel'; @Component({ template: `

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

`, standalone: true, imports: [PanelModule] }) export class PanelToggleableDemo {} ``` ## Panel Panel is a container with the optional content toggle feature. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | | toggleable | boolean | - | Defines if content of panel can be expanded and collapsed. | | header | string | - | Header text of the panel. | | collapsed | boolean | - | Defines the initial state of panel content, supports one or two-way binding as well. | | iconPos | "start" \| "end" \| "center" | - | Position of the icons. | | showHeader | boolean | - | Specifies if header of panel cannot be displayed. | | toggler | "icon" \| "header" | - | Specifies the toggler element to toggle the panel content. | | toggleButtonProps | ButtonProps | - | Used to pass all properties of the ButtonProps to the Button component. | | motionOptions | MotionOptions | - | The motion options. | ### Emits | Name | Parameters | Description | |------|------------|-------------| | onBeforeToggle | event: PanelBeforeToggleEvent | Callback to invoke before panel toggle. | | onAfterToggle | event: PanelAfterToggleEvent | Callback to invoke after panel toggle. | ### Templates | Name | Type | Description | |------|------|-------------| | header | TemplateRef | Defines template option for header. | | icon | TemplateRef | Defines template option for icons. | | content | TemplateRef | Defines template option for content. | | footer | TemplateRef | Defines template option for footer. | | headericons | TemplateRef | Defines template option for headerIcon. | ## Pass Through Options | Name | Type | Description | |------|------|-------------| | host | PassThroughOption | Used to pass attributes to the host's DOM element. | | root | PassThroughOption | Used to pass attributes to the root's DOM element. | | header | PassThroughOption | Used to pass attributes to the header's DOM element. | | title | PassThroughOption | Used to pass attributes to the title's DOM element. | | headerActions | PassThroughOption | Used to pass attributes to the header actions' DOM element. | | pcToggleButton | ButtonPassThrough | Used to pass attributes to the toggle button button's DOM element. | | contentContainer | PassThroughOption | Used to pass attributes to the content container's DOM element. | | contentWrapper | PassThroughOption | Used to pass attributes to the content wrapper DOM element. | | content | PassThroughOption | Used to pass attributes to the content's DOM element. | | footer | PassThroughOption | Used to pass attributes to the footer's DOM element. | | motion | MotionOptions | Used to pass options to the motion component/directive. | ## Theming ### CSS Classes | Class | Description | |-------|-------------| | p-panel | Class name of the root element | | p-panel-header | Class name of the header element | | p-panel-title | Class name of the title element | | p-panel-header-actions | Class name of the header actions element | | p-panel-toggle-button | Class name of the toggle button element | | p-panel-content-container | Class name of the content container element | | p-panel-content-wrapper | Class name of the content wrapper element | | p-panel-content | Class name of the content element | | p-panel-footer | Class name of the footer element | ### Design Tokens | Token | CSS Variable | Description | |-------|--------------|-------------| | panel.background | --p-panel-background | Background of root | | panel.border.color | --p-panel-border-color | Border color of root | | panel.color | --p-panel-color | Color of root | | panel.border.radius | --p-panel-border-radius | Border radius of root | | panel.header.background | --p-panel-header-background | Background of header | | panel.header.color | --p-panel-header-color | Color of header | | panel.header.padding | --p-panel-header-padding | Padding of header | | panel.header.border.color | --p-panel-header-border-color | Border color of header | | panel.header.border.width | --p-panel-header-border-width | Border width of header | | panel.header.border.radius | --p-panel-header-border-radius | Border radius of header | | panel.toggleable.header.padding | --p-panel-toggleable-header-padding | Padding of toggleable header | | panel.title.font.weight | --p-panel-title-font-weight | Font weight of title | | panel.title.font.size | --p-panel-title-font-size | Font size of title | | panel.content.padding | --p-panel-content-padding | Padding of content | | panel.footer.padding | --p-panel-footer-padding | Padding of footer | --- # Angular PanelMenu Component PanelMenu is a hybrid of Accordion and Tree components. ## Accessibility Screen Reader Accordion header elements have a button role, an aria-label defined using the label property of the menuitem model and aria-controls to define the id of the content section along with aria-expanded for the visibility state. The content of an accordion panel uses region role, defines an id that matches the aria-controls of the header and aria-labelledby referring to the id of the header. The tree elements has a tree as the role and each menu item has a treeitem role along with aria-label , aria-selected and aria-expanded attributes. The container element of a treenode has the group role. The aria-setsize , aria-posinset and aria-level attributes are calculated implicitly and added to each treeitem. Header Keyboard Support Key Function tab Adds focus to the first header when focus moves in to the component, if there is already a focused tab header then moves the focus out of the component based on the page tab sequence. enter Toggles the visibility of the content. space Toggles the visibility of the content. down arrow If panel is collapsed then moves focus to the next header, otherwise first treenode of the panel receives the focus. up arrow If previous panel is collapsed then moves focus to the previous header, otherwise last treenode of the previous panel receives the focus. home Moves focus to the first header. end Moves focus to the last header. Tree Keyboard Support Key Function tab Moves focus to the next focusable element in the page tab order. shift + tab Moves focus to the previous focusable element in the page tab order. enter Activates the focused treenode. space Activates the focused treenode. down arrow Moves focus to the next treenode. up arrow Moves focus to the previous treenode. right arrow If node is closed, opens the node otherwise moves focus to the first child node. left arrow If node is open, closes the node otherwise moves focus to the parent node. ## Basic PanelMenu requires a collection of menuitems as its model . **Example:** ```typescript import { Component, OnInit } from '@angular/core'; import { PanelMenu, PanelMenuModule } from 'primeng/panelmenu'; import { MenuItem } from 'primeng/api'; import { PanelMenu } from 'primeng/panelmenu'; @Component({ template: `
`, standalone: true, imports: [PanelMenuModule] }) export class PanelMenuBasicDemo implements OnInit { items: MenuItem[]; ngOnInit() { this.items = [ { label: 'Files', icon: 'pi pi-file', items: [ { label: 'Documents', icon: 'pi pi-file', items: [ { label: 'Invoices', icon: 'pi pi-file-pdf', items: [ { label: 'Pending', icon: 'pi pi-stop' }, { label: 'Paid', icon: 'pi pi-check-circle' } ] }, { label: 'Clients', icon: 'pi pi-users' } ] }, { label: 'Images', icon: 'pi pi-image', items: [ { label: 'Logos', icon: 'pi pi-image' } ] } ] }, { label: 'Cloud', icon: 'pi pi-cloud', items: [ { label: 'Upload', icon: 'pi pi-cloud-upload' }, { label: 'Download', icon: 'pi pi-cloud-download' }, { label: 'Sync', icon: 'pi pi-refresh' } ] }, { label: 'Devices', icon: 'pi pi-desktop', items: [ { label: 'Phone', icon: 'pi pi-mobile' }, { label: 'Desktop', icon: 'pi pi-desktop' }, { label: 'Tablet', icon: 'pi pi-tablet' } ] } ]; } } ``` ## Command The command property defines the callback to run when an item is activated by click or a key event. **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { PanelMenu, PanelMenuModule } from 'primeng/panelmenu'; import { MenuItem, MessageService } from 'primeng/api'; import { PanelMenu } from 'primeng/panelmenu'; @Component({ template: `
`, standalone: true, imports: [PanelMenuModule], providers: [MessageService] }) export class PanelMenuCommandDemo implements OnInit { private messageService = inject(MessageService); items: MenuItem[]; ngOnInit() { this.items = [ { label: 'Files', icon: 'pi pi-file', items: [ { label: 'New', icon: 'pi pi-plus', command: () => { this.messageService.add({ severity: 'success', summary: 'Success', detail: 'File created', life: 3000 }); } }, { label: 'Search', icon: 'pi pi-search', command: () => { this.messageService.add({ severity: 'warn', summary: 'Search Results', detail: 'No results found', life: 3000 }); } }, { label: 'Print', icon: 'pi pi-print', command: () => { this.messageService.add({ severity: 'error', summary: 'Error', detail: 'No printer connected', life: 3000 }); } } ] }, { label: 'Sync', icon: 'pi pi-cloud', items: [ { label: 'Import', icon: 'pi pi-cloud-download', command: () => { this.messageService.add({ severity: 'info', summary: 'Downloads', detail: 'Downloaded from cloud', life: 3000 }); } }, { label: 'Export', icon: 'pi pi-cloud-upload', command: () => { this.messageService.add({ severity: 'info', summary: 'Shared', detail: 'Exported to cloud', life: 3000 }); } } ] }, { label: 'Sign Out', icon: 'pi pi-sign-out', command: () => { this.messageService.add({ severity: 'info', summary: 'Signed out', detail: 'User logged out', life: 3000 }); } } ]; } } ``` ## Controlled Menu items can be controlled programmatically. **Example:** ```typescript import { Component, OnInit } from '@angular/core'; import { ButtonModule } from 'primeng/button'; import { PanelMenu, PanelMenuModule } from 'primeng/panelmenu'; import { MenuItem } from 'primeng/api'; import { PanelMenu } from 'primeng/panelmenu'; @Component({ template: `
`, standalone: true, imports: [ButtonModule, PanelMenuModule] }) export class PanelMenuControlledDemo implements OnInit { items: MenuItem[]; ngOnInit() { this.items = [ { key: '0', label: 'Users', icon: 'pi pi-users', items: [ { key: '0_1', label: 'New', items: [ { key: '0_1_0', label: 'Member' }, { key: '0_1_1', label: 'Group' } ] }, { key: '0_2', label: 'Search' } ] }, { key: '1', label: 'Tasks', icon: 'pi pi-server', items: [ { key: '1_0', label: 'Add New' }, { key: '1_1', label: 'Pending' }, { key: '1_2', label: 'Overdue' } ] }, { key: '2', label: 'Calendar', icon: 'pi pi-calendar', items: [ { key: '2_0', label: 'New Event' }, { key: '2_1', label: 'Today' }, { key: '2_2', label: 'This Week' } ] } ]; } toggleAll() { const expanded = !this.areAllItemsExpanded(); this.items = this.toggleAllRecursive(this.items, expanded); } } ``` ## Multiple Only one single root menuitem can be active by default, enable multiple property to be able to open more than one items. **Example:** ```typescript import { Component, OnInit } from '@angular/core'; import { PanelMenu, PanelMenuModule } from 'primeng/panelmenu'; import { MenuItem } from 'primeng/api'; import { PanelMenu } from 'primeng/panelmenu'; @Component({ template: `
`, standalone: true, imports: [PanelMenuModule] }) export class PanelMenuMultipleDemo implements OnInit { items: MenuItem[]; ngOnInit() { this.items = [ { label: 'Files', icon: 'pi pi-file', items: [ { label: 'Documents', icon: 'pi pi-file', items: [ { label: 'Invoices', icon: 'pi pi-file-pdf', items: [ { label: 'Pending', icon: 'pi pi-stop' }, { label: 'Paid', icon: 'pi pi-check-circle' } ] }, { label: 'Clients', icon: 'pi pi-users' } ] }, { label: 'Images', icon: 'pi pi-image', items: [ { label: 'Logos', icon: 'pi pi-image' } ] } ] }, { label: 'Cloud', icon: 'pi pi-cloud', items: [ { label: 'Upload', icon: 'pi pi-cloud-upload' }, { label: 'Download', icon: 'pi pi-cloud-download' }, { label: 'Sync', icon: 'pi pi-refresh' } ] }, { label: 'Devices', icon: 'pi pi-desktop', items: [ { label: 'Phone', icon: 'pi pi-mobile' }, { label: 'Desktop', icon: 'pi pi-desktop' }, { label: 'Tablet', icon: 'pi pi-tablet' } ] } ]; } } ``` ## Router Menu items support navigation via routerLink, programmatic routing using commands, or external URLs. **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { PanelMenu, PanelMenuModule } from 'primeng/panelmenu'; import { MenuItem, MessageService } from 'primeng/api'; import { PanelMenu } from 'primeng/panelmenu'; @Component({ template: `
`, standalone: true, imports: [PanelMenuModule], providers: [MessageService] }) export class PanelMenuRouterDemo implements OnInit { private messageService = inject(MessageService); items: MenuItem[]; ngOnInit() { this.items = [ { label: 'Router', icon: 'pi pi-palette', items: [ { label: 'Installation', icon: 'pi pi-eraser', routerLink: '/installation' }, { label: 'Configuration', icon: 'pi pi-heart', routerLink: '/configuration' } ] }, { label: 'Programmatic', icon: 'pi pi-link', command: () => { this.router.navigate(['/installation']); } }, { label: 'External', icon: 'pi pi-home', items: [ { label: 'Angular', icon: 'pi pi-star', url: 'https://angular.io/' }, { label: 'Vite.js', icon: 'pi pi-bookmark', url: 'https://vitejs.dev/' } ] } ]; } } ``` ## Template PanelMenu requires a collection of menuitems as its model . **Example:** ```typescript import { Component, OnInit } from '@angular/core'; import { BadgeModule } from 'primeng/badge'; import { PanelMenu, PanelMenuModule } from 'primeng/panelmenu'; import { RippleModule } from 'primeng/ripple'; import { MenuItem } from 'primeng/api'; import { PanelMenu } from 'primeng/panelmenu'; @Component({ template: `
{{ item.label }} @if (item.badge) { } @if (item.shortcut) { {{ item.shortcut }} }
`, standalone: true, imports: [BadgeModule, PanelMenuModule, RippleModule] }) export class PanelMenuTemplateDemo implements OnInit { items: MenuItem[]; ngOnInit() { this.items = [ { label: 'Mail', icon: 'pi pi-envelope', badge: '5', items: [ { label: 'Compose', icon: 'pi pi-file-edit', shortcut: '⌘+N' }, { label: 'Inbox', icon: 'pi pi-inbox', badge: '5' }, { label: 'Sent', icon: 'pi pi-send', shortcut: '⌘+S' }, { label: 'Trash', icon: 'pi pi-trash', shortcut: '⌘+T' } ] }, { label: 'Reports', icon: 'pi pi-chart-bar', shortcut: '⌘+R', items: [ { label: 'Sales', icon: 'pi pi-chart-line', badge: '3' }, { label: 'Products', icon: 'pi pi-list', badge: '6' } ] }, { label: 'Profile', icon: 'pi pi-user', shortcut: '⌘+W', items: [ { label: 'Settings', icon: 'pi pi-cog', shortcut: '⌘+O' }, { label: 'Privacy', icon: 'pi pi-shield', shortcut: '⌘+P' } ] } ]; } toggleAll() { const expanded = !this.areAllItemsExpanded(); this.items = this.toggleAllRecursive(this.items, expanded); } } ``` ## Panel Menu PanelMenu is a hybrid of Accordion and Tree components. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | | model | MenuItem[] | - | An array of menuitems. | | multiple | boolean | - | Whether multiple tabs can be activated at the same time or not. | | motionOptions | MotionOptions | - | The motion options. | | id | string | - | Current id state as a string. | | tabindex | number | - | Index of the element in tabbing order. | ### Templates | Name | Type | Description | |------|------|-------------| | submenuicon | TemplateRef | Template option of submenu icon. | | headericon | TemplateRef | Template option of header icon. | | item | TemplateRef | Template option of item. | ### Methods | Name | Parameters | Return Type | Description | |------|------------|-------------|-------------| | collapseAll | | void | Collapses open panels. | ## Pass Through Options | Name | Type | Description | |------|------|-------------| | root | PassThroughOption | Used to pass attributes to the root's DOM element. | | panel | PassThroughOption | Used to pass attributes to the panel's DOM element. | | header | PassThroughOption | Used to pass attributes to the header's DOM element. | | headerContent | PassThroughOption | Used to pass attributes to the header content's DOM element. | | headerLink | PassThroughOption | Used to pass attributes to the header link's DOM element. | | submenuIcon | PassThroughOption | Used to pass attributes to the submenu icon's DOM element. | | headerIcon | PassThroughOption | Used to pass attributes to the header icon's DOM element. | | headerLabel | PassThroughOption | Used to pass attributes to the header label's DOM element. | | contentContainer | PassThroughOption | Used to pass attributes to the toggleable content's DOM element. | | contentWrapper | PassThroughOption | Used to pass attributes to the toggleable content's DOM element. | | content | PassThroughOption | Used to pass attributes to the menu content's DOM element. | | rootList | PassThroughOption | Used to pass attributes to the root list's DOM element. | | submenu | PassThroughOption | Used to pass attributes to the submenu's DOM element. | | item | PassThroughOption | Used to pass attributes to the item's DOM element. | | itemContent | PassThroughOption | Used to pass attributes to the item content's DOM element. | | itemLink | PassThroughOption | Used to pass attributes to the item link's DOM element. | | itemIcon | PassThroughOption | Used to pass attributes to the item icon's DOM element. | | itemLabel | PassThroughOption | Used to pass attributes to the item label's DOM element. | | separator | PassThroughOption | Used to pass attributes to the separator's DOM element. | | motion | MotionOptions | Used to pass options to the motion component/directive. | ## Theming ### CSS Classes | Class | Description | |-------|-------------| | p-panelmenu | Class name of the root element | | p-panelmenu-panel | Class name of the panel element | | p-panelmenu-header | Class name of the header element | | p-panelmenu-header-content | Class name of the header content element | | p-panelmenu-header-link | Class name of the header link element | | p-panelmenu-header-icon | Class name of the header icon element | | p-panelmenu-header-label | Class name of the header label element | | p-panelmenu-content-container | Class name of the content container element | | p-panelmenu-content | Class name of the content element | | p-panelmenu-root-list | Class name of the root list element | | p-panelmenu-item | Class name of the item element | | p-panelmenu-item-content | Class name of the item content element | | p-panelmenu-item-link | Class name of the item link element | | p-panelmenu-item-icon | Class name of the item icon element | | p-panelmenu-item-label | Class name of the item label element | | p-panelmenu-submenu-icon | Class name of the submenu icon element | | p-panelmenu-submenu | Class name of the submenu element | | p-menuitem-separator | | ### Design Tokens | Token | CSS Variable | Description | |-------|--------------|-------------| | panelmenu.gap | --p-panelmenu-gap | Gap of root | | panelmenu.transition.duration | --p-panelmenu-transition-duration | Transition duration of root | | panelmenu.panel.background | --p-panelmenu-panel-background | Background of panel | | panelmenu.panel.border.color | --p-panelmenu-panel-border-color | Border color of panel | | panelmenu.panel.border.width | --p-panelmenu-panel-border-width | Border width of panel | | panelmenu.panel.color | --p-panelmenu-panel-color | Color of panel | | panelmenu.panel.padding | --p-panelmenu-panel-padding | Padding of panel | | panelmenu.panel.border.radius | --p-panelmenu-panel-border-radius | Border radius of panel | | panelmenu.panel.first.border.width | --p-panelmenu-panel-first-border-width | First border width of panel | | panelmenu.panel.first.top.border.radius | --p-panelmenu-panel-first-top-border-radius | First top border radius of panel | | panelmenu.panel.last.border.width | --p-panelmenu-panel-last-border-width | Last border width of panel | | panelmenu.panel.last.bottom.border.radius | --p-panelmenu-panel-last-bottom-border-radius | Last bottom border radius of panel | | panelmenu.item.focus.background | --p-panelmenu-item-focus-background | Focus background of item | | panelmenu.item.color | --p-panelmenu-item-color | Color of item | | panelmenu.item.focus.color | --p-panelmenu-item-focus-color | Focus color of item | | panelmenu.item.gap | --p-panelmenu-item-gap | Gap of item | | panelmenu.item.padding | --p-panelmenu-item-padding | Padding of item | | panelmenu.item.border.radius | --p-panelmenu-item-border-radius | Border radius of item | | panelmenu.item.icon.color | --p-panelmenu-item-icon-color | Icon color of item | | panelmenu.item.icon.focus.color | --p-panelmenu-item-icon-focus-color | Icon focus color of item | | panelmenu.item.icon.size | --p-panelmenu-item-icon-size | Icon size of item | | panelmenu.item.label.font.weight | --p-panelmenu-item-label-font-weight | Font weight of item label | | panelmenu.item.label.font.size | --p-panelmenu-item-label-font-size | Font size of item label | | panelmenu.submenu.indent | --p-panelmenu-submenu-indent | Indent of submenu | | panelmenu.submenu.icon.color | --p-panelmenu-submenu-icon-color | Color of submenu icon | | panelmenu.submenu.icon.focus.color | --p-panelmenu-submenu-icon-focus-color | Focus color of submenu icon | --- # Angular Password Component Password displays strength indicator for password fields. ## Accessibility Screen Reader Value to describe the component can either be provided via label tag combined with id prop or using ariaLabelledBy , ariaLabel props. Screen reader is notified about the changes to the strength of the password using a section that has aria-live while typing. ## Basic Two-way value binding is defined using ngModel . **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { PasswordModule } from 'primeng/password'; @Component({ template: `
`, standalone: true, imports: [PasswordModule, FormsModule] }) export class PasswordBasicDemo { value!: string; } ``` ## Clear Icon When showClear is enabled, a clear icon is displayed to clear the value. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { PasswordModule } from 'primeng/password'; @Component({ template: `
`, standalone: true, imports: [PasswordModule, FormsModule] }) export class PasswordClearIconDemo { value!: string; } ``` ## Disabled When disabled is present, the element cannot be edited and focused. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { PasswordModule } from 'primeng/password'; @Component({ template: `
`, standalone: true, imports: [PasswordModule, FormsModule] }) export class PasswordDisabledDemo { value!: string; } ``` ## Filled Specify the variant property as filled to display the component with a higher visual emphasis than the default outlined style. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { PasswordModule } from 'primeng/password'; @Component({ template: `
`, standalone: true, imports: [PasswordModule, FormsModule] }) export class PasswordFilledDemo { value!: string; } ``` ## Float Label A floating label appears on top of the input field when focused. Visit FloatLabel documentation for more information. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { FloatLabelModule } from 'primeng/floatlabel'; import { PasswordModule } from 'primeng/password'; @Component({ template: `
`, standalone: true, imports: [FloatLabelModule, PasswordModule, FormsModule] }) export class PasswordFloatLabelDemo { value1!: string; value2!: string; value3!: string; } ``` ## Fluid The fluid prop makes the component take up the full width of its container when set to true. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { PasswordModule } from 'primeng/password'; @Component({ template: ` `, standalone: true, imports: [PasswordModule, FormsModule] }) export class PasswordFluidDemo { value!: string; } ``` ## Ifta Label IftaLabel is used to create infield top aligned labels. Visit IftaLabel documentation for more information. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { IftaLabelModule } from 'primeng/iftalabel'; import { PasswordModule } from 'primeng/password'; @Component({ template: `
`, standalone: true, imports: [IftaLabelModule, PasswordModule, FormsModule] }) export class PasswordIftaLabelDemo { value!: string; } ``` ## Invalid The invalid state is applied using the ⁠invalid property to indicate failed validation, which can be integrated with Angular Forms. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { PasswordModule } from 'primeng/password'; @Component({ template: `
`, standalone: true, imports: [PasswordModule, FormsModule] }) export class PasswordInvalidDemo { value1!: string; value2!: string; } ``` ## Locale Labels are translated at component level by promptLabel , weakLabel , mediumLabel and strongLabel properties. In order to apply global translations for all Password components in the application, refer to the locale **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { PasswordModule } from 'primeng/password'; @Component({ template: `
`, standalone: true, imports: [PasswordModule, FormsModule] }) export class PasswordLocaleDemo { value!: string; } ``` ## Meter Strength meter is displayed as a popup while a value is being entered. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { PasswordModule } from 'primeng/password'; @Component({ template: `
`, standalone: true, imports: [PasswordModule, FormsModule] }) export class PasswordMeterDemo { value!: string; } ``` ## reactiveforms-doc Password can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control. **Example:** ```typescript import { Component, inject } from '@angular/core'; import { ReactiveFormsModule } from '@angular/forms'; import { MessageModule } from 'primeng/message'; import { PasswordModule } from 'primeng/password'; import { ButtonModule } from 'primeng/button'; import { MessageService } from 'primeng/api'; @Component({ template: `
@if (isInvalid('value')) { Password is required. }
`, standalone: true, imports: [MessageModule, PasswordModule, ButtonModule, ReactiveFormsModule], providers: [MessageService] }) export class PasswordReactiveFormsDemo { private messageService = inject(MessageService); messageService = inject(MessageService); exampleForm: FormGroup | undefined; formSubmitted: boolean = false; constructor() { this.exampleForm = this.fb.group({ value: ['', Validators.required] }); } onSubmit() { this.formSubmitted = true; if (this.exampleForm.valid) { this.messageService.add({ severity: 'success', summary: 'Success', detail: 'Form is submitted', life: 3000 }); this.exampleForm.reset(); this.formSubmitted = false; } } isInvalid(controlName: string) { const control = this.exampleForm.get(controlName); return control?.invalid && (control.touched || this.formSubmitted); } } ``` ## Sizes Password provides small and large sizes as alternatives to the base. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { PasswordModule } from 'primeng/password'; @Component({ template: `
`, standalone: true, imports: [PasswordModule, FormsModule] }) export class PasswordSizesDemo { value1: string; value2: string; value3: string; } ``` ## Template 3 templates are included to customize the overlay. These are header , content and footer . Note that content overrides the default meter. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { DividerModule } from 'primeng/divider'; import { PasswordModule } from 'primeng/password'; @Component({ template: `
Reset Password
  • At least one lowercase
  • At least one uppercase
  • At least one numeric
  • Minimum 8 characters
`, standalone: true, imports: [DividerModule, PasswordModule, FormsModule] }) export class PasswordTemplateDemo { value!: string; } ``` ## templatedrivenforms-doc **Example:** ```typescript import { Component, inject } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { MessageModule } from 'primeng/message'; import { PasswordModule } from 'primeng/password'; import { ButtonModule } from 'primeng/button'; import { MessageService } from 'primeng/api'; @Component({ template: `
@if (model.invalid && (model.touched || exampleForm.submitted)) { Password is required. }
`, standalone: true, imports: [MessageModule, PasswordModule, ButtonModule, FormsModule], providers: [MessageService] }) export class PasswordTemplateDrivenFormsDemo { private messageService = inject(MessageService); messageService = inject(MessageService); value: any; onSubmit(form: any) { if (form.valid) { this.messageService.add({ severity: 'success', summary: 'Success', detail: 'Form Submitted', life: 3000 }); form.resetForm(); } } } ``` ## Toggle Mask When toggleMask is present, an icon is displayed to show the value as plain text. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { PasswordModule } from 'primeng/password'; @Component({ template: `
`, standalone: true, imports: [PasswordModule, FormsModule] }) export class PasswordToggleMaskDemo { value!: string; } ``` ## Password Directive Password directive. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | any | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | | required | boolean | false | There must be a value (if set). | | invalid | boolean | false | When present, it specifies that the component should have invalid state style. | | disabled | boolean | false | When present, it specifies that the component should have disabled state style. | | name | string | undefined | When present, it specifies that the name of the input. | | pPasswordPT | PassThrough> | undefined | Used to pass attributes to DOM elements inside the Password component. | | pPasswordUnstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | promptLabel | string | - | Text to prompt password entry. Defaults to PrimeNG I18N API configuration. | | weakLabel | string | - | Text for a weak password. Defaults to PrimeNG I18N API configuration. | | mediumLabel | string | - | Text for a medium password. Defaults to PrimeNG I18N API configuration. | | strongLabel | string | - | Text for a strong password. Defaults to PrimeNG I18N API configuration. | | feedback | boolean | - | Whether to show the strength indicator or not. | | showPassword | boolean | false | Sets the visibility of the password field. | | variant | "filled" \| "outlined" | 'outlined' | Specifies the input variant of the component. | | fluid | boolean | false | Spans 100% width of the container when enabled. | | size | "small" \| "large" | undefined | Specifies the size of the component. | ## Password Password displays strength indicator for password fields. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | | required | boolean | false | There must be a value (if set). | | invalid | boolean | false | When present, it specifies that the component should have invalid state style. | | disabled | boolean | false | When present, it specifies that the component should have disabled state style. | | name | string | undefined | When present, it specifies that the name of the input. | | fluid | boolean | false | Spans 100% width of the container when enabled. | | variant | "filled" \| "outlined" | 'outlined' | Specifies the input variant of the component. | | size | "small" \| "large" | undefined | Specifies the size of the component. | | inputSize | number | undefined | Specifies the visible width of the input element in characters. | | pattern | string | undefined | Specifies the value must match the pattern. | | min | number | undefined | The value must be greater than or equal to the value. | | max | number | undefined | The value must be less than or equal to the value. | | step | number | undefined | Unless the step is set to the any literal, the value must be min + an integral multiple of the step. | | minlength | number | undefined | The number of characters (code points) must not be less than the value of the attribute, if non-empty. | | maxlength | number | undefined | The number of characters (code points) must not exceed the value of the attribute. | | ariaLabel | string | - | Defines a string that labels the input for accessibility. | | ariaLabelledBy | string | - | Specifies one or more IDs in the DOM that labels the input field. | | label | string | - | Label of the input for accessibility. | | promptLabel | string | - | Text to prompt password entry. Defaults to PrimeNG I18N API configuration. | | mediumRegex | string | - | Regex value for medium regex. | | strongRegex | string | - | Regex value for strong regex. | | weakLabel | string | - | Text for a weak password. Defaults to PrimeNG I18N API configuration. | | mediumLabel | string | - | Text for a medium password. Defaults to PrimeNG I18N API configuration. | | strongLabel | string | - | Text for a strong password. Defaults to PrimeNG I18N API configuration. | | inputId | string | - | Identifier of the accessible input element. | | feedback | boolean | - | Whether to show the strength indicator or not. | | toggleMask | boolean | - | Whether to show an icon to display the password as plain text. | | inputStyleClass | string | - | Style class of the input field. | | inputStyle | Partial | - | Inline style of the input field. | | autocomplete | string | - | Specify automated assistance in filling out password by browser. | | placeholder | string | - | Advisory information to display on input. | | showClear | boolean | - | When enabled, a clear icon is displayed to clear the value. | | autofocus | boolean | - | When present, it specifies that the component should automatically get focus on load. | | tabindex | number | - | Index of the element in tabbing order. | | appendTo | HTMLElement \| ElementRef \| TemplateRef \| "self" \| "body" \| null \| undefined | 'self' | Target element to attach the overlay, valid values are "body" or a local ng-template variable of another element (note: use binding with brackets for template variables, e.g. [appendTo]="mydiv" for a div element having #mydiv as variable name). | | motionOptions | MotionOptions | - | The motion options. | | overlayOptions | OverlayOptions | - | Whether to use overlay API feature. The properties of overlay API can be used like an object in it. | ### Emits | Name | Parameters | Description | |------|------------|-------------| | onFocus | event: Event | Callback to invoke when the component receives focus. | | onBlur | event: Event | Callback to invoke when the component loses focus. | | onClear | value: void | Callback to invoke when clear button is clicked. | ### Templates | Name | Type | Description | |------|------|-------------| | content | TemplateRef | Custom template of content. | | footer | TemplateRef | Custom template of footer. | | header | TemplateRef | Custom template of header. | | clearicon | TemplateRef | Custom template of clear icon. | | hideicon | TemplateRef | Custom template of hide icon. | | showicon | TemplateRef | Custom template of show icon. | ## Pass Through Options | Name | Type | Description | |------|------|-------------| | host | PassThroughOption | Used to pass attributes to the host element. | | root | PassThroughOption | Used to pass attributes to the root's DOM element. | | pcInputText | InputTextPassThrough | Used to pass attributes to the InputText component. | | clearIcon | PassThroughOption | Used to pass attributes to the clear icon's DOM element. | | maskIcon | PassThroughOption | Used to pass attributes to the mask icon's DOM element. | | unmaskIcon | PassThroughOption | Used to pass attributes to the unmask icon's DOM element. | | pcOverlay | OverlayPassThrough | Used to pass attributes to the Overlay component. | | overlay | PassThroughOption | Used to pass attributes to the overlay's DOM element. | | content | PassThroughOption | Used to pass attributes to the content's DOM element. | | meter | PassThroughOption | Used to pass attributes to the meter's DOM element. | | meterLabel | PassThroughOption | Used to pass attributes to the meter label's DOM element. | | meterText | PassThroughOption | Used to pass attributes to the meter text's DOM element. | | motion | MotionOptions | Used to pass options to the motion component/directive. | ## Theming ### CSS Classes | Class | Description | |-------|-------------| | p-password | Class name of the root element | | p-password-input | Class name of the pt input element | | p-password-mask-icon | Class name of the mask icon element | | p-password-unmask-icon | Class name of the unmask icon element | | p-password-overlay | Class name of the overlay element | | p-password-meter | Class name of the meter element | | p-password-meter-label | Class name of the meter label element | | p-password-meter-text | Class name of the meter text element | | p-password-clear-icon | Class name of the clear icon | ### Design Tokens | Token | CSS Variable | Description | |-------|--------------|-------------| | password.meter.background | --p-password-meter-background | Background of meter | | password.meter.border.radius | --p-password-meter-border-radius | Border radius of meter | | password.meter.height | --p-password-meter-height | Height of meter | | password.icon.color | --p-password-icon-color | Color of icon | | password.overlay.background | --p-password-overlay-background | Background of overlay | | password.overlay.border.color | --p-password-overlay-border-color | Border color of overlay | | password.overlay.border.radius | --p-password-overlay-border-radius | Border radius of overlay | | password.overlay.color | --p-password-overlay-color | Color of overlay | | password.overlay.padding | --p-password-overlay-padding | Padding of overlay | | password.overlay.shadow | --p-password-overlay-shadow | Shadow of overlay | | password.content.gap | --p-password-content-gap | Gap of content | | password.meter.text.font.weight | --p-password-meter-text-font-weight | Font weight of meter text | | password.meter.text.font.size | --p-password-meter-text-font-size | Font size of meter text | | password.strength.weak.background | --p-password-strength-weak-background | Weak background of strength | | password.strength.medium.background | --p-password-strength-medium-background | Medium background of strength | | password.strength.strong.background | --p-password-strength-strong-background | Strong background of strength | --- # Angular PickList Component PickList is used to reorder items between different lists. ## Accessibility Screen Reader Value to describe the source listbox and target listbox can be provided with ariaLabelledBy or ariaLabel props. The list elements has a listbox role with the aria-multiselectable attribute. Each list item has an option role with aria-selected and aria-disabled as their attributes. Controls buttons are button elements with an aria-label that refers to the aria.moveTop , aria.moveUp , aria.moveDown , aria.moveBottom , aria.moveTo , aria.moveAllTo , aria.moveFrom and aria.moveAllFrom properties of the locale API by default, alternatively you may use moveTopButtonProps , moveUpButtonProps , moveDownButtonProps , moveToButtonProps , moveAllToButtonProps , moveFromButtonProps , moveFromButtonProps and moveAllFromButtonProps to customize the buttons like overriding the default aria-label attributes. PickList Keyboard Support Key Function tab Moves focus to the first selected option, if there is none then first option receives the focus. up arrow Moves focus to the previous option. down arrow Moves focus to the next option. enter Toggles the selected state of the focused option. space Toggles the selected state of the focused option. home Moves focus to the first option. end Moves focus to the last option. shift + down arrow Moves focus to the next option and toggles the selection state. shift + up arrow Moves focus to the previous option and toggles the selection state. shift + space Selects the items between the most recently selected option and the focused option. control + shift + home Selects the focused options and all the options up to the first one. control + shift + end Selects the focused options and all the options down to the first one. control + a Selects all options. Buttons Keyboard Support Key Function enter Executes button action. space Executes button action. ## Basic PickList is used as a controlled input with source and target properties. Content of a list item needs to be defined with the item template that receives an object in the list as parameter. Drag & drop functionality depends on @angular/cdk package. **Example:** ```typescript import { Component, OnInit, inject, signal } from '@angular/core'; import { PickListModule } from 'primeng/picklist'; import { ProductService } from '@/service/productservice'; import { Product } from '@/domain/product'; @Component({ template: ` {{ item.name }} `, standalone: true, imports: [PickListModule], providers: [ProductService] }) export class PickListBasicDemo implements OnInit { private productService = inject(ProductService); sourceProducts = signal([]); targetProducts = signal([]); ngOnInit() { this.carService.getProductsSmall().then((products) => { this.sourceProducts.set(products); }); } } ``` ## Filter Filter value is checked against the property of an object configured with the filterBy property. **Example:** ```typescript import { Component, OnInit, inject, signal } from '@angular/core'; import { PickListModule } from 'primeng/picklist'; import { ProductService } from '@/service/productservice'; import { Product } from '@/domain/product'; @Component({ template: `
{{ option.name }} {{ option.category }}
{{ '$' + option.price }}
`, standalone: true, imports: [PickListModule], providers: [ProductService] }) export class PickListFilterDemo implements OnInit { private productService = inject(ProductService); sourceProducts = signal([]); targetProducts = signal([]); ngOnInit() { this.carService.getProductsSmall().then((products) => { this.sourceProducts.set(products); }); } } ``` ## Template For custom content support define an item template that gets the item instance as a parameter. In addition sourceheader and targetheader templates are provided for further customization. **Example:** ```typescript import { Component, OnInit, inject, signal } from '@angular/core'; import { PickListModule } from 'primeng/picklist'; import { ProductService } from '@/service/productservice'; import { Product } from '@/domain/product'; @Component({ template: `
{{ option.name }} {{ option.category }}
{{ '$' + option.price }}
`, standalone: true, imports: [PickListModule], providers: [ProductService] }) export class PickListTemplateDemo implements OnInit { private productService = inject(ProductService); sourceProducts = signal([]); targetProducts = signal([]); ngOnInit() { this.carService.getProductsSmall().then((products) => { this.sourceProducts.set(products); }); } } ``` ## templates-doc **Example:** ```typescript import { Component } from '@angular/core'; @Component({ template: `
Name Parameters
item $implicit: Data of the item
index: Index of the item
sourceHeader -
targetHeader -
sourceFilter options.filter: Callback to filter data by the value param
options.reset: Resets the filters.
targetFilter options.filter: Callback to filter data by the value param
options.reset: Resets the filters
emptymessagesource -
emptyfiltermessagesource -
emptymessagetarget -
emptyfiltermessagetarget -
moveupicon -
movetopicon -
movedownicon -
movebottomicon -
movetotargeticon $implicit: viewChanged
movealltotargeticon $implicit: viewChanged
movetosourceicon $implicit: viewChanged
movealltosourceicon $implicit: viewChanged
targetfiltericon -
sourcefiltericon -
`, standalone: true, imports: [] }) export class PickListTemplatesDemo {} ``` ## Pick List PickList is used to reorder items between different lists. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | | source | any[] | - | An array of objects for the source list. | | target | any[] | - | An array of objects for the target list. | | dataKey | string | - | Name of the field that uniquely identifies the options. | | sourceHeader | string | - | Text for the source list caption | | tabindex | number | - | Index of the element in tabbing order. | | rightButtonAriaLabel | string | - | Defines a string that labels the move to right button for accessibility. | | leftButtonAriaLabel | string | - | Defines a string that labels the move to left button for accessibility. | | allRightButtonAriaLabel | string | - | Defines a string that labels the move to all right button for accessibility. | | allLeftButtonAriaLabel | string | - | Defines a string that labels the move to all left button for accessibility. | | upButtonAriaLabel | string | - | Defines a string that labels the move to up button for accessibility. | | downButtonAriaLabel | string | - | Defines a string that labels the move to down button for accessibility. | | topButtonAriaLabel | string | - | Defines a string that labels the move to top button for accessibility. | | bottomButtonAriaLabel | string | - | Defines a string that labels the move to bottom button for accessibility. | | sourceAriaLabel | string | - | Defines a string that labels the source list. | | targetAriaLabel | string | - | Defines a string that labels the target list. | | targetHeader | string | - | Text for the target list caption | | responsive | boolean | - | When enabled orderlist adjusts its controls based on screen size. | | filterBy | string | - | When specified displays an input field to filter the items on keyup and decides which field to search (Accepts multiple fields with a comma). | | filterLocale | string | - | Locale to use in filtering. The default locale is the host environment's current locale. | | trackBy | Function | - | Function to optimize the dom operations by delegating to ngForTrackBy, default algorithm checks for object identity. Use sourceTrackBy or targetTrackBy in case different algorithms are needed per list. | | sourceTrackBy | Function | - | Function to optimize the dom operations by delegating to ngForTrackBy in source list, default algorithm checks for object identity. | | targetTrackBy | Function | - | Function to optimize the dom operations by delegating to ngForTrackBy in target list, default algorithm checks for object identity. | | showSourceFilter | boolean | - | Whether to show filter input for source list when filterBy is enabled. | | showTargetFilter | boolean | - | Whether to show filter input for target list when filterBy is enabled. | | metaKeySelection | boolean | - | Defines how multiple items can be selected, when true metaKey needs to be pressed to select or unselect an item and when set to false selection of each item can be toggled individually. On touch enabled devices, metaKeySelection is turned off automatically. | | dragdrop | boolean | - | Whether to enable dragdrop based reordering. | | style | Partial | - | Inline style of the component. | | sourceStyle | Partial | - | Inline style of the source list element. | | targetStyle | Partial | - | Inline style of the target list element. | | showSourceControls | boolean | - | Whether to show buttons of source list. | | showTargetControls | boolean | - | Whether to show buttons of target list. | | sourceFilterPlaceholder | string | - | Placeholder text on source filter input. | | targetFilterPlaceholder | string | - | Placeholder text on target filter input. | | disabled | boolean | - | When present, it specifies that the component should be disabled. | | sourceOptionDisabled | string \| ((item: any) => boolean) | - | Name of the disabled field of a target option or function to determine disabled state. | | targetOptionDisabled | string \| ((item: any) => boolean) | - | Name of the disabled field of a target option or function to determine disabled state. | | ariaSourceFilterLabel | string | - | Defines a string that labels the filter input of source list. | | ariaTargetFilterLabel | string | - | Defines a string that labels the filter input of target list. | | filterMatchMode | "startsWith" \| "contains" \| "notContains" \| "endsWith" \| "equals" \| "notEquals" \| "in" \| "between" \| "lt" \| "lte" \| "gt" \| "gte" \| "is" \| "isNot" \| "before" \| "after" \| "dateIs" \| "dateIsNot" \| "dateBefore" \| "dateAfter" | - | Defines how the items are filtered. | | stripedRows | boolean | - | Whether to displays rows with alternating colors. | | keepSelection | boolean | - | Keeps selection on the transfer list. | | scrollHeight | string | - | Height of the viewport, a scrollbar is defined if height of list exceeds this value. | | autoOptionFocus | boolean | - | Whether to focus on the first visible or selected element. | | buttonProps | ButtonProps | - | Used to pass all properties of the ButtonProps to the Button component. | | moveUpButtonProps | ButtonProps | - | Used to pass all properties of the ButtonProps to the move up button inside the component. | | moveTopButtonProps | ButtonProps | - | Used to pass all properties of the ButtonProps to the move top button inside the component. | | moveDownButtonProps | ButtonProps | - | Used to pass all properties of the ButtonProps to the move down button inside the component. | | moveBottomButtonProps | ButtonProps | - | Used to pass all properties of the ButtonProps to the move bottom button inside the component. | | moveToTargetProps | ButtonProps | - | Used to pass all properties of the ButtonProps to the move to target button inside the component. | | moveAllToTargetProps | ButtonProps | - | Used to pass all properties of the ButtonProps to the move all to target button inside the component. | | moveToSourceProps | ButtonProps | - | Used to pass all properties of the ButtonProps to the move to source button inside the component. | | moveAllToSourceProps | ButtonProps | - | Used to pass all properties of the ButtonProps to the move all to source button inside the component. | | breakpoint | string | - | Indicates the width of the screen at which the component should change its behavior. | ### Emits | Name | Parameters | Description | |------|------------|-------------| | onMoveToSource | event: PickListMoveToSourceEvent | Callback to invoke when items are moved from target to source. | | onMoveAllToSource | event: PickListMoveAllToSourceEvent | Callback to invoke when all items are moved from target to source. | | onMoveAllToTarget | event: PickListMoveAllToTargetEvent | Callback to invoke when all items are moved from source to target. | | onMoveToTarget | event: PickListMoveToTargetEvent | Callback to invoke when items are moved from source to target. | | onSourceReorder | event: PickListSourceReorderEvent | Callback to invoke when items are reordered within source list. | | onTargetReorder | event: PickListTargetReorderEvent | Callback to invoke when items are reordered within target list. | | onSourceSelect | event: PickListSourceSelectEvent | Callback to invoke when items are selected within source list. | | onTargetSelect | event: PickListTargetSelectEvent | Callback to invoke when items are selected within target list. | | onSourceFilter | event: PickListSourceFilterEvent | Callback to invoke when the source list is filtered | | onTargetFilter | event: PickListTargetFilterEvent | Callback to invoke when the target list is filtered | | onFocus | event: Event | Callback to invoke when the list is focused | | onBlur | event: Event | Callback to invoke when the list is blurred | ### Templates | Name | Type | Description | |------|------|-------------| | item | TemplateRef | Custom item template. | | sourceheader | TemplateRef | Custom source header template. | | targetheader | TemplateRef | Custom target header template. | | sourcefilter | TemplateRef | Custom source filter template. | | targetfilter | TemplateRef | Custom target filter template. | | emptymessagesource | TemplateRef | Custom empty message when source is empty template. | | emptyfiltermessagesource | TemplateRef | Custom empty filter message when source is empty template. | | emptymessagetarget | TemplateRef | Custom empty message when target is empty template. | | emptyfiltermessagetarget | TemplateRef | Custom empty filter message when target is empty template. | | moveupicon | TemplateRef | Custom move up icon template. | | movetopicon | TemplateRef | Custom move top icon template. | | movedownicon | TemplateRef | Custom move down icon template. | | movebottomicon | TemplateRef | Custom move bottom icon template. | | movetotargeticon | TemplateRef | Custom move to target icon template. | | movealltotargeticon | TemplateRef | Custom move all to target icon template. | | movetosourceicon | TemplateRef | Custom move to source icon template. | | movealltosourceicon | TemplateRef | Custom move all to source icon template. | | targetfiltericon | TemplateRef | Custom target filter icon template. | | sourcefiltericon | TemplateRef | Custom source filter icon template. | ## Pass Through Options | Name | Type | Description | |------|------|-------------| | root | PassThroughOption | Used to pass attributes to the root's DOM element. | | sourceControls | PassThroughOption | Used to pass attributes to the source controls' DOM element. | | sourceListContainer | PassThroughOption | Used to pass attributes to the source list container's DOM element. | | transferControls | PassThroughOption | Used to pass attributes to the transfer controls' DOM element. | | targetListContainer | PassThroughOption | Used to pass attributes to the target list container's DOM element. | | targetControls | PassThroughOption | Used to pass attributes to the target controls' DOM element. | | pcSourceMoveUpButton | ButtonPassThrough | Used to pass attributes to the source move up Button component. | | pcSourceMoveTopButton | ButtonPassThrough | Used to pass attributes to the source move top Button component. | | pcSourceMoveDownButton | ButtonPassThrough | Used to pass attributes to the source move down Button component. | | pcSourceMoveBottomButton | ButtonPassThrough | Used to pass attributes to the source move bottom Button component. | | pcMoveToTargetButton | ButtonPassThrough | Used to pass attributes to the move to target Button component. | | pcMoveAllToTargetButton | ButtonPassThrough | Used to pass attributes to the move all to target Button component. | | pcMoveToSourceButton | ButtonPassThrough | Used to pass attributes to the move to source Button component. | | pcMoveAllToSourceButton | ButtonPassThrough | Used to pass attributes to the move all to source Button component. | | pcTargetMoveUpButton | ButtonPassThrough | Used to pass attributes to the target move up Button component. | | pcTargetMoveTopButton | ButtonPassThrough | Used to pass attributes to the target move top Button component. | | pcTargetMoveDownButton | ButtonPassThrough | Used to pass attributes to the target move down Button component. | | pcTargetMoveBottomButton | ButtonPassThrough | Used to pass attributes to the target move bottom Button component. | | pcListbox | ListBoxPassThrough | Used to pass attributes to the Listbox component. | ## Theming ### CSS Classes | Class | Description | |-------|-------------| | p-picklist | Class name of the root element | | p-picklist-source-controls | Class name of the source controls element | | p-picklist-source-list-container | Class name of the source list container element | | p-picklist-transfer-controls | Class name of the transfer controls element | | p-picklist-target-list-container | Class name of the target list container element | | p-picklist-target-controls | Class name of the target controls element | ### Design Tokens | Token | CSS Variable | Description | |-------|--------------|-------------| | picklist.gap | --p-picklist-gap | Gap of root | | picklist.controls.gap | --p-picklist-controls-gap | Gap of controls | --- # Angular Popover Component Popover is a container component that can overlay other components on page. ## Accessibility Screen Reader Popover component uses dialog role and since any attribute is passed to the root element you may define attributes like aria-label or aria-labelledby to describe the popup contents. In addition aria-modal is added since focus is kept within the popup. It is recommended to use a trigger component that can be accessed with keyboard such as a button, if not adding tabIndex would be necessary. Popover adds aria-expanded state attribute and aria-controls to the trigger so that the relation between the trigger and the popup is defined. Popover Keyboard Support When the popup gets opened, the first focusable element receives the focus and this can be customized by adding autofocus to an element within the popup. Key Function tab Moves focus to the next the focusable element within the popup. shift + tab Moves focus to the previous the focusable element within the popup. escape Closes the popup and moves focus to the trigger. Close Button Keyboard Support Key Function enter Closes the popup and moves focus to the trigger. space Closes the popup and moves focus to the trigger. ## Basic Popover is accessed via its reference and visibility is controlled using toggle , show and hide methods with an event of the target. **Example:** ```typescript import { Component } from '@angular/core'; import { ButtonModule } from 'primeng/button'; import { InputGroupModule } from 'primeng/inputgroup'; import { PopoverModule } from 'primeng/popover'; import { InputTextModule } from 'primeng/inputtext'; @Component({ template: `
Share this document
Invite Member
Team Members
    @for (member of members; track member) {
  • {{ member.name }}
    {{ member.email }}
    {{ member.role }}
    • }
`, standalone: true, imports: [ButtonModule, InputGroupModule, PopoverModule, InputTextModule] }) export class PopoverBasicDemo { members: any[] = [ { name: 'Amy Elsner', image: 'amyelsner.png', email: 'amy@email.com', role: 'Owner' }, { name: 'Bernardo Dominic', image: 'bernardodominic.png', email: 'bernardo@email.com', role: 'Editor' }, { name: 'Ioni Bowcher', image: 'ionibowcher.png', email: 'ioni@email.com', role: 'Viewer' } ]; } ``` ## DataTable Place the Popover outside of the data iteration components to avoid rendering it multiple times. **Example:** ```typescript import { Component, OnInit, inject, signal } from '@angular/core'; import { ButtonModule } from 'primeng/button'; import { Popover, PopoverModule } from 'primeng/popover'; import { TableModule } from 'primeng/table'; import { TagModule } from 'primeng/tag'; import { ProductService } from '@/service/productservice'; import { MessageService } from 'primeng/api'; import { Product } from '@/domain/product'; @Component({ template: ` Id Code Name Price Image Details {{ product.id }} {{ product.code }} {{ product.name }} $ {{ product.price }} @if (selectedProduct()) {
{{ selectedProduct().category }}
{{ selectedProduct().name }}
{{ selectedProduct().rating }}
} `, standalone: true, imports: [ButtonModule, PopoverModule, TableModule, TagModule], providers: [ProductService, MessageService] }) export class PopoverDataTableDemo implements OnInit { private productService = inject(ProductService); private messageService = inject(MessageService); products = signal([]); selectedProduct = signal(null); ngOnInit() { this.productService.getProductsSmall().then((products) => { this.products.set(products); }); } displayProduct(event, product) { if (this.selectedProduct()?.id === product.id) { this.op.hide(); this.selectedProduct.set(null); } else { this.selectedProduct.set(product); this.op.show(event); if (this.op.container) { this.op.align(); } } } hidePopover() { this.op.hide(); } getSeverity(product) { switch (product.inventoryStatus) { case 'INSTOCK': return 'success'; case 'LOWSTOCK': return 'warn'; case 'OUTOFSTOCK': return 'danger'; default: return null; } } } ``` ## Select Data In this sample, data is retrieved from the content inside the popover. **Example:** ```typescript import { Component } from '@angular/core'; import { ButtonModule } from 'primeng/button'; import { Popover, PopoverModule } from 'primeng/popover'; @Component({ template: `
Team Members
    @for (member of members; track member.name) {
  • {{ member.name }}
    {{ member.email }}
    • }
`, standalone: true, imports: [ButtonModule, PopoverModule] }) export class PopoverSelectDataDemo { selectedMember: any = null; members: any[] = [ { name: 'Amy Elsner', image: 'amyelsner.png', email: 'amy@email.com', role: 'Owner' }, { name: 'Bernardo Dominic', image: 'bernardodominic.png', email: 'bernardo@email.com', role: 'Editor' }, { name: 'Ioni Bowcher', image: 'ionibowcher.png', email: 'ioni@email.com', role: 'Viewer' } ]; toggle(event) { this.op.toggle(event); } selectMember(member) { this.selectedMember = member; this.op.hide(); } } ``` ## Target show method takes two parameters, first one is the event and it is mandatory. By default the target component to align the overlay is the event target, if you'd like to align it to another element, provide it as the second parameter target . **Example:** ```typescript import { Component } from '@angular/core'; import { ButtonModule } from 'primeng/button'; import { PopoverModule } from 'primeng/popover'; @Component({ template: `
Target Element
product
`, standalone: true, imports: [ButtonModule, PopoverModule] }) export class PopoverTargetDemo {} ``` ## Template Content of the OverlayPanel is defined by content template. **Example:** ```typescript import { Component } from '@angular/core'; import { ButtonModule } from 'primeng/button'; import { PopoverModule } from 'primeng/popover'; import { OverlayPanel } from 'primeng/overlaypanel'; @Component({ template: `

Custom Content
`, standalone: true, imports: [ButtonModule, PopoverModule] }) export class PopoverTemplateDemo {} ``` ## Popover Popover is a container component that can overlay other components on page. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | | ariaLabel | string | - | Defines a string that labels the input for accessibility. | | ariaLabelledBy | string | - | Establishes relationships between the component and label(s) where its value should be one or more element IDs. | | dismissable | boolean | - | Enables to hide the overlay when outside is clicked. | | style | Partial | - | Inline style of the component. | | styleClass | string | - | Style class of the component. | | appendTo | HTMLElement \| ElementRef \| TemplateRef \| "self" \| "body" \| null \| undefined | 'body' | Target element to attach the overlay, valid values are "body" or a local ng-template variable of another element (note: use binding with brackets for template variables, e.g. [appendTo]="mydiv" for a div element having #mydiv as variable name). | | autoZIndex | boolean | - | Whether to automatically manage layering. | | ariaCloseLabel | string | - | Aria label of the close icon. | | baseZIndex | number | - | Base zIndex value to use in layering. | | focusOnShow | boolean | - | When enabled, first button receives focus on show. | | motionOptions | MotionOptions | - | The motion options. | ### Emits | Name | Parameters | Description | |------|------------|-------------| | onShow | value: any | Callback to invoke when an overlay becomes visible. | | onHide | value: any | Callback to invoke when an overlay gets hidden. | ### Templates | Name | Type | Description | |------|------|-------------| | content | TemplateRef | Custom content template. | ### Methods | Name | Parameters | Return Type | Description | |------|------------|-------------|-------------| | toggle | event: any, target: any | void | Toggles the visibility of the panel. | | show | event: any, target: any | void | Displays the panel. | | hide | | void | Hides the panel. | ## Pass Through Options | Name | Type | Description | |------|------|-------------| | host | PassThroughOption | Used to pass attributes to the host's DOM element. | | root | PassThroughOption | Used to pass attributes to the root's DOM element. | | content | PassThroughOption | Used to pass attributes to the content's DOM element. | | motion | MotionOptions | Used to pass options to the motion component/directive. | ## Theming ### Design Tokens | Token | CSS Variable | Description | |-------|--------------|-------------| | popover.background | --p-popover-background | Background of root | | popover.border.color | --p-popover-border-color | Border color of root | | popover.color | --p-popover-color | Color of root | | popover.border.radius | --p-popover-border-radius | Border radius of root | | popover.shadow | --p-popover-shadow | Shadow of root | | popover.gutter | --p-popover-gutter | Gutter of root | | popover.arrow.offset | --p-popover-arrow-offset | Arrow offset of root | | popover.content.padding | --p-popover-content-padding | Padding of content | --- # Angular ProgressBar Component ProgressBar is a process status indicator. ## Accessibility Screen Reader ProgressBar components uses progressbar role along with aria-valuemin , aria-valuemax and aria-valuenow attributes. Value to describe the component can be defined using aria-labelledby and aria-label props. ## Basic ProgressBar is used with the value property. **Example:** ```typescript import { Component } from '@angular/core'; import { ProgressBarModule } from 'primeng/progressbar'; @Component({ template: ` `, standalone: true, imports: [ProgressBarModule] }) export class ProgressBarBasicDemo {} ``` ## Dynamic Value is reactive so updating it dynamically changes the bar as well. **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { ProgressBarModule } from 'primeng/progressbar'; import { MessageService } from 'primeng/api'; @Component({ template: ` `, standalone: true, imports: [ProgressBarModule], providers: [MessageService] }) export class ProgressBarDynamicDemo implements OnInit { private messageService = inject(MessageService); value: number = 0; interval: any; ngOnInit() { this.ngZone.runOutsideAngular(() => { this.interval = setInterval(() => { this.ngZone.run(() => { this.value = this.value + Math.floor(Math.random() * 10) + 1; if (this.value >= 100) { this.value = 100; this.messageService.add({ severity: 'info', summary: 'Success', detail: 'Process Completed' }); clearInterval(this.interval); } }); }, 2000); }); } ngOnDestroy() { if (this.interval) { clearInterval(this.interval); } } } ``` ## Indeterminate For progresses with no value to track, set the mode property to indeterminate . **Example:** ```typescript import { Component, inject } from '@angular/core'; import { ProgressBarModule } from 'primeng/progressbar'; import { MessageService } from 'primeng/api'; @Component({ template: ` `, standalone: true, imports: [ProgressBarModule], providers: [MessageService] }) export class ProgressBarIndeterminateDemo { private messageService = inject(MessageService); } ``` ## Template content template allows displaying custom content inside the progressbar. **Example:** ```typescript import { Component } from '@angular/core'; import { ProgressBarModule } from 'primeng/progressbar'; @Component({ template: ` {{ value }}/100 `, standalone: true, imports: [ProgressBarModule] }) export class ProgressBarTemplateDemo {} ``` ## Progress Bar ProgressBar is a process status indicator. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | | value | number | - | Current value of the progress. | | showValue | boolean | - | Whether to display the progress bar value. | | valueStyleClass | string | - | Style class of the value element. | | unit | string | - | Unit sign appended to the value. | | mode | "determinate" \| "indeterminate" | 'determinate' | Defines the mode of the progress | | color | string | - | Color for the background of the progress. | ### Templates | Name | Type | Description | |------|------|-------------| | content | TemplateRef | Template of the content. | ## Pass Through Options | Name | Type | Description | |------|------|-------------| | host | PassThroughOption | Used to pass attributes to the host's DOM element. | | root | PassThroughOption | Used to pass attributes to the root's DOM element. | | value | PassThroughOption | Used to pass attributes to the value's DOM element. | | label | PassThroughOption | Used to pass attributes to the label's DOM element. | ## Theming ### CSS Classes | Class | Description | |-------|-------------| | p-progressbar | Class name of the root element | | p-progressbar-value | Class name of the value element | | p-progressbar-label | Class name of the label element | ### Design Tokens | Token | CSS Variable | Description | |-------|--------------|-------------| | progressbar.background | --p-progressbar-background | Background of root | | progressbar.border.radius | --p-progressbar-border-radius | Border radius of root | | progressbar.height | --p-progressbar-height | Height of root | | progressbar.value.background | --p-progressbar-value-background | Background of value | | progressbar.label.color | --p-progressbar-label-color | Color of label | | progressbar.label.font.size | --p-progressbar-label-font-size | Font size of label | | progressbar.label.font.weight | --p-progressbar-label-font-weight | Font weight of label | --- # Angular ProgressSpinner Component ProgressSpinner is a process status indicator. ## Accessibility Screen Reader ProgressSpinner components uses progressbar role. Value to describe the component can be defined using aria-labelledby and aria-label props. ## Basic An infinite spin animation is displayed by default. **Example:** ```typescript import { Component } from '@angular/core'; @Component({ template: `
`, standalone: true, imports: [] }) export class ProgressSpinnerBasicDemo {} ``` ## Custom ProgressSpinner can be customized with styling property like strokeWidth and fill . **Example:** ```typescript import { Component } from '@angular/core'; @Component({ template: `
`, standalone: true, imports: [] }) export class ProgressSpinnerCustomDemo {} ``` ## Progress Spinner ProgressSpinner is a process status indicator. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | | strokeWidth | string | - | Width of the circle stroke. | | fill | string | - | Color for the background of the circle. | | animationDuration | string | - | Duration of the rotate animation. | | ariaLabel | string | - | Used to define a aria label attribute the current element. | ## Pass Through Options | Name | Type | Description | |------|------|-------------| | host | PassThroughOption | Used to pass attributes to the host's DOM element. | | root | PassThroughOption | Used to pass attributes to the root's DOM element. | | spin | PassThroughOption | Used to pass attributes to the spin's DOM element. | | circle | PassThroughOption | Used to pass attributes to the circle's DOM element. | ## Theming ### CSS Classes | Class | Description | |-------|-------------| | p-progressspinner | Class name of the root element | | p-progressspinner-spin | Class name of the spin element | | p-progressspinner-circle | Class name of the circle element | ### Design Tokens | Token | CSS Variable | Description | |-------|--------------|-------------| | progressspinner.color.one | --p-progressspinner-color-one | Color one of root | | progressspinner.color.two | --p-progressspinner-color-two | Color two of root | | progressspinner.color.three | --p-progressspinner-color-three | Color three of root | | progressspinner.color.four | --p-progressspinner-color-four | Color four of root | --- # Angular RadioButton Component RadioButton is an extension to standard radio button element with theming. ## Accessibility Screen Reader RadioButton component uses a hidden native radio button element internally that is only visible to screen readers. Value to describe the component can either be provided via label tag combined with inputId prop or using ariaLabelledBy , ariaLabel props. ## Disabled When disabled is present, the element cannot be edited and focused. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { RadioButtonModule } from 'primeng/radiobutton'; @Component({ template: `
`, standalone: true, imports: [RadioButtonModule, FormsModule] }) export class RadioButtonDisabledDemo { value: number = 2; } ``` ## Dynamic RadioButtons can be generated using a list of values. **Example:** ```typescript import { Component, OnInit } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { RadioButtonModule } from 'primeng/radiobutton'; @Component({ template: `
@for (category of categories; track category.key) {
}
`, standalone: true, imports: [RadioButtonModule, FormsModule] }) export class RadioButtonDynamicDemo implements OnInit { selectedCategory: any = null; categories: any[] = [ { name: 'Accounting', key: 'A' }, { name: 'Marketing', key: 'M' }, { name: 'Production', key: 'P' }, { name: 'Research', key: 'R' } ]; ngOnInit() { this.selectedCategory = this.categories[1]; } } ``` ## Filled Specify the variant property as filled to display the component with a higher visual emphasis than the default outlined style. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { RadioButtonModule } from 'primeng/radiobutton'; @Component({ template: `
`, standalone: true, imports: [RadioButtonModule, FormsModule] }) export class RadioButtonFilledDemo { checked: boolean = false; } ``` ## Group RadioButton is used as a controlled input with value and ngModel properties. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { RadioButtonModule } from 'primeng/radiobutton'; @Component({ template: `
`, standalone: true, imports: [RadioButtonModule, FormsModule] }) export class RadioButtonGroupDemo { ingredient!: string; } ``` ## Invalid The invalid state is applied using the ⁠invalid property to indicate failed validation, which can be integrated with Angular Forms. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { RadioButtonModule } from 'primeng/radiobutton'; @Component({ template: `
`, standalone: true, imports: [RadioButtonModule, FormsModule] }) export class RadioButtonInvalidDemo { value: boolean = false; } ``` ## reactiveforms-doc RadioButton can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control. **Example:** ```typescript import { Component, inject } from '@angular/core'; import { ReactiveFormsModule } from '@angular/forms'; import { MessageModule } from 'primeng/message'; import { RadioButtonModule } from 'primeng/radiobutton'; import { ButtonModule } from 'primeng/button'; import { MessageService } from 'primeng/api'; @Component({ template: `
@for (category of categories; track category.key) {
}
@if (isInvalid('selectedCategory')) { At least one ingredient must be selected. }
`, standalone: true, imports: [MessageModule, RadioButtonModule, ButtonModule, ReactiveFormsModule], providers: [MessageService] }) export class RadioButtonReactiveFormsDemo { private messageService = inject(MessageService); messageService = inject(MessageService); formSubmitted: boolean = false; exampleForm: FormGroup; categories: any[] = [ { name: 'Cheese', key: 'C' }, { name: 'Mushroom', key: 'M' }, { name: 'Pepper', key: 'P' }, { name: 'Onion', key: 'O' } ]; constructor() { this.exampleForm = this.fb.group({ selectedCategory: ['', Validators.required] }); } isInvalid(controlName: string) { const control = this.exampleForm.get(controlName); return control?.invalid && this.formSubmitted; } onSubmit() { this.formSubmitted = true; if (this.exampleForm.valid) { this.messageService.add({ severity: 'success', summary: 'Success', detail: 'Form is submitted', life: 3000 }); this.exampleForm.reset(); this.formSubmitted = false; } } } ``` ## Sizes RadioButton provides small and large sizes as alternatives to the base. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { RadioButtonModule } from 'primeng/radiobutton'; @Component({ template: `
`, standalone: true, imports: [RadioButtonModule, FormsModule] }) export class RadioButtonSizesDemo { size: any = false; } ``` ## templatedrivenforms-doc **Example:** ```typescript import { Component, inject } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { MessageModule } from 'primeng/message'; import { RadioButtonModule } from 'primeng/radiobutton'; import { ButtonModule } from 'primeng/button'; import { MessageService } from 'primeng/api'; @Component({ template: `
@for (category of categories; track category.name) {
}
@if (isInvalid(exampleForm)) { At least one ingredient must be selected. }
`, standalone: true, imports: [MessageModule, RadioButtonModule, ButtonModule, FormsModule], providers: [MessageService] }) export class RadioButtonTemplateDrivenFormsDemo { private messageService = inject(MessageService); messageService = inject(MessageService); formSubmitted: boolean = false; ingredient!: any; categories: any[] = [ { name: 'Cheese', key: 'C' }, { name: 'Mushroom', key: 'M' }, { name: 'Pepper', key: 'P' }, { name: 'Onion', key: 'O' } ]; isInvalid(form: NgForm) { return !this.ingredient && form.submitted; } onSubmit(form: NgForm) { if (!this.isInvalid(form)) { this.messageService.add({ severity: 'success', summary: 'Success', detail: 'Form Submitted', life: 3000 }); form.resetForm(); } } } ``` ## Radio Button RadioButton is an extension to standard radio button element with theming. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | | required | boolean | false | There must be a value (if set). | | invalid | boolean | false | When present, it specifies that the component should have invalid state style. | | disabled | boolean | false | When present, it specifies that the component should have disabled state style. | | name | string | undefined | When present, it specifies that the name of the input. | | value | any | - | Value of the radiobutton. | | tabindex | number | - | Index of the element in tabbing order. | | inputId | string | - | Identifier of the focus input to match a label defined for the component. | | ariaLabelledBy | string | - | Establishes relationships between the component and label(s) where its value should be one or more element IDs. | | ariaLabel | string | - | Used to define a string that labels the input element. | | autofocus | boolean | - | When present, it specifies that the component should automatically get focus on load. | | binary | boolean | - | Allows to select a boolean value. | | variant | "filled" \| "outlined" | undefined | Specifies the input variant of the component. | | size | "small" \| "large" | undefined | Specifies the size of the component. | ### Emits | Name | Parameters | Description | |------|------------|-------------| | onClick | event: RadioButtonClickEvent | Callback to invoke on radio button click. | | onFocus | event: Event | Callback to invoke when the receives focus. | | onBlur | event: Event | Callback to invoke when the loses focus. | ### Methods | Name | Parameters | Return Type | Description | |------|------------|-------------|-------------| | focus | | void | Applies focus to input field. | ## Pass Through Options | Name | Type | Description | |------|------|-------------| | root | PassThroughOption | Used to pass attributes to the root's DOM element. | | input | PassThroughOption | Used to pass attributes to the input's DOM element. | | box | PassThroughOption | Used to pass attributes to the box's DOM element. | | icon | PassThroughOption | Used to pass attributes to the icon's DOM element. | ## Theming ### CSS Classes | Class | Description | |-------|-------------| | p-radiobutton | Class name of the root element | | p-radiobutton-box | Class name of the box element | | p-radiobutton-input | Class name of the input element | | p-radiobutton-icon | Class name of the icon element | ### Design Tokens | Token | CSS Variable | Description | |-------|--------------|-------------| | radiobutton.width | --p-radiobutton-width | Width of root | | radiobutton.height | --p-radiobutton-height | Height of root | | radiobutton.background | --p-radiobutton-background | Background of root | | radiobutton.checked.background | --p-radiobutton-checked-background | Checked background of root | | radiobutton.checked.hover.background | --p-radiobutton-checked-hover-background | Checked hover background of root | | radiobutton.disabled.background | --p-radiobutton-disabled-background | Disabled background of root | | radiobutton.filled.background | --p-radiobutton-filled-background | Filled background of root | | radiobutton.border.color | --p-radiobutton-border-color | Border color of root | | radiobutton.hover.border.color | --p-radiobutton-hover-border-color | Hover border color of root | | radiobutton.focus.border.color | --p-radiobutton-focus-border-color | Focus border color of root | | radiobutton.checked.border.color | --p-radiobutton-checked-border-color | Checked border color of root | | radiobutton.checked.hover.border.color | --p-radiobutton-checked-hover-border-color | Checked hover border color of root | | radiobutton.checked.focus.border.color | --p-radiobutton-checked-focus-border-color | Checked focus border color of root | | radiobutton.checked.disabled.border.color | --p-radiobutton-checked-disabled-border-color | Checked disabled border color of root | | radiobutton.invalid.border.color | --p-radiobutton-invalid-border-color | Invalid border color of root | | radiobutton.shadow | --p-radiobutton-shadow | Shadow of root | | radiobutton.focus.ring.width | --p-radiobutton-focus-ring-width | Focus ring width of root | | radiobutton.focus.ring.style | --p-radiobutton-focus-ring-style | Focus ring style of root | | radiobutton.focus.ring.color | --p-radiobutton-focus-ring-color | Focus ring color of root | | radiobutton.focus.ring.offset | --p-radiobutton-focus-ring-offset | Focus ring offset of root | | radiobutton.focus.ring.shadow | --p-radiobutton-focus-ring-shadow | Focus ring shadow of root | | radiobutton.transition.duration | --p-radiobutton-transition-duration | Transition duration of root | | radiobutton.sm.width | --p-radiobutton-sm-width | Sm width of root | | radiobutton.sm.height | --p-radiobutton-sm-height | Sm height of root | | radiobutton.lg.width | --p-radiobutton-lg-width | Lg width of root | | radiobutton.lg.height | --p-radiobutton-lg-height | Lg height of root | | radiobutton.icon.size | --p-radiobutton-icon-size | Size of icon | | radiobutton.icon.checked.color | --p-radiobutton-icon-checked-color | Checked color of icon | | radiobutton.icon.checked.hover.color | --p-radiobutton-icon-checked-hover-color | Checked hover color of icon | | radiobutton.icon.disabled.color | --p-radiobutton-icon-disabled-color | Disabled color of icon | | radiobutton.icon.sm.size | --p-radiobutton-icon-sm-size | Sm size of icon | | radiobutton.icon.lg.size | --p-radiobutton-icon-lg-size | Lg size of icon | --- # Angular Rating Component Rating component is a star based selection input. ## Accessibility Screen Reader Rating component internally uses radio buttons that are only visible to screen readers. The value to read for item is retrieved from the locale API via star and stars of the aria property. ## Basic Two-way value binding is defined using ngModel . **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { RatingModule } from 'primeng/rating'; @Component({ template: `
`, standalone: true, imports: [RatingModule, FormsModule] }) export class RatingBasicDemo { value!: number; } ``` ## Disabled When disabled is present, a visual hint is applied to indicate that the Knob cannot be interacted with. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { RatingModule } from 'primeng/rating'; @Component({ template: `
`, standalone: true, imports: [RatingModule, FormsModule] }) export class RatingDisabledDemo { value: number = 5; } ``` ## Number of Stars Number of stars to display is defined with stars property. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { RatingModule } from 'primeng/rating'; @Component({ template: `
`, standalone: true, imports: [RatingModule, FormsModule] }) export class RatingNumberOfStarsDemo { value: number = 5; } ``` ## reactiveforms-doc Rating can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control. **Example:** ```typescript import { Component, inject } from '@angular/core'; import { ReactiveFormsModule } from '@angular/forms'; import { MessageModule } from 'primeng/message'; import { RatingModule } from 'primeng/rating'; import { ButtonModule } from 'primeng/button'; import { MessageService } from 'primeng/api'; @Component({ template: `
@if (isInvalid('ratingValue')) { Value is required. }
`, standalone: true, imports: [MessageModule, RatingModule, ButtonModule, ReactiveFormsModule], providers: [MessageService] }) export class RatingReactiveFormsDemo { private messageService = inject(MessageService); messageService = inject(MessageService); exampleForm: FormGroup | undefined; formSubmitted: boolean = false; constructor() { this.exampleForm = this.fb.group({ ratingValue: [undefined, Validators.required] }); } onSubmit() { this.formSubmitted = true; if (this.exampleForm.valid) { this.messageService.add({ severity: 'success', summary: 'Success', detail: 'Form Submitted', life: 3000 }); this.exampleForm.reset(); this.formSubmitted = false; } } isInvalid(controlName: string) { const control = this.exampleForm.get(controlName); return control?.invalid && (control.touched || this.formSubmitted); } } ``` ## Readonly When readonly present, value cannot be edited. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { RatingModule } from 'primeng/rating'; @Component({ template: `
`, standalone: true, imports: [RatingModule, FormsModule] }) export class RatingReadonlyDemo { value: number = 3; } ``` ## Template Templating allows customizing the content where the icon instance is available as the implicit variable. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { RatingModule } from 'primeng/rating'; @Component({ template: `
`, standalone: true, imports: [RatingModule, FormsModule] }) export class RatingTemplateDemo { value!: number; } ``` ## templatedrivenforms-doc **Example:** ```typescript import { Component, inject } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { MessageModule } from 'primeng/message'; import { RatingModule } from 'primeng/rating'; import { ButtonModule } from 'primeng/button'; import { MessageService } from 'primeng/api'; @Component({ template: `
@if (ratingValue.invalid && (ratingValue.touched || exampleForm.submitted)) { Value is required. }
`, standalone: true, imports: [MessageModule, RatingModule, ButtonModule, FormsModule], providers: [MessageService] }) export class RatingTemplateDrivenFormsDemo { private messageService = inject(MessageService); messageService = inject(MessageService); value: any; onSubmit(form: any) { if (form.valid) { this.messageService.add({ severity: 'success', summary: 'Success', detail: 'Form Submitted', life: 3000 }); form.resetForm(); } } } ``` ## withoutcancel-doc A cancel icon is displayed to reset the value by default, set cancel as false to remove this option. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { RatingModule } from 'primeng/rating'; @Component({ template: `
`, standalone: true, imports: [RatingModule, FormsModule] }) export class RatingWithoutCancelDemo { value!: number; } ``` ## Rating Rating is an extension to standard radio button element with theming. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | | required | boolean | false | There must be a value (if set). | | invalid | boolean | false | When present, it specifies that the component should have invalid state style. | | disabled | boolean | false | When present, it specifies that the component should have disabled state style. | | name | string | undefined | When present, it specifies that the name of the input. | | readonly | boolean | - | When present, changing the value is not possible. | | stars | number | - | Number of stars. | | iconOnClass | string | - | Style class of the on icon. | | iconOnStyle | Partial | - | Inline style of the on icon. | | iconOffClass | string | - | Style class of the off icon. | | iconOffStyle | Partial | - | Inline style of the off icon. | | autofocus | boolean | - | When present, it specifies that the component should automatically get focus on load. | ### Emits | Name | Parameters | Description | |------|------------|-------------| | onRate | event: RatingRateEvent | Emitted on value change. | | onFocus | event: FocusEvent | Emitted when the rating receives focus. | | onBlur | event: FocusEvent | Emitted when the rating loses focus. | ### Templates | Name | Type | Description | |------|------|-------------| | onicon | TemplateRef | Custom on icon template. | | officon | TemplateRef | Custom off icon template. | ## Pass Through Options | Name | Type | Description | |------|------|-------------| | host | PassThroughOption | Used to pass attributes to the host's DOM element. | | root | PassThroughOption | Used to pass attributes to the root's DOM element. | | option | PassThroughOption | Used to pass attributes to the option's DOM element. | | onIcon | PassThroughOption | Used to pass attributes to the on icon's DOM element. | | offIcon | PassThroughOption | Used to pass attributes to the off icon's DOM element. | | hiddenOptionInputContainer | PassThroughOption | Used to pass attributes to the hidden option input container's DOM element. | | hiddenOptionInput | PassThroughOption | Used to pass attributes to the hidden option input's DOM element. | ## Theming ### CSS Classes | Class | Description | |-------|-------------| | p-rating | Class name of the root element | | p-rating-option | Class name of the option element | | p-rating-on-icon | Class name of the on icon element | | p-rating-off-icon | Class name of the off icon element | ### Design Tokens | Token | CSS Variable | Description | |-------|--------------|-------------| | rating.gap | --p-rating-gap | Gap of root | | rating.transition.duration | --p-rating-transition-duration | Transition duration of root | | rating.focus.ring.width | --p-rating-focus-ring-width | Focus ring width of root | | rating.focus.ring.style | --p-rating-focus-ring-style | Focus ring style of root | | rating.focus.ring.color | --p-rating-focus-ring-color | Focus ring color of root | | rating.focus.ring.offset | --p-rating-focus-ring-offset | Focus ring offset of root | | rating.focus.ring.shadow | --p-rating-focus-ring-shadow | Focus ring shadow of root | | rating.icon.size | --p-rating-icon-size | Size of icon | | rating.icon.color | --p-rating-icon-color | Color of icon | | rating.icon.hover.color | --p-rating-icon-hover-color | Hover color of icon | | rating.icon.active.color | --p-rating-icon-active-color | Active color of icon | --- # Angular Ripple Component Ripple directive adds ripple effect to the host element. ## Accessibility Screen Reader Ripple element has the aria-hidden attribute as true so that it gets ignored by the screen readers. Keyboard Support Component does not include any interactive elements. ## Custom Styling Demo Content. **Example:** ```typescript import { Component } from '@angular/core'; import { RippleModule } from 'primeng/ripple'; @Component({ template: `
Ripple option at the configurator needs to be turned on for the demo.
Green
Orange
Purple
`, standalone: true, imports: [RippleModule] }) export class RippleCustomDemo {} ``` ## Default Default Demo Content. **Example:** ```typescript import { Component } from '@angular/core'; import { RippleModule } from 'primeng/ripple'; @Component({ template: `
Ripple option at the configurator needs to be turned on for the demo.
Default
`, standalone: true, imports: [RippleModule] }) export class RippleDefaultDemo {} ``` ## Ripple Ripple directive adds ripple effect to the host element. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | any | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | ## Theming ### CSS Classes | Class | Description | |-------|-------------| | p-ink | Class name of the root element | ### Design Tokens | Token | CSS Variable | Description | |-------|--------------|-------------| | ripple.background | --p-ripple-background | Background of root | --- # Angular Virtual Scroller Component VirtualScroller is a performance-approach to handle huge data efficiently. ## Accessibility Screen Reader VirtualScroller uses a semantic list element to list the items. No specific role is enforced, still you may use any aria role and attributes as any valid attribute is passed to the container element. Keyboard Support Component does not include any built-in interactive elements. ## Basic VirtualScroller requires items as the data to display, itemSize for the dimensions of an item and item template are required on component. In addition, an initial array is required based on the total number of items to display. Size of the viewport is configured using scrollWidth , scrollHeight properties directly or with CSS width and height styles. ## Delay Scroll delay is adjusted by using delay property. ## Grid Scrolling can be enabled vertically and horizontally when orientation is set as both . In this mode, itemSize should be an array where first value is the height of an item and second is the width. ## Horizontal Setting orientation to horizontal enables scrolling horizontally. In this case, the itemSize should refer to the width of an item. ## lazyload-doc Lazy mode is handy to deal with large datasets where instead of loading the entire data, small chunks of data are loaded on demand by invoking onLazyLoad callback everytime scrolling requires a new chunk. To implement lazy loading, enable lazy attribute, initialize your data as a placeholder with a length and finally implement a method callback using onLazyLoad that actually loads a chunk from a datasource. onLazyLoad gets an event object that contains information about the chunk of data to load such as the index and number of items to load. Notice that a new template called loadingItem is also required to display as a placeholder while the new items are being loaded. ## loader-doc Busy state is enabled by adding showLoader property which blocks the UI with a modal by default. Alternatively, loader template can be used to customize items e.g. with Skeleton . ## Programmatic Scrolling to a specific index can be done with the scrollToIndex function. ## Scroll Options The properties of scroller component can be used like an object in it. ## Template Scroller content is customizable by using ng-template . Valid values are content , item , loader and loadericon ## Scroller Scroller is a performance-approach to handle huge data efficiently. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | | id | string | - | Unique identifier of the element. | | style | any | - | Inline style of the component. | | styleClass | string | - | Style class of the element. | | tabindex | number | - | Index of the element in tabbing order. | | items | any[] | - | An array of objects to display. | | itemSize | number \| number[] | - | The height/width of item according to orientation. | | scrollHeight | string | - | Height of the scroll viewport. | | scrollWidth | string | - | Width of the scroll viewport. | | orientation | "both" \| "vertical" \| "horizontal" | - | The orientation of scrollbar. | | step | number | - | Used to specify how many items to load in each load method in lazy mode. | | delay | number | - | Delay in scroll before new data is loaded. | | resizeDelay | number | - | Delay after window's resize finishes. | | appendOnly | boolean | - | Used to append each loaded item to top without removing any items from the DOM. Using very large data may cause the browser to crash. | | inline | boolean | - | Specifies whether the scroller should be displayed inline or not. | | lazy | boolean | - | Defines if data is loaded and interacted with in lazy manner. | | disabled | boolean | - | If disabled, the scroller feature is eliminated and the content is displayed directly. | | loaderDisabled | boolean | - | Used to implement a custom loader instead of using the loader feature in the scroller. | | columns | any[] | - | Columns to display. | | showSpacer | boolean | - | Used to implement a custom spacer instead of using the spacer feature in the scroller. | | showLoader | boolean | - | Defines whether to show loader. | | numToleratedItems | any | - | Determines how many additional elements to add to the DOM outside of the view. According to the scrolls made up and down, extra items are added in a certain algorithm in the form of multiples of this number. Default value is half the number of items shown in the view. | | loading | boolean | - | Defines whether the data is loaded. | | autoSize | boolean | - | Defines whether to dynamically change the height or width of scrollable container. | | trackBy | Function | - | Function to optimize the dom operations by delegating to ngForTrackBy, default algoritm checks for object identity. | | options | ScrollerOptions | - | Defines whether to use the scroller feature. The properties of scroller component can be used like an object in it. | ### Emits | Name | Parameters | Description | |------|------------|-------------| | onLazyLoad | event: ScrollerLazyLoadEvent | Callback to invoke in lazy mode to load new data. | | onScroll | event: ScrollerScrollEvent | Callback to invoke when scroll position changes. | | onScrollIndexChange | event: ScrollerScrollIndexChangeEvent | Callback to invoke when scroll position and item's range in view changes. | ### Templates | Name | Type | Description | |------|------|-------------| | content | TemplateRef | Content template of the component. | | item | TemplateRef | Item template of the component. | | loader | TemplateRef | Loader template of the component. | | loadericon | TemplateRef | Loader icon template of the component. | ## Pass Through Options | Name | Type | Description | |------|------|-------------| | host | PassThroughOption | Used to pass attributes to the host's DOM element. | | root | PassThroughOption | Used to pass attributes to the root's DOM element. | | content | PassThroughOption | Used to pass attributes to the content's DOM element. | | spacer | PassThroughOption | Used to pass attributes to the spacer's DOM element. | | loader | PassThroughOption | Used to pass attributes to the loader's DOM element. | | loadingIcon | PassThroughOption | Used to pass attributes to the loading icon's DOM element. | ## Theming ### CSS Classes | Class | Description | |-------|-------------| | p-virtualscroller | Class name of the root element | | p-virtualscroller-content | Class name of the content element | | p-virtualscroller-spacer | Class name of the spacer element | | p-virtualscroller-loader | Class name of the loader element | | p-virtualscroller-loading-icon | Class name of the loading icon element | --- # Angular Scroll Panel Component ScrollPanel is a cross browser, lightweight and skinnable alternative to native browser scrollbar. ## Accessibility Screen Reader Scrollbars of the ScrollPanel has a scrollbar role along with the aria-controls attribute that refers to the id of the scrollable content container and the aria-orientation to indicate the orientation of scrolling. Header Keyboard Support Key Function down arrow Scrolls content down when vertical scrolling is available. up arrow Scrolls content up when vertical scrolling is available. left Scrolls content left when horizontal scrolling is available. right Scrolls content right when horizontal scrolling is available. ## Basic ScrollPanel is defined using dimensions for the scrollable viewport. **Example:** ```typescript import { Component } from '@angular/core'; import { ScrollPanelModule } from 'primeng/scrollpanel'; @Component({ template: `

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.

`, standalone: true, imports: [ScrollPanelModule] }) export class ScrollPanelBasicDemo {} ``` ## Custom Scrollbar visuals can be styled for a unified look across different platforms. **Example:** ```typescript import { Component } from '@angular/core'; import { ScrollPanelModule } from 'primeng/scrollpanel'; @Component({ template: `

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.

`, standalone: true, imports: [ScrollPanelModule] }) export class ScrollPanelCustomDemo {} ``` ## Scroll Panel ScrollPanel is a cross browser, lightweight and themable alternative to native browser scrollbar. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | | step | number | - | Step factor to scroll the content while pressing the arrow keys. | ### Templates | Name | Type | Description | |------|------|-------------| | content | TemplateRef | Custom content template. | ### Methods | Name | Parameters | Return Type | Description | |------|------------|-------------|-------------| | scrollTop | scrollTop: number | void | Scrolls the top location to the given value. | | refresh | | void | Refreshes the position and size of the scrollbar. | ## Pass Through Options | Name | Type | Description | |------|------|-------------| | root | PassThroughOption | Used to pass attributes to the root's DOM element. | | contentContainer | PassThroughOption | Used to pass attributes to the content container's DOM element. | | content | PassThroughOption | Used to pass attributes to the content's DOM element. | | barX | PassThroughOption | Used to pass attributes to the horizontal panel's DOM element. | | barY | PassThroughOption | Used to pass attributes to the vertical panel's DOM element. | ## Theming ### CSS Classes | Class | Description | |-------|-------------| | p-scrollpanel | Class name of the root element | | p-scrollpanel-content-container | Class name of the content container element | | p-scrollpanel-content | Class name of the content element | | p-scrollpanel-bar-x | Class name of the bar x element | | p-scrollpanel-bar-y | Class name of the bar y element | ### Design Tokens | Token | CSS Variable | Description | |-------|--------------|-------------| | scrollpanel.transition.duration | --p-scrollpanel-transition-duration | Transition duration of root | | scrollpanel.bar.size | --p-scrollpanel-bar-size | Size of bar | | scrollpanel.bar.border.radius | --p-scrollpanel-bar-border-radius | Border radius of bar | | scrollpanel.bar.focus.ring.width | --p-scrollpanel-bar-focus-ring-width | Focus ring width of bar | | scrollpanel.bar.focus.ring.style | --p-scrollpanel-bar-focus-ring-style | Focus ring style of bar | | scrollpanel.bar.focus.ring.color | --p-scrollpanel-bar-focus-ring-color | Focus ring color of bar | | scrollpanel.bar.focus.ring.offset | --p-scrollpanel-bar-focus-ring-offset | Focus ring offset of bar | | scrollpanel.bar.focus.ring.shadow | --p-scrollpanel-bar-focus-ring-shadow | Focus ring shadow of bar | | scrollpanel.bar.background | --p-scrollpanel-bar-background | Background of bar | --- # Angular Scroll Top Component ScrollTop gets displayed after a certain scroll position and used to navigates to the top of the page quickly. ## Accessibility Screen Reader ScrollTop uses a button element with an aria-label that refers to the aria.scrollTop property of the locale API by default, you may use your own aria roles and attributes as any valid attribute is passed to the button element implicitly. ## Basic ScrollTop listens window scroll by default. **Example:** ```typescript import { Component } from '@angular/core'; import { ScrollTopModule } from 'primeng/scrolltop'; @Component({ template: `

Scroll down the page to display the ScrollTo component.

`, standalone: true, imports: [ScrollTopModule] }) export class ScrollTopBasicDemo {} ``` ## Target Element Setting the target property to parent binds ScrollTop to its parent element that has scrolling content. **Example:** ```typescript import { Component } from '@angular/core'; import { ScrollTopModule } from 'primeng/scrolltop'; @Component({ template: `

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae et leo duis ut diam. Ultricies mi quis hendrerit dolor magna eget est lorem. Amet consectetur adipiscing elit ut. Nam libero justo laoreet sit amet. Pharetra massa massa ultricies mi quis hendrerit dolor magna. Est ultricies integer quis auctor elit sed vulputate. Consequat ac felis donec et. Tellus orci ac auctor augue mauris. Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Tincidunt arcu non sodales neque sodales. Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices. Sodales ut etiam sit amet nisl purus. Cursus sit amet dictum sit amet. Tristique senectus et netus et malesuada fames ac turpis egestas. Et tortor consequat id porta nibh venenatis cras sed. Diam maecenas ultricies mi eget mauris. Eget egestas purus viverra accumsan in nisl nisi. Suscipit adipiscing bibendum est ultricies integer. Mattis aliquam faucibus purus in massa tempor nec.

`, standalone: true, imports: [ScrollTopModule] }) export class ScrollTopElementDemo {} ``` ## Scroll Top ScrollTop gets displayed after a certain scroll position and used to navigates to the top of the page quickly. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | | styleClass | string | - | Class of the element. | | style | Partial | - | Inline style of the element. | | target | "window" \| "parent" | - | Target of the ScrollTop. | | threshold | number | - | Defines the threshold value of the vertical scroll position of the target to toggle the visibility. | | _icon | string | - | Name of the icon or JSX.Element for icon. | | behavior | "auto" \| "smooth" | - | Defines the scrolling behavior, "smooth" adds an animation and "auto" scrolls with a jump. | | motionOptions | MotionOptions | - | The motion options. | | buttonAriaLabel | string | - | Establishes a string value that labels the scroll-top button. | | buttonProps | ButtonProps | - | Used to pass all properties of the ButtonProps to the Button component. | ### Templates | Name | Type | Description | |------|------|-------------| | icon | TemplateRef | Custom icon template. | ## Pass Through Options | Name | Type | Description | |------|------|-------------| | host | PassThroughOption | Used to pass attributes to the host's DOM element. | | root | PassThroughOption | Used to pass attributes to the root's DOM element. | | pcButton | ButtonPassThrough | Used to pass attributes to the Button component. | | motion | MotionOptions | Used to pass options to the motion component/directive. | ## Theming ### CSS Classes | Class | Description | |-------|-------------| | p-scrolltop | Class name of the root element | | p-scrolltop-icon | Class name of the icon element | --- # Angular Select Component Select is used to choose an item from a collection of options. ## Accessibility Screen Reader Value to describe the component can either be provided with ariaLabelledBy or ariaLabel props. The select element has a combobox role in addition to aria-haspopup and aria-expanded attributes. If the editable option is enabled aria-autocomplete is also added. The relation between the combobox and the popup is created with aria-controls and aria-activedescendant attribute is used to instruct screen reader which option to read during keyboard navigation within the popup list. The popup list has an id that refers to the aria-controls attribute of the combobox element and uses listbox as the role. Each list item has an option role, an id to match the aria-activedescendant of the input element along with aria-label , aria-selected and aria-disabled attributes. If filtering is enabled, filterInputProps can be defined to give aria-* props to the filter input element. ## Basic Select is used as a controlled component with ngModel property along with an options collection. Label and value of an option are defined with the optionLabel and optionValue properties respectively. Note that, when options are simple primitive values such as a string array, no optionLabel and optionValue would be necessary. **Example:** ```typescript import { Component, OnInit } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { SelectModule } from 'primeng/select'; interface City { name: string; code: string; } @Component({ template: `
`, standalone: true, imports: [SelectModule, FormsModule] }) export class SelectBasicDemo implements OnInit { cities: City[]; selectedCity: City | undefined; ngOnInit() { this.cities = [ { name: 'New York', code: 'NY' }, { name: 'Rome', code: 'RM' }, { name: 'London', code: 'LDN' }, { name: 'Istanbul', code: 'IST' }, { name: 'Paris', code: 'PRS' } ]; } } ``` ## checkboxselection-doc Multiple selection with checkboxes using multiple and custom #item and #header templates. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { CheckboxModule } from 'primeng/checkbox'; import { SelectModule } from 'primeng/select'; interface City { name: string; code: string; } @Component({ template: `
{{ getLabel() }}
{{ city.name }}
`, standalone: true, imports: [CheckboxModule, SelectModule, FormsModule] }) export class SelectCheckboxSelectionDemo { cities: City[] = [ { name: 'New York', code: 'NY' }, { name: 'Rome', code: 'RM' }, { name: 'London', code: 'LDN' }, { name: 'Istanbul', code: 'IST' }, { name: 'Paris', code: 'PRS' } ]; selectedCities: string[] = []; getLabel(): string { if (this.selectedCities.length === 0) return ''; const first = this.cities.find((c) => c.code === this.selectedCities[0])?.name ?? this.selectedCities[0]; return this.selectedCities.length > 1 ? `${first} (+${this.selectedCities.length - 1} more)` : first; } isItemSelected(city: City): boolean { return this.selectedCities.includes(city.code); } onToggleAll(checked: boolean) { this.selectedCities = checked ? this.cities.map((c) => c.code) : []; } } ``` ## Checkmark An alternative way to highlight the selected option is displaying a checkmark instead. **Example:** ```typescript import { Component, OnInit } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { SelectModule } from 'primeng/select'; interface City { name: string; code: string; } @Component({ template: `
`, standalone: true, imports: [SelectModule, FormsModule] }) export class SelectCheckMarkDemo implements OnInit { cities: City[]; selectedCity: City | undefined; ngOnInit() { this.cities = [ { name: 'New York', code: 'NY' }, { name: 'Rome', code: 'RM' }, { name: 'London', code: 'LDN' }, { name: 'Istanbul', code: 'IST' }, { name: 'Paris', code: 'PRS' } ]; } } ``` ## Chip Selected items displayed as chips using a custom #selectedItem template in multiple mode. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { ChipModule } from 'primeng/chip'; import { SelectModule } from 'primeng/select'; interface Member { name: string; code: string; avatar: string; } @Component({ template: `
{{ member.name }}
@for (code of selected; track code) { }
`, standalone: true, imports: [ChipModule, SelectModule, FormsModule] }) export class SelectChipDemo { members: Member[] = [ { name: 'Amy Elsner', code: 'AE', avatar: 'https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png' }, { name: 'Anna Fali', code: 'AF', avatar: 'https://primefaces.org/cdn/primevue/images/avatar/annafali.png' }, { name: 'Asiya Javayant', code: 'AJ', avatar: 'https://primefaces.org/cdn/primevue/images/avatar/asiyajavayant.png' }, { name: 'Bernardo Dominic', code: 'BD', avatar: 'https://primefaces.org/cdn/primevue/images/avatar/bernardodominic.png' }, { name: 'Elwin Sharvill', code: 'ES', avatar: 'https://primefaces.org/cdn/primevue/images/avatar/elwinsharvill.png' }, { name: 'Ioni Bowcher', code: 'IB', avatar: 'https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png' }, { name: 'Ivan Magalhaes', code: 'IM', avatar: 'https://primefaces.org/cdn/primevue/images/avatar/ivanmagalhaes.png' }, { name: 'Stephen Shaw', code: 'SS', avatar: 'https://primefaces.org/cdn/primevue/images/avatar/stephenshaw.png' } ]; selected: string[] = []; getFirstName(code: string): string { const member = this.members.find((m) => m.code === code); return member ? member.name.split(' ')[0] : code; } getAvatar(code: string): string { return this.members.find((m) => m.code === code)?.avatar ?? ''; } removeItem(event: MouseEvent, code: string) { event.stopPropagation(); this.selected = this.selected.filter((c) => c !== code); } } ``` ## Clear Icon When showClear is enabled, a clear icon is displayed to clear the value. **Example:** ```typescript import { Component, OnInit } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { SelectModule } from 'primeng/select'; interface City { name: string; code: string; } @Component({ template: `
`, standalone: true, imports: [SelectModule, FormsModule] }) export class SelectClearIconDemo implements OnInit { cities: City[]; selectedCity: City | undefined; ngOnInit() { this.cities = [ { name: 'New York', code: 'NY' }, { name: 'Rome', code: 'RM' }, { name: 'London', code: 'LDN' }, { name: 'Istanbul', code: 'IST' }, { name: 'Paris', code: 'PRS' } ]; } } ``` ## customfilter-doc Custom filter can be applied with the filterTemplate . **Example:** ```typescript import { Component, OnInit } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { ButtonModule } from 'primeng/button'; import { SelectModule } from 'primeng/select'; import { InputGroupModule } from 'primeng/inputgroup'; import { InputTextModule } from 'primeng/inputtext'; import { Country } from '@/domain/customer'; interface City { name: string; code: string; } @Component({ template: `
{{ selectedOption.name }}
{{ country.name }}
`, standalone: true, imports: [ButtonModule, SelectModule, InputGroupModule, InputTextModule, FormsModule] }) export class SelectCustomFilterDemo implements OnInit { countries: City[] | undefined; selectedCountry: string | undefined; filterValue: string | undefined = ''; ngOnInit() { this.countries = [ { name: 'Australia', code: 'AU' }, { name: 'Brazil', code: 'BR' }, { name: 'China', code: 'CN' }, { name: 'Egypt', code: 'EG' }, { name: 'France', code: 'FR' }, { name: 'Germany', code: 'DE' }, { name: 'India', code: 'IN' }, { name: 'Japan', code: 'JP' }, { name: 'Spain', code: 'ES' }, { name: 'United States', code: 'US' } ]; } resetFunction(options: SelectFilterOptions) { options.reset(); this.filterValue = ''; } customFilterFunction(event: KeyboardEvent, options: SelectFilterOptions) { options.filter(event); } } ``` ## Disabled When disabled is present, the element cannot be edited and focused. **Example:** ```typescript import { Component, OnInit } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { SelectModule } from 'primeng/select'; interface City { name: string; code: string; } @Component({ template: `
`, standalone: true, imports: [SelectModule, FormsModule] }) export class SelectDisabledDemo implements OnInit { cities: City[] | undefined; selectedCity: City | undefined; ngOnInit() { this.cities = [ { name: 'New York', code: 'NY' }, { name: 'Rome', code: 'RM' }, { name: 'London', code: 'LDN' }, { name: 'Istanbul', code: 'IST' }, { name: 'Paris', code: 'PRS' } ]; } } ``` ## Editable When editable is present, the input can also be entered with typing. **Example:** ```typescript import { Component, OnInit } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { SelectModule } from 'primeng/select'; interface City { name: string; code: string; } @Component({ template: `
`, standalone: true, imports: [SelectModule, FormsModule] }) export class SelectEditableDemo implements OnInit { cities: City[] | undefined; selectedCity: City | undefined; ngOnInit() { this.cities = [ { name: 'New York', code: 'NY' }, { name: 'Rome', code: 'RM' }, { name: 'London', code: 'LDN' }, { name: 'Istanbul', code: 'IST' }, { name: 'Paris', code: 'PRS' } ]; } } ``` ## Filled Specify the variant property as filled to display the component with a higher visual emphasis than the default outlined style. **Example:** ```typescript import { Component, OnInit } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { SelectModule } from 'primeng/select'; interface City { name: string; code: string; } @Component({ template: `
`, standalone: true, imports: [SelectModule, FormsModule] }) export class SelectFilledDemo implements OnInit { cities: City[]; selectedCity: City | undefined; ngOnInit() { this.cities = [ { name: 'New York', code: 'NY' }, { name: 'Rome', code: 'RM' }, { name: 'London', code: 'LDN' }, { name: 'Istanbul', code: 'IST' }, { name: 'Paris', code: 'PRS' } ]; } } ``` ## Filter Select provides built-in filtering that is enabled by adding the filter property. **Example:** ```typescript import { Component, OnInit } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { SelectModule } from 'primeng/select'; import { Country } from '@/domain/customer'; @Component({ template: `
{{ selectedOption.name }}
{{ country.name }}
`, standalone: true, imports: [SelectModule, FormsModule] }) export class SelectFilterDemo implements OnInit { countries: any[] | undefined; selectedCountry: string | undefined; ngOnInit() { this.countries = [ { name: 'Australia', code: 'AU' }, { name: 'Brazil', code: 'BR' }, { name: 'China', code: 'CN' }, { name: 'Egypt', code: 'EG' }, { name: 'France', code: 'FR' }, { name: 'Germany', code: 'DE' }, { name: 'India', code: 'IN' }, { name: 'Japan', code: 'JP' }, { name: 'Spain', code: 'ES' }, { name: 'United States', code: 'US' } ]; } } ``` ## Float Label A floating label appears on top of the input field when focused. Visit FloatLabel documentation for more information. **Example:** ```typescript import { Component, OnInit } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { SelectModule } from 'primeng/select'; import { FloatLabelModule } from 'primeng/floatlabel'; interface City { name: string; code: string; } @Component({ template: `
`, standalone: true, imports: [SelectModule, FloatLabelModule, FormsModule] }) export class SelectFloatLabelDemo implements OnInit { cities: City[] | undefined; value1: City | undefined; value2: City | undefined; value3: City | undefined; ngOnInit() { this.cities = [ { name: 'New York', code: 'NY' }, { name: 'Rome', code: 'RM' }, { name: 'London', code: 'LDN' }, { name: 'Istanbul', code: 'IST' }, { name: 'Paris', code: 'PRS' } ]; } } ``` ## Fluid The fluid prop makes the component take up the full width of its container when set to true. **Example:** ```typescript import { Component, OnInit } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { SelectModule } from 'primeng/select'; interface City { name: string; code: string; } @Component({ template: ` `, standalone: true, imports: [SelectModule, FormsModule] }) export class SelectFluidDemo implements OnInit { cities: City[]; selectedCity: City | undefined; ngOnInit() { this.cities = [ { name: 'New York', code: 'NY' }, { name: 'Rome', code: 'RM' }, { name: 'London', code: 'LDN' }, { name: 'Istanbul', code: 'IST' }, { name: 'Paris', code: 'PRS' } ]; } } ``` ## Group Options can be grouped when a nested data structures is provided. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { SelectModule } from 'primeng/select'; import { SelectItemGroup } from 'primeng/api'; @Component({ template: `
{{ group.label }}
`, standalone: true, imports: [SelectModule, FormsModule] }) export class SelectGroupDemo { groupedCities: SelectItemGroup[]; selectedCity: string | undefined; constructor() { this.groupedCities = [ { label: 'Germany', value: 'de', items: [ { label: 'Berlin', value: 'Berlin' }, { label: 'Frankfurt', value: 'Frankfurt' }, { label: 'Hamburg', value: 'Hamburg' }, { label: 'Munich', value: 'Munich' } ] }, { label: 'USA', value: 'us', items: [ { label: 'Chicago', value: 'Chicago' }, { label: 'Los Angeles', value: 'Los Angeles' }, { label: 'New York', value: 'New York' }, { label: 'San Francisco', value: 'San Francisco' } ] }, { label: 'Japan', value: 'jp', items: [ { label: 'Kyoto', value: 'Kyoto' }, { label: 'Osaka', value: 'Osaka' }, { label: 'Tokyo', value: 'Tokyo' }, { label: 'Yokohama', value: 'Yokohama' } ] } ]; } } ``` ## Ifta Label IftaLabel is used to create infield top aligned labels. Visit IftaLabel documentation for more information. **Example:** ```typescript import { Component, OnInit } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { SelectModule } from 'primeng/select'; import { IftaLabelModule } from 'primeng/iftalabel'; interface City { name: string; code: string; } @Component({ template: `
`, standalone: true, imports: [SelectModule, IftaLabelModule, FormsModule] }) export class SelectIftaLabelDemo implements OnInit { cities: City[] | undefined; selectedCity: City | undefined; ngOnInit() { this.cities = [ { name: 'New York', code: 'NY' }, { name: 'Rome', code: 'RM' }, { name: 'London', code: 'LDN' }, { name: 'Istanbul', code: 'IST' }, { name: 'Paris', code: 'PRS' } ]; } } ``` ## Invalid The invalid state is applied using the ⁠invalid property to indicate failed validation, which can be integrated with Angular Forms. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { SelectModule } from 'primeng/select'; interface City { name: string; code: string; } @Component({ template: `
`, standalone: true, imports: [SelectModule, FormsModule] }) export class SelectInvalidDemo { cities: City[] = [ { name: 'New York', code: 'NY' }, { name: 'Rome', code: 'RM' }, { name: 'London', code: 'LDN' }, { name: 'Istanbul', code: 'IST' }, { name: 'Paris', code: 'PRS' } ]; selectedCity1: City | undefined; selectedCity2: City | undefined; value1: boolean = true; value2: boolean = true; } ``` ## Lazy Virtual Scroll **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { SelectModule } from 'primeng/select'; import { SelectItem } from 'primeng/api'; @Component({ template: `
`, standalone: true, imports: [SelectModule, FormsModule] }) export class SelectLazyVirtualScrollDemo { items: SelectItem[]; selectedItem: string | undefined; loading: boolean = false; loadLazyTimeout: any = null; options: ScrollerOptions = { delay: 250, showLoader: true, lazy: true, onLazyLoad: this.onLazyLoad.bind(this) }; constructor() { this.items = []; for (let i = 0; i < 10000; i++) { this.items.push({ label: 'Item ' + i, value: 'Item ' + i }); } } onLazyLoad(event) { this.loading = true; if (this.loadLazyTimeout) { clearTimeout(this.loadLazyTimeout); } //imitate delay of a backend call this.loadLazyTimeout = setTimeout( () => { const { first, last } = event; const items = [...this.items]; for (let i = first; i < last; i++) { items[i] = { label: `Item #${i}`, value: i }; } this.items = items; this.loading = false; }, Math.random() * 1000 + 250 ); } } ``` ## Loading State Loading state can be used loading property. **Example:** ```typescript import { Component, OnInit } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { SelectModule } from 'primeng/select'; interface City { name: string; code: string; } @Component({ template: `
`, standalone: true, imports: [SelectModule, FormsModule] }) export class SelectLoadingStateDemo implements OnInit { cities: City[]; selectedCity: City | undefined; ngOnInit() { this.cities = [ { name: 'New York', code: 'NY' }, { name: 'Rome', code: 'RM' }, { name: 'London', code: 'LDN' }, { name: 'Istanbul', code: 'IST' }, { name: 'Paris', code: 'PRS' } ]; } } ``` ## Multiple When multiple is enabled, multiple items can be selected. Use checkmark to display a check indicator and a custom #selectedItem template for the label. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { SelectModule } from 'primeng/select'; interface Topping { label: string; value: string; } @Component({ template: `
{{ getLabel() }}
`, standalone: true, imports: [SelectModule, FormsModule] }) export class SelectMultipleDemo { toppings: Topping[] = [ { label: 'Pepperoni', value: 'pepperoni' }, { label: 'Mushrooms', value: 'mushrooms' }, { label: 'Onions', value: 'onions' }, { label: 'Black Olives', value: 'olives' }, { label: 'Green Peppers', value: 'peppers' }, { label: 'Mozzarella', value: 'mozzarella' }, { label: 'Basil', value: 'basil' }, { label: 'Tomatoes', value: 'tomatoes' } ]; selected: string[] = []; getLabel(): string { if (this.selected.length === 0) return ''; const first = this.toppings.find((t) => t.value === this.selected[0])?.label ?? this.selected[0]; return this.selected.length > 1 ? `${first} (+${this.selected.length - 1} more)` : first; } } ``` ## reactiveforms-doc Select can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control. **Example:** ```typescript import { Component, inject } from '@angular/core'; import { ReactiveFormsModule } from '@angular/forms'; import { SelectModule } from 'primeng/select'; import { MessageModule } from 'primeng/message'; import { ButtonModule } from 'primeng/button'; import { MessageService } from 'primeng/api'; interface City { name: string; code: string; } @Component({ template: `
@if (isInvalid('city')) { City is required. }
`, standalone: true, imports: [SelectModule, MessageModule, ButtonModule, ReactiveFormsModule] }) export class SelectReactiveFormsDemo { messageService = inject(MessageService); cities: City[] = [ { name: 'New York', code: 'NY' }, { name: 'Rome', code: 'RM' }, { name: 'London', code: 'LDN' }, { name: 'Istanbul', code: 'IST' }, { name: 'Paris', code: 'PRS' } ]; exampleForm: FormGroup | undefined; formSubmitted: boolean = false; constructor() { this.exampleForm = this.fb.group({ city: ['', Validators.required] }); } onSubmit() { this.formSubmitted = true; if (this.exampleForm.valid) { this.messageService.add({ severity: 'success', summary: 'Success', detail: 'Form is submitted', life: 3000 }); this.exampleForm.reset(); this.formSubmitted = false; } } isInvalid(controlName: string) { const control = this.exampleForm.get(controlName); return control?.invalid && (control.touched || this.formSubmitted); } } ``` ## Sizes Select provides small and large sizes as alternatives to the base. **Example:** ```typescript import { Component, OnInit } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { SelectModule } from 'primeng/select'; interface City { name: string; code: string; } @Component({ template: `
`, standalone: true, imports: [SelectModule, FormsModule] }) export class SelectSizesDemo implements OnInit { value1: City | undefined; value2: City | undefined; value3: City | undefined; cities: City[]; ngOnInit() { this.cities = [ { name: 'New York', code: 'NY' }, { name: 'Rome', code: 'RM' }, { name: 'London', code: 'LDN' }, { name: 'Istanbul', code: 'IST' }, { name: 'Paris', code: 'PRS' } ]; } } ``` ## Template Both the selected option and the options list can be templated to provide customizated representation. Use selectedItem template to customize the selected label display and the item template to change the content of the options in the select panel. In addition when grouping is enabled, group template is available to customize the option groups. All templates get the option instance as the default local template variable. **Example:** ```typescript import { Component, OnInit } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { ButtonModule } from 'primeng/button'; import { SelectModule } from 'primeng/select'; @Component({ template: `
@if (selectedOption) {
{{ selectedOption.name }}
}
{{ country.name }}
Available Countries
`, standalone: true, imports: [ButtonModule, SelectModule, FormsModule] }) export class SelectTemplateDemo implements OnInit { countries: any[] | undefined; selectedCountry: string | undefined; ngOnInit() { this.countries = [ { name: 'Australia', code: 'AU' }, { name: 'Brazil', code: 'BR' }, { name: 'China', code: 'CN' }, { name: 'Egypt', code: 'EG' }, { name: 'France', code: 'FR' }, { name: 'Germany', code: 'DE' }, { name: 'India', code: 'IN' }, { name: 'Japan', code: 'JP' }, { name: 'Spain', code: 'ES' }, { name: 'United States', code: 'US' } ]; } } ``` ## templatedrivenforms-doc **Example:** ```typescript import { Component, inject } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { SelectModule } from 'primeng/select'; import { MessageModule } from 'primeng/message'; import { ButtonModule } from 'primeng/button'; import { MessageService } from 'primeng/api'; interface City { name: string; code: string; } @Component({ template: `
@if (city.invalid && (city.touched || exampleForm.submitted)) { City is required. }
`, standalone: true, imports: [SelectModule, MessageModule, ButtonModule, FormsModule] }) export class SelectTemplateDrivenFormsDemo { messageService = inject(MessageService); cities: City[] = [ { name: 'New York', code: 'NY' }, { name: 'Rome', code: 'RM' }, { name: 'London', code: 'LDN' }, { name: 'Istanbul', code: 'IST' }, { name: 'Paris', code: 'PRS' } ]; selectedCity: City | undefined; onSubmit(form: any) { if (form.valid) { this.messageService.add({ severity: 'success', summary: 'Success', detail: 'Form Submitted', life: 3000 }); form.resetForm(); } } } ``` ## Virtual Scroll VirtualScrolling is an efficient way of rendering the options by displaying a small subset of data in the viewport at any time. When dealing with huge number of options, it is suggested to enable VirtualScrolling to avoid performance issues. Usage is simple as setting virtualScroll property to true and defining virtualScrollItemSize to specify the height of an item. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { SelectModule } from 'primeng/select'; import { SelectItem } from 'primeng/api'; @Component({ template: `
`, standalone: true, imports: [SelectModule, FormsModule] }) export class SelectVirtualScrollDemo { items: SelectItem[]; selectedItem: string | undefined; constructor() { this.items = []; for (let i = 0; i < 10000; i++) { this.items.push({ label: 'Item ' + i, value: 'Item ' + i }); } } } ``` ## Select Select is used to choose an item from a collection of options. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | | required | boolean | false | There must be a value (if set). | | invalid | boolean | false | When present, it specifies that the component should have invalid state style. | | disabled | boolean | false | When present, it specifies that the component should have disabled state style. | | name | string | undefined | When present, it specifies that the name of the input. | | fluid | boolean | false | Spans 100% width of the container when enabled. | | variant | "filled" \| "outlined" | 'outlined' | Specifies the input variant of the component. | | size | "small" \| "large" | undefined | Specifies the size of the component. | | inputSize | number | undefined | Specifies the visible width of the input element in characters. | | pattern | string | undefined | Specifies the value must match the pattern. | | min | number | undefined | The value must be greater than or equal to the value. | | max | number | undefined | The value must be less than or equal to the value. | | step | number | undefined | Unless the step is set to the any literal, the value must be min + an integral multiple of the step. | | minlength | number | undefined | The number of characters (code points) must not be less than the value of the attribute, if non-empty. | | maxlength | number | undefined | The number of characters (code points) must not exceed the value of the attribute. | | id | string | - | Unique identifier of the component | | scrollHeight | string | - | Height of the viewport in pixels, a scrollbar is defined if height of list exceeds this value. | | filter | boolean | - | When specified, displays an input field to filter the items on keyup. | | panelStyle | Partial | - | Inline style of the overlay panel element. | | panelStyleClass | string | - | Style class of the overlay panel element. | | readonly | boolean | - | When present, it specifies that the component cannot be edited. | | editable | boolean | - | When present, custom value instead of predefined options can be entered using the editable input field. | | tabindex | number | - | Index of the element in tabbing order. | | placeholder | string | - | Default text to display when no option is selected. | | loadingIcon | string | - | Icon to display in loading state. | | filterPlaceholder | string | - | Placeholder text to show when filter input is empty. | | filterLocale | string | - | Locale to use in filtering. The default locale is the host environment's current locale. | | inputId | string | - | Identifier of the accessible input element. | | dataKey | string | - | A property to uniquely identify a value in options. | | filterBy | string | - | When filtering is enabled, filterBy decides which field or fields (comma separated) to search against. | | filterFields | any[] | - | Fields used when filtering the options, defaults to optionLabel. | | autofocus | boolean | - | When present, it specifies that the component should automatically get focus on load. | | resetFilterOnHide | boolean | - | Clears the filter value when hiding the select. | | checkmark | boolean | - | Whether the selected option will be shown with a check mark. | | dropdownIcon | string | - | Icon class of the select icon. | | loading | boolean | - | Whether the select is in loading state. | | optionLabel | string | - | Name of the label field of an option. | | optionValue | string | - | Name of the value field of an option. | | optionDisabled | string | - | Name of the disabled field of an option. | | optionGroupLabel | string | - | Name of the label field of an option group. | | optionGroupChildren | string | - | Name of the options field of an option group. | | group | boolean | - | Whether to display options as grouped when nested options are provided. | | showClear | boolean | - | When enabled, a clear icon is displayed to clear the value. | | emptyFilterMessage | string | - | Text to display when filtering does not return any results. Defaults to global value in i18n translation configuration. | | emptyMessage | string | - | Text to display when there is no data. Defaults to global value in i18n translation configuration. | | lazy | boolean | - | Defines if data is loaded and interacted with in lazy manner. | | virtualScroll | boolean | - | Whether the data should be loaded on demand during scroll. | | virtualScrollItemSize | number | - | Height of an item in the list for VirtualScrolling. | | virtualScrollOptions | ScrollerOptions | - | Whether to use the scroller feature. The properties of scroller component can be used like an object in it. | | overlayOptions | OverlayOptions | - | Whether to use overlay API feature. The properties of overlay API can be used like an object in it. | | ariaFilterLabel | string | - | Defines a string that labels the filter input. | | ariaLabel | string | - | Used to define a aria label attribute the current element. | | ariaLabelledBy | string | - | Establishes relationships between the component and label(s) where its value should be one or more element IDs. | | filterMatchMode | "startsWith" \| "contains" \| "notContains" \| "endsWith" \| "equals" \| "notEquals" \| "in" \| "between" \| "lt" \| "lte" \| "gt" \| "gte" \| "is" \| "isNot" \| "before" \| "after" \| "dateIs" \| "dateIsNot" \| "dateBefore" \| "dateAfter" | - | Defines how the items are filtered. | | tooltip | string | - | Advisory information to display in a tooltip on hover. | | tooltipPosition | "right" \| "left" \| "top" \| "bottom" | - | Position of the tooltip. | | tooltipPositionStyle | string | - | Type of CSS position. | | tooltipStyleClass | string | - | Style class of the tooltip. | | focusOnHover | boolean | - | Fields used when filtering the options, defaults to optionLabel. | | selectOnFocus | boolean | - | Determines if the option will be selected on focus. | | multiple | boolean | - | When enabled, allows multiple items to be selected. | | autoOptionFocus | boolean | - | Whether to focus on the first visible or selected element when the overlay panel is shown. | | autofocusFilter | boolean | - | Applies focus to the filter element when the overlay is shown. | | filterValue | string | - | When specified, filter displays with this value. | | options | any[] | - | An array of objects to display as the available options. | | appendTo | HTMLElement \| ElementRef \| TemplateRef \| "self" \| "body" \| null \| undefined | 'self' | Target element to attach the overlay, valid values are "body" or a local ng-template variable of another element (note: use binding with brackets for template variables, e.g. [appendTo]="mydiv" for a div element having #mydiv as variable name). | | motionOptions | MotionOptions | - | The motion options. | ### Emits | Name | Parameters | Description | |------|------------|-------------| | onChange | event: SelectChangeEvent | Callback to invoke when value of select changes. | | onFilter | event: SelectFilterEvent | Callback to invoke when data is filtered. | | onFocus | event: Event | Callback to invoke when select gets focus. | | onBlur | event: Event | Callback to invoke when select loses focus. | | onClick | event: MouseEvent | Callback to invoke when component is clicked. | | onShow | event: AnimationEvent | Callback to invoke when select overlay gets visible. | | onHide | event: AnimationEvent | Callback to invoke when select overlay gets hidden. | | onClear | event: Event | Callback to invoke when select clears the value. | | onLazyLoad | event: SelectLazyLoadEvent | Callback to invoke in lazy mode to load new data. | ### Templates | Name | Type | Description | |------|------|-------------| | item | TemplateRef> | Custom item template. | | group | TemplateRef> | Custom group template. | | loader | TemplateRef | Custom loader template. | | selecteditem | TemplateRef> | Custom selected item template. | | header | TemplateRef | Custom header template. | | filter | TemplateRef | Custom filter template. | | footer | TemplateRef | Custom footer template. | | emptyfilter | TemplateRef | Custom empty filter template. | | empty | TemplateRef | Custom empty template. | | dropdownicon | TemplateRef | Custom dropdown icon template. | | loadingicon | TemplateRef | Custom loading icon template. | | clearicon | TemplateRef | Custom clear icon template. | | filtericon | TemplateRef | Custom filter icon template. | | onicon | TemplateRef | Custom on icon template. | | officon | TemplateRef | Custom off icon template. | | cancelicon | TemplateRef | Custom cancel icon template. | ### Methods | Name | Parameters | Return Type | Description | |------|------------|-------------|-------------| | resetFilter | | void | Callback to invoke on filter reset. | | show | isFocus: any | void | Displays the panel. | | hide | isFocus: any | void | Hides the panel. | | focus | | void | Applies focus. | | clear | event: Event | void | Clears the model. | ## Pass Through Options | Name | Type | Description | |------|------|-------------| | root | PassThroughOption | Used to pass attributes to the root's DOM element. | | label | PassThroughOption | Used to pass attributes to the label's DOM element. | | clearIcon | PassThroughOption | Used to pass attributes to the clear icon's DOM element. | | dropdown | PassThroughOption | Used to pass attributes to the dropdown's DOM element. | | loadingIcon | PassThroughOption | Used to pass attributes to the loading icon's DOM element. | | dropdownIcon | PassThroughOption | Used to pass attributes to the dropdown icon's DOM element. | | pcOverlay | OverlayPassThrough | Used to pass attributes to the Overlay component. | | header | PassThroughOption | Used to pass attributes to the header's DOM element. | | pcFilterContainer | IconFieldPassThrough | Used to pass attributes to the filter container's DOM element. | | pcFilter | InputTextPassThrough | Used to pass attributes to the filter input's DOM element. | | pcFilterIconContainer | InputIconPassThrough | Used to pass attributes to the filter icon container's DOM element. | | filterIcon | PassThroughOption | Used to pass attributes to the filter icon's DOM element. | | listContainer | PassThroughOption | Used to pass attributes to the list container's DOM element. | | virtualScroller | VirtualScrollerPassThrough | Used to pass attributes to the VirtualScroller component. | | list | PassThroughOption | Used to pass attributes to the list's DOM element. | | optionGroup | PassThroughOption | Used to pass attributes to the option group's DOM element. | | optionGroupLabel | PassThroughOption | Used to pass attributes to the option group label's DOM element. | | option | PassThroughOption | Used to pass attributes to the option's DOM element. | | optionCheckIcon | PassThroughOption | Used to pass attributes to the option check icon's DOM element. | | optionBlankIcon | PassThroughOption | Used to pass attributes to the option blank icon's DOM element. | | optionLabel | PassThroughOption | Used to pass attributes to the option label's DOM element. | | emptyMessage | PassThroughOption | Used to pass attributes to the empty message's DOM element. | | hiddenFirstFocusableEl | PassThroughOption | Used to pass attributes to the hidden first focusable element's DOM element. | | hiddenFilterResult | PassThroughOption | Used to pass attributes to the hidden filter result's DOM element. | | hiddenEmptyMessage | PassThroughOption | Used to pass attributes to the hidden empty message's DOM element. | | hiddenSelectedMessage | PassThroughOption | Used to pass attributes to the hidden selected message's DOM element. | | hiddenLastFocusableEl | PassThroughOption | Used to pass attributes to the hidden last focusable element's DOM element. | ## Theming ### CSS Classes | Class | Description | |-------|-------------| | p-select | Class name of the root element | | p-select-label | Class name of the label element | | p-select-clear-icon | Class name of the clear icon element | | p-select-dropdown | Class name of the dropdown element | | p-select-loading-icon | Class name of the loadingicon element | | p-select-dropdown-icon | Class name of the dropdown icon element | | p-select-overlay | Class name of the overlay element | | p-select-header | Class name of the header element | | p-select-filter | Class name of the filter element | | p-select-list-container | Class name of the list container element | | p-select-list | Class name of the list element | | p-select-option-group | Class name of the option group element | | p-select-option-group-label | Class name of the option group label element | | p-select-option | Class name of the option element | | p-select-option-label | Class name of the option label element | | p-select-option-check-icon | Class name of the option check icon element | | p-select-option-blank-icon | Class name of the option blank icon element | | p-select-empty-message | Class name of the empty message element | ### Design Tokens | Token | CSS Variable | Description | |-------|--------------|-------------| | select.background | --p-select-background | Background of root | | select.disabled.background | --p-select-disabled-background | Disabled background of root | | select.filled.background | --p-select-filled-background | Filled background of root | | select.filled.hover.background | --p-select-filled-hover-background | Filled hover background of root | | select.filled.focus.background | --p-select-filled-focus-background | Filled focus background of root | | select.border.color | --p-select-border-color | Border color of root | | select.hover.border.color | --p-select-hover-border-color | Hover border color of root | | select.focus.border.color | --p-select-focus-border-color | Focus border color of root | | select.invalid.border.color | --p-select-invalid-border-color | Invalid border color of root | | select.color | --p-select-color | Color of root | | select.disabled.color | --p-select-disabled-color | Disabled color of root | | select.placeholder.color | --p-select-placeholder-color | Placeholder color of root | | select.invalid.placeholder.color | --p-select-invalid-placeholder-color | Invalid placeholder color of root | | select.shadow | --p-select-shadow | Shadow of root | | select.padding.x | --p-select-padding-x | Padding x of root | | select.padding.y | --p-select-padding-y | Padding y of root | | select.border.radius | --p-select-border-radius | Border radius of root | | select.focus.ring.width | --p-select-focus-ring-width | Focus ring width of root | | select.focus.ring.style | --p-select-focus-ring-style | Focus ring style of root | | select.focus.ring.color | --p-select-focus-ring-color | Focus ring color of root | | select.focus.ring.offset | --p-select-focus-ring-offset | Focus ring offset of root | | select.focus.ring.shadow | --p-select-focus-ring-shadow | Focus ring shadow of root | | select.transition.duration | --p-select-transition-duration | Transition duration of root | | select.sm.font.size | --p-select-sm-font-size | Sm font size of root | | select.sm.padding.x | --p-select-sm-padding-x | Sm padding x of root | | select.sm.padding.y | --p-select-sm-padding-y | Sm padding y of root | | select.lg.font.size | --p-select-lg-font-size | Lg font size of root | | select.lg.padding.x | --p-select-lg-padding-x | Lg padding x of root | | select.lg.padding.y | --p-select-lg-padding-y | Lg padding y of root | | select.font.weight | --p-select-font-weight | Font weight of root | | select.font.size | --p-select-font-size | Font size of root | | select.dropdown.width | --p-select-dropdown-width | Width of dropdown | | select.dropdown.color | --p-select-dropdown-color | Color of dropdown | | select.overlay.background | --p-select-overlay-background | Background of overlay | | select.overlay.border.color | --p-select-overlay-border-color | Border color of overlay | | select.overlay.border.radius | --p-select-overlay-border-radius | Border radius of overlay | | select.overlay.color | --p-select-overlay-color | Color of overlay | | select.overlay.shadow | --p-select-overlay-shadow | Shadow of overlay | | select.list.padding | --p-select-list-padding | Padding of list | | select.list.gap | --p-select-list-gap | Gap of list | | select.list.header.padding | --p-select-list-header-padding | Header padding of list | | select.option.focus.background | --p-select-option-focus-background | Focus background of option | | select.option.selected.background | --p-select-option-selected-background | Selected background of option | | select.option.selected.focus.background | --p-select-option-selected-focus-background | Selected focus background of option | | select.option.color | --p-select-option-color | Color of option | | select.option.focus.color | --p-select-option-focus-color | Focus color of option | | select.option.selected.color | --p-select-option-selected-color | Selected color of option | | select.option.selected.focus.color | --p-select-option-selected-focus-color | Selected focus color of option | | select.option.selected.font.weight | --p-select-option-selected-font-weight | Font weight of a selected option | | select.option.padding | --p-select-option-padding | Padding of option | | select.option.border.radius | --p-select-option-border-radius | Border radius of option | | select.option.font.weight | --p-select-option-font-weight | Font weight of option | | select.option.font.size | --p-select-option-font-size | Font size of option | | select.option.group.background | --p-select-option-group-background | Background of option group | | select.option.group.color | --p-select-option-group-color | Color of option group | | select.option.group.font.weight | --p-select-option-group-font-weight | Font weight of option group | | select.option.group.font.size | --p-select-option-group-font-size | Font size of option group | | select.option.group.padding | --p-select-option-group-padding | Padding of option group | | select.clear.icon.color | --p-select-clear-icon-color | Color of clear icon | | select.checkmark.color | --p-select-checkmark-color | Color of checkmark | | select.checkmark.gutter.start | --p-select-checkmark-gutter-start | Gutter start of checkmark | | select.checkmark.gutter.end | --p-select-checkmark-gutter-end | Gutter end of checkmark | | select.empty.message.padding | --p-select-empty-message-padding | Padding of empty message | --- # Angular SelectButton Component SelectButton is used to choose single or multiple items from a list using buttons. ## Accessibility Screen Reader The container element that wraps the buttons has a group role whereas each button element uses button role and aria-pressed is updated depending on selection state. Value to describe an option is automatically set using the ariaLabel property that refers to the label of an option so it is still suggested to define a label even the option display consists of presentational content like icons only. ## Basic SelectButton requires a value to bind and a collection of options. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { SelectButtonModule } from 'primeng/selectbutton'; @Component({ template: `
`, standalone: true, imports: [SelectButtonModule, FormsModule] }) export class SelectButtonBasicDemo { stateOptions: any[] = [ { label: 'One-Way', value: 'one-way' }, { label: 'Return', value: 'return' } ]; value: string = 'one-way'; } ``` ## Disabled When disabled is present, the element cannot be edited and focused entirely. Certain options can also be disabled using the optionDisabled property. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { SelectButtonModule } from 'primeng/selectbutton'; @Component({ template: `
`, standalone: true, imports: [SelectButtonModule, FormsModule] }) export class SelectButtonDisabledDemo { stateOptions: any[] = [ { label: 'Off', value: 'off' }, { label: 'On', value: 'on' } ]; stateOptions2: any[] = [ { label: 'Option 1', value: 'Option 1' }, { label: 'Option 2', value: 'Option 2', constant: true } ]; value1: string = 'off'; value2: string = 'Option 1'; } ``` ## Fluid The fluid prop makes the component take up the full width of its container when set to true. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { SelectButtonModule } from 'primeng/selectbutton'; @Component({ template: ` `, standalone: true, imports: [SelectButtonModule, FormsModule] }) export class SelectButtonFluidDemo { stateOptions: any[] = [ { label: 'One-Way', value: 'one-way' }, { label: 'Return', value: 'return' } ]; value: string = 'one-way'; } ``` ## Invalid The invalid state is applied using the ⁠invalid property to indicate failed validation, which can be integrated with Angular Forms. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { SelectButtonModule } from 'primeng/selectbutton'; @Component({ template: `
`, standalone: true, imports: [SelectButtonModule, FormsModule] }) export class SelectButtonInvalidDemo { stateOptions: any[] = [ { label: 'One-Way', value: 'one-way' }, { label: 'Return', value: 'return' } ]; value: string | undefined; } ``` ## Multiple SelectButton allows selecting only one item by default and setting multiple option enables choosing more than one item. In multiple case, model property should be an array. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { SelectButtonModule } from 'primeng/selectbutton'; @Component({ template: `
`, standalone: true, imports: [SelectButtonModule, FormsModule] }) export class SelectButtonMultipleDemo { paymentOptions: any[] = [ { name: 'Option 1', value: 1 }, { name: 'Option 2', value: 2 }, { name: 'Option 3', value: 3 } ]; value!: number; } ``` ## reactiveforms-doc SelectButton can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control. **Example:** ```typescript import { Component, inject } from '@angular/core'; import { ReactiveFormsModule } from '@angular/forms'; import { MessageModule } from 'primeng/message'; import { SelectButtonModule } from 'primeng/selectbutton'; import { ButtonModule } from 'primeng/button'; import { MessageService } from 'primeng/api'; @Component({ template: `
@if (isInvalid('value')) { Selection is required }
`, standalone: true, imports: [MessageModule, SelectButtonModule, ButtonModule, ReactiveFormsModule] }) export class SelectButtonReactiveFormsDemo { messageService = inject(MessageService); exampleForm: FormGroup | undefined; formSubmitted: boolean = false; stateOptions: any[] = [ { label: 'One-Way', value: 'one-way' }, { label: 'Return', value: 'return' } ]; constructor() { this.exampleForm = this.fb.group({ value: ['', Validators.required] }); } onSubmit() { this.formSubmitted = true; if (this.exampleForm.valid) { this.messageService.add({ severity: 'success', summary: 'Success', detail: 'Form is submitted', life: 3000 }); this.exampleForm.reset(); this.formSubmitted = false; } } isInvalid(controlName: string) { const control = this.exampleForm.get(controlName); return control?.invalid && (control.touched || this.formSubmitted); } } ``` ## Sizes SelectButton provides small and large sizes as alternatives to the base. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { SelectButtonModule } from 'primeng/selectbutton'; @Component({ template: `
`, standalone: true, imports: [SelectButtonModule, FormsModule] }) export class SelectButtonSizesDemo { value1!: string; value2: string = 'Beginner'; value3: string = 'Expert'; options: any[] = [ { label: 'Beginner', value: 'Beginner' }, { label: 'Expert', value: 'Expert' } ]; } ``` ## Template For custom content support define a template named item where the default local template variable refers to an option. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { SelectButtonModule } from 'primeng/selectbutton'; @Component({ template: `
`, standalone: true, imports: [SelectButtonModule, FormsModule] }) export class SelectButtonTemplateDemo { value: any; justifyOptions: any[] = [ { icon: 'pi pi-align-left', justify: 'Left' }, { icon: 'pi pi-align-right', justify: 'Right' }, { icon: 'pi pi-align-center', justify: 'Center' }, { icon: 'pi pi-align-justify', justify: 'Justify' } ]; } ``` ## templatedrivenforms-doc **Example:** ```typescript import { Component, inject } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { MessageModule } from 'primeng/message'; import { SelectButtonModule } from 'primeng/selectbutton'; import { ButtonModule } from 'primeng/button'; import { MessageService } from 'primeng/api'; @Component({ template: `
@if (model.invalid && (model.touched || exampleForm.submitted)) { Selection is required. }
`, standalone: true, imports: [MessageModule, SelectButtonModule, ButtonModule, FormsModule] }) export class SelectButtonTemplateDrivenFormsDemo { messageService = inject(MessageService); value: any; stateOptions: any[] = [ { label: 'One-Way', value: 'one-way' }, { label: 'Return', value: 'return' } ]; onSubmit(form: any) { if (form.valid) { this.messageService.add({ severity: 'success', summary: 'Success', detail: 'Form Submitted', life: 3000 }); form.resetForm(); } } } ``` ## Select Button SelectButton is used to choose single or multiple items from a list using buttons. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | | required | boolean | false | There must be a value (if set). | | invalid | boolean | false | When present, it specifies that the component should have invalid state style. | | disabled | boolean | false | When present, it specifies that the component should have disabled state style. | | name | string | undefined | When present, it specifies that the name of the input. | | options | any[] | - | An array of selectitems to display as the available options. | | optionLabel | string | - | Name of the label field of an option. | | optionValue | string | - | Name of the value field of an option. | | optionDisabled | string | - | Name of the disabled field of an option. | | unselectable | boolean | - | Whether selection can be cleared. | | tabindex | number | - | Index of the element in tabbing order. | | multiple | boolean | - | When specified, allows selecting multiple values. | | allowEmpty | boolean | - | Whether selection can not be cleared. | | styleClass | string | - | Style class of the component. | | ariaLabelledBy | string | - | Establishes relationships between the component and label(s) where its value should be one or more element IDs. | | dataKey | string | - | A property to uniquely identify a value in options. | | autofocus | boolean | - | When present, it specifies that the component should automatically get focus on load. | | size | "small" \| "large" | undefined | Specifies the size of the component. | | fluid | boolean | undefined | Spans 100% width of the container when enabled. | ### Emits | Name | Parameters | Description | |------|------------|-------------| | onOptionClick | event: SelectButtonOptionClickEvent | Callback to invoke on input click. | | onChange | event: SelectButtonChangeEvent | Callback to invoke on selection change. | ### Templates | Name | Type | Description | |------|------|-------------| | item | TemplateRef | Custom item template. | ## Pass Through Options | Name | Type | Description | |------|------|-------------| | host | PassThroughOption | Used to pass attributes to the host's DOM element. | | root | PassThroughOption | Used to pass attributes to the root's DOM element. | | pcToggleButton | ToggleButtonPassThrough | Used to pass attributes to the ToggleButton component. | ## Theming ### CSS Classes | Class | Description | |-------|-------------| | p-selectbutton | Class name of the root element | ### Design Tokens | Token | CSS Variable | Description | |-------|--------------|-------------| | selectbutton.border.radius | --p-selectbutton-border-radius | Border radius of root | | selectbutton.invalid.border.color | --p-selectbutton-invalid-border-color | Invalid border color of root | --- # Angular Skeleton Component Skeleton is a placeholder to display instead of the actual content. ## Accessibility Screen Reader Skeleton uses aria-hidden as "true" so that it gets ignored by screen readers, any valid attribute is passed to the root element so you may customize it further if required. If multiple skeletons are grouped inside a container, you may use aria-busy on the container element as well to indicate the loading process. ## Card Sample Card implementation using different Skeleton components and Tailwind CSS utilities. **Example:** ```typescript import { Component } from '@angular/core'; import { SkeletonModule } from 'primeng/skeleton'; @Component({ template: `
`, standalone: true, imports: [SkeletonModule] }) export class SkeletonCardDemo {} ``` ## DataTable Sample DataTable implementation using different Skeleton components and Tailwind CSS utilities. **Example:** ```typescript import { Component, OnInit } from '@angular/core'; import { SkeletonModule } from 'primeng/skeleton'; import { TableModule } from 'primeng/table'; @Component({ template: ` Code Name Category Quantity `, standalone: true, imports: [SkeletonModule, TableModule] }) export class SkeletonDataTableDemo implements OnInit { products: any[] | undefined; ngOnInit() { this.products = Array.from({ length: 5 }).map((_, i) => `Item #${i}`); } } ``` ## List Sample List implementation using different Skeleton components and Tailwind CSS utilities. **Example:** ```typescript import { Component } from '@angular/core'; import { SkeletonModule } from 'primeng/skeleton'; @Component({ template: `
`, standalone: true, imports: [SkeletonModule] }) export class SkeletonListDemo {} ``` ## Shapes Various shapes and sizes can be created using styling properties like shape , width , height , borderRadius and class . **Example:** ```typescript import { Component } from '@angular/core'; import { SkeletonModule } from 'primeng/skeleton'; @Component({ template: `
Rectangle
Rounded
Square
Circle
`, standalone: true, imports: [SkeletonModule] }) export class SkeletonShapesDemo {} ``` ## Skeleton Skeleton is a placeholder to display instead of the actual content. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | | shape | string | - | Shape of the element. | | animation | string | - | Type of the animation. | | borderRadius | string | - | Border radius of the element, defaults to value from theme. | | size | string | - | Size of the skeleton. | | width | string | - | Width of the element. | | height | string | - | Height of the element. | ## Pass Through Options | Name | Type | Description | |------|------|-------------| | host | PassThroughOption | Used to pass attributes to the host's DOM element. | | root | PassThroughOption | Used to pass attributes to the root's DOM element. | ## Theming ### CSS Classes | Class | Description | |-------|-------------| | p-skeleton | Class name of the root element | ### Design Tokens | Token | CSS Variable | Description | |-------|--------------|-------------| | skeleton.border.radius | --p-skeleton-border-radius | Border radius of root | | skeleton.background | --p-skeleton-background | Background of root | | skeleton.animation.background | --p-skeleton-animation-background | Animation background of root | --- # Angular Slider Component Slider is a component to provide input with a drag handle. ## Accessibility Screen Reader Slider element component uses slider role on the handle in addition to the aria-orientation , aria-valuemin , aria-valuemax and aria-valuenow attributes. Value to describe the component can be defined using ariaLabelledBy and ariaLabel props. ## Basic Two-way binding is defined using the standard ngModel directive. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { SliderModule } from 'primeng/slider'; @Component({ template: `
`, standalone: true, imports: [SliderModule, FormsModule] }) export class SliderBasicDemo { value!: number; } ``` ## Filter Image filter implementation using multiple sliders. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { SelectButtonModule } from 'primeng/selectbutton'; import { SliderModule } from 'primeng/slider'; @Component({ template: `
user header
`, standalone: true, imports: [SelectButtonModule, SliderModule, FormsModule] }) export class SliderFilterDemo { filter: number = 0; filterValues: number[] = [100, 100, 0]; filterOptions: any = [ { label: 'Contrast', value: 0 }, { label: 'Brightness', value: 1 }, { label: 'Sepia', value: 2 } ]; } ``` ## Input Slider is connected to an input field using two-way binding. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { SliderModule } from 'primeng/slider'; import { InputTextModule } from 'primeng/inputtext'; @Component({ template: `
`, standalone: true, imports: [SliderModule, InputTextModule, FormsModule] }) export class SliderInputDemo { value: number = 50; } ``` ## Range When range property is present, slider provides two handles to define two values. In range mode, value should be an array instead of a single value. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { SliderModule } from 'primeng/slider'; @Component({ template: `
`, standalone: true, imports: [SliderModule, FormsModule] }) export class SliderRangeDemo { rangeValues: number[] = [20, 80]; } ``` ## reactiveforms-doc Slider can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control. **Example:** ```typescript import { Component, inject } from '@angular/core'; import { ReactiveFormsModule } from '@angular/forms'; import { MessageModule } from 'primeng/message'; import { SliderModule } from 'primeng/slider'; import { ButtonModule } from 'primeng/button'; import { MessageService } from 'primeng/api'; @Component({ template: `
@if (isInvalid('value')) { Must be greater than 25. }
`, standalone: true, imports: [MessageModule, SliderModule, ButtonModule, ReactiveFormsModule] }) export class SliderReactiveFormsDemo { messageService = inject(MessageService); exampleForm: FormGroup | undefined; formSubmitted: boolean = false; constructor() { this.exampleForm = this.fb.group({ value: ['', Validators.required] }); } onSubmit() { this.formSubmitted = true; if (this.exampleForm.valid) { this.messageService.add({ severity: 'success', summary: 'Success', detail: 'Form is submitted', life: 3000 }); this.exampleForm.reset(); this.formSubmitted = false; } } isInvalid(controlName: string) { const control = this.exampleForm.get(controlName); return control?.invalid && (control.touched || this.formSubmitted); } } ``` ## Step Size of each movement is defined with the step property. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { SliderModule } from 'primeng/slider'; @Component({ template: `
`, standalone: true, imports: [SliderModule, FormsModule] }) export class SliderStepDemo { value: number = 20; } ``` ## templatedrivenforms-doc **Example:** ```typescript import { Component, inject } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { MessageModule } from 'primeng/message'; import { SliderModule } from 'primeng/slider'; import { ButtonModule } from 'primeng/button'; import { MessageService } from 'primeng/api'; @Component({ template: `
@if (model.invalid && (model.touched || exampleForm.submitted)) { Must be greater than 25. }
`, standalone: true, imports: [MessageModule, SliderModule, ButtonModule, FormsModule] }) export class SliderTemplateDrivenFormsDemo { messageService = inject(MessageService); value: any; onSubmit(form: any) { if (form.valid) { this.messageService.add({ severity: 'success', summary: 'Success', detail: 'Form Submitted', life: 3000 }); form.resetForm(); } } } ``` ## Vertical Default layout of slider is horizontal , use orientation property for the alternative vertical mode. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { SliderModule } from 'primeng/slider'; @Component({ template: `
`, standalone: true, imports: [SliderModule, FormsModule] }) export class SliderVerticalDemo { value: number = 50; } ``` ## Slider Slider is a component to provide input with a drag handle. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | | required | boolean | false | There must be a value (if set). | | invalid | boolean | false | When present, it specifies that the component should have invalid state style. | | disabled | boolean | false | When present, it specifies that the component should have disabled state style. | | name | string | undefined | When present, it specifies that the name of the input. | | animate | boolean | - | When enabled, displays an animation on click of the slider bar. | | min | number | - | Mininum boundary value. | | max | number | - | Maximum boundary value. | | orientation | "horizontal" \| "vertical" | - | Orientation of the slider. | | step | number | - | Step factor to increment/decrement the value. | | range | boolean | - | When specified, allows two boundary values to be picked. | | ariaLabel | string | - | Defines a string that labels the input for accessibility. | | ariaLabelledBy | string | - | Establishes relationships between the component and label(s) where its value should be one or more element IDs. | | tabindex | number | - | Index of the element in tabbing order. | | autofocus | boolean | - | When present, it specifies that the component should automatically get focus on load. | ### Emits | Name | Parameters | Description | |------|------------|-------------| | onChange | event: SliderChangeEvent | Callback to invoke on value change. | | onSlideEnd | event: SliderSlideEndEvent | Callback to invoke when slide ended. | ## Pass Through Options | Name | Type | Description | |------|------|-------------| | root | PassThroughOption | Used to pass attributes to the root's DOM element. | | range | PassThroughOption | Used to pass attributes to the range's DOM element. | | handle | PassThroughOption | Used to pass attributes to the handle's DOM element. | | startHandler | PassThroughOption | Used to pass attributes to the start handler's DOM element. | | endHandler | PassThroughOption | Used to pass attributes to the end handler's DOM element. | ## Theming ### CSS Classes | Class | Description | |-------|-------------| | p-slider | Class name of the root element | | p-slider-range | Class name of the range element | | p-slider-handle | Class name of the handle element | ### Design Tokens | Token | CSS Variable | Description | |-------|--------------|-------------| | slider.transition.duration | --p-slider-transition-duration | Transition duration of root | | slider.track.background | --p-slider-track-background | Background of track | | slider.track.border.radius | --p-slider-track-border-radius | Border radius of track | | slider.track.size | --p-slider-track-size | Size of track | | slider.range.background | --p-slider-range-background | Background of range | | slider.handle.width | --p-slider-handle-width | Width of handle | | slider.handle.height | --p-slider-handle-height | Height of handle | | slider.handle.border.radius | --p-slider-handle-border-radius | Border radius of handle | | slider.handle.background | --p-slider-handle-background | Background of handle | | slider.handle.hover.background | --p-slider-handle-hover-background | Hover background of handle | | slider.handle.content.border.radius | --p-slider-handle-content-border-radius | Content border radius of handle | | slider.handle.content.background | --p-slider-handle-content-background | Background of handle | | slider.handle.content.hover.background | --p-slider-handle-content-hover-background | Content hover background of handle | | slider.handle.content.width | --p-slider-handle-content-width | Content width of handle | | slider.handle.content.height | --p-slider-handle-content-height | Content height of handle | | slider.handle.content.shadow | --p-slider-handle-content-shadow | Content shadow of handle | | slider.handle.focus.ring.width | --p-slider-handle-focus-ring-width | Focus ring width of handle | | slider.handle.focus.ring.style | --p-slider-handle-focus-ring-style | Focus ring style of handle | | slider.handle.focus.ring.color | --p-slider-handle-focus-ring-color | Focus ring color of handle | | slider.handle.focus.ring.offset | --p-slider-handle-focus-ring-offset | Focus ring offset of handle | | slider.handle.focus.ring.shadow | --p-slider-handle-focus-ring-shadow | Focus ring shadow of handle | --- # Angular Speed Dial Component SpeedDial is a floating button with a popup menu. ## Accessibility Screen Reader SpeedDial component renders a native button element that implicitly includes any passed prop. Text to describe the button can be defined with the aria-labelledby or aria-label props. Addititonally the button includes includes aria-haspopup , aria-expanded for states along with aria-controls to define the relation between the popup and the button. The popup overlay uses menu role on the list and each action item has a menuitem role with an aria-label as the menuitem label. The id of the menu refers to the aria-controls of the button. ## Circle Items can be displayed around the button when type is set to circle . Additional radius property defines the radius of the circle. **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { SpeedDialModule } from 'primeng/speeddial'; import { MenuItem, MessageService } from 'primeng/api'; @Component({ template: `
`, standalone: true, imports: [SpeedDialModule], providers: [MessageService] }) export class SpeedDialCircleDemo implements OnInit { private messageService = inject(MessageService); items: MenuItem[] | undefined; ngOnInit() { this.items = [ { icon: 'pi pi-pencil', command: () => { this.messageService.add({ severity: 'info', summary: 'Add', detail: 'Data Added' }); } }, { icon: 'pi pi-refresh', command: () => { this.messageService.add({ severity: 'success', summary: 'Update', detail: 'Data Updated' }); } }, { icon: 'pi pi-trash', command: () => { this.messageService.add({ severity: 'error', summary: 'Delete', detail: 'Data Deleted' }); } }, { icon: 'pi pi-upload', routerLink: ['/fileupload'] }, { icon: 'pi pi-external-link', target: '_blank', url: 'https://angular.dev' } ]; } } ``` ## Linear SpeedDial items are defined with the model property based on MenuModel API. Default orientation of the items is linear and direction property is used to define the position of the items related to the button. **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { SpeedDialModule } from 'primeng/speeddial'; import { MenuItem, MessageService } from 'primeng/api'; @Component({ template: `
`, standalone: true, imports: [SpeedDialModule], providers: [MessageService] }) export class SpeedDialLinearDemo implements OnInit { private messageService = inject(MessageService); items: MenuItem[] | undefined; ngOnInit() { this.items = [ { icon: 'pi pi-pencil', command: () => { this.messageService.add({ severity: 'info', summary: 'Add', detail: 'Data Added' }); } }, { icon: 'pi pi-refresh', command: () => { this.messageService.add({ severity: 'success', summary: 'Update', detail: 'Data Updated' }); } }, { icon: 'pi pi-trash', command: () => { this.messageService.add({ severity: 'error', summary: 'Delete', detail: 'Data Deleted' }); } }, { icon: 'pi pi-upload', routerLink: ['/fileupload'] }, { icon: 'pi pi-external-link', target: '_blank', url: 'https://angular.dev' } ]; } } ``` ## Mask Adding mask property displays a modal layer behind the popup items. **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { SpeedDialModule } from 'primeng/speeddial'; import { MenuItem, MessageService } from 'primeng/api'; @Component({ template: `
`, standalone: true, imports: [SpeedDialModule], providers: [MessageService] }) export class SpeedDialMaskDemo implements OnInit { private messageService = inject(MessageService); items: MenuItem[] | undefined; ngOnInit() { this.items = [ { icon: 'pi pi-pencil', command: () => { this.messageService.add({ severity: 'info', summary: 'Add', detail: 'Data Added' }); } }, { icon: 'pi pi-refresh', command: () => { this.messageService.add({ severity: 'success', summary: 'Update', detail: 'Data Updated' }); } }, { icon: 'pi pi-trash', command: () => { this.messageService.add({ severity: 'error', summary: 'Delete', detail: 'Data Deleted' }); } }, { icon: 'pi pi-upload', routerLink: ['/fileupload'] }, { icon: 'pi pi-external-link', target: '_blank', url: 'https://angular.dev' } ]; } } ``` ## Quarter Circle When type is defined as quarter-circle , items are displayed in a half-circle around the button. **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { SpeedDialModule } from 'primeng/speeddial'; import { MenuItem, MessageService } from 'primeng/api'; @Component({ template: `
`, standalone: true, imports: [SpeedDialModule], providers: [MessageService] }) export class SpeedDialQuarterCircleDemo implements OnInit { private messageService = inject(MessageService); items: MenuItem[] | undefined; ngOnInit() { this.items = [ { icon: 'pi pi-pencil', command: () => { this.messageService.add({ severity: 'info', summary: 'Add', detail: 'Data Added' }); } }, { icon: 'pi pi-refresh', command: () => { this.messageService.add({ severity: 'success', summary: 'Update', detail: 'Data Updated' }); } }, { icon: 'pi pi-trash', command: () => { this.messageService.add({ severity: 'error', summary: 'Delete', detail: 'Data Deleted' }); } }, { icon: 'pi pi-upload', routerLink: ['/fileupload'] }, { icon: 'pi pi-external-link', target: '_blank', url: 'https://angular.dev' } ]; } } ``` ## Semi Circle When type is defined as semi-circle , items are displayed in a half-circle around the button. **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { SpeedDialModule } from 'primeng/speeddial'; import { MenuItem, MessageService } from 'primeng/api'; @Component({ template: `
`, standalone: true, imports: [SpeedDialModule], providers: [MessageService] }) export class SpeedDialSemiCircleDemo implements OnInit { private messageService = inject(MessageService); items: MenuItem[] | undefined; ngOnInit() { this.items = [ { icon: 'pi pi-pencil', command: () => { this.messageService.add({ severity: 'info', summary: 'Add', detail: 'Data Added' }); } }, { icon: 'pi pi-refresh', command: () => { this.messageService.add({ severity: 'success', summary: 'Update', detail: 'Data Updated' }); } }, { icon: 'pi pi-trash', command: () => { this.messageService.add({ severity: 'error', summary: 'Delete', detail: 'Data Deleted' }); } }, { icon: 'pi pi-upload', routerLink: ['/fileupload'] }, { icon: 'pi pi-external-link', target: '_blank', url: 'https://angular.dev' } ]; } } ``` ## Template SpeedDial offers item customization with the item template that receives the menuitem instance from the model as a parameter. The button has its own button template, additional template named icon is provided to embed icon content for default button. **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { ButtonModule } from 'primeng/button'; import { SpeedDialModule } from 'primeng/speeddial'; import { MenuItem, MessageService } from 'primeng/api'; @Component({ template: `
{{ item.label }}
`, standalone: true, imports: [ButtonModule, SpeedDialModule], providers: [MessageService] }) export class SpeedDialTemplateDemo implements OnInit { private messageService = inject(MessageService); items: MenuItem[] | undefined; ngOnInit() { this.items = [ { label: 'Add', icon: 'pi pi-pencil', command: () => { this.messageService.add({ severity: 'info', summary: 'Add', detail: 'Data Added' }); } }, { label: 'Update', icon: 'pi pi-refresh', command: () => { this.messageService.add({ severity: 'success', summary: 'Update', detail: 'Data Updated' }); } }, { label: 'Delete', icon: 'pi pi-trash', command: () => { this.messageService.add({ severity: 'error', summary: 'Delete', detail: 'Data Deleted' }); } }, { label: 'Upload', icon: 'pi pi-upload', command: () => { this.router.navigate(['/fileupload']); } }, { label: 'Website', icon: 'pi pi-external-link', command: () => { window.open('https://angular.io/', '_blank'); } } ]; } } ``` ## Tooltip Items display a tooltip on hover when a standalone Tooltip is present with a target that matches the items. **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { SpeedDialModule } from 'primeng/speeddial'; import { MenuItem, MessageService } from 'primeng/api'; @Component({ template: `
`, standalone: true, imports: [SpeedDialModule], providers: [MessageService] }) export class SpeedDialTooltipDemo implements OnInit { private messageService = inject(MessageService); items: MenuItem[] | undefined; ngOnInit() { this.items = [ { label: 'Add', icon: 'pi pi-pencil', command: () => { this.messageService.add({ severity: 'info', summary: 'Add', detail: 'Data Added' }); } }, { label: 'Update', icon: 'pi pi-refresh', command: () => { this.messageService.add({ severity: 'success', summary: 'Update', detail: 'Data Updated' }); } }, { label: 'Delete', icon: 'pi pi-trash', command: () => { this.messageService.add({ severity: 'error', summary: 'Delete', detail: 'Data Deleted' }); } }, { label: 'Upload', icon: 'pi pi-upload', command: () => { this.router.navigate(['/fileupload']); } }, { label: 'Angular.dev', icon: 'pi pi-external-link', target: '_blank', url: 'https://angular.dev' } ]; } } ``` ## Speed Dial When pressed, a floating action button can display multiple primary actions that can be performed on a page. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | | id | string | - | List of items id. | | $model | MenuItem[] | - | MenuModel instance to define the action items. | | visible | boolean | false | Specifies the visibility of the overlay. | | transitionDelay | number | - | Transition delay step for each action item. | | type | "linear" \| "circle" \| "semi-circle" \| "quarter-circle" | - | Specifies the opening type of actions. | | radius | number | - | Radius for *circle types. | | mask | boolean | - | Whether to show a mask element behind the speeddial. | | disabled | boolean | - | Whether the component is disabled. | | hideOnClickOutside | boolean | - | Whether the actions close when clicked outside. | | buttonStyle | Partial | - | Inline style of the button element. | | buttonClassName | string | - | Style class of the button element. | | maskStyle | Partial | - | Inline style of the mask element. | | maskClassName | string | - | Style class of the mask element. | | showIcon | string | - | Show icon of the button element. | | hideIcon | string | - | Hide icon of the button element. | | rotateAnimation | boolean | - | Defined to rotate showIcon when hideIcon is not present. | | ariaLabel | string | - | Defines a string value that labels an interactive element. | | ariaLabelledBy | string | - | Identifier of the underlying input element. | | tooltipOptions | TooltipOptions | - | Whether to display the tooltip on items. The modifiers of Tooltip can be used like an object in it. Valid keys are 'event' and 'position'. | | buttonProps | ButtonProps | - | Used to pass all properties of the ButtonProps to the Button component. | ### Emits | Name | Parameters | Description | |------|------------|-------------| | onVisibleChange | value: boolean | Fired when the visibility of element changed. | | onClick | event: MouseEvent | Fired when the button element clicked. | | onShow | value: void | Fired when the actions are visible. | | onHide | value: void | Fired when the actions are hidden. | ### Templates | Name | Type | Description | |------|------|-------------| | button | TemplateRef | Custom button template. | | item | TemplateRef | Custom item template. | | icon | TemplateRef | Custom icon template. | ## Pass Through Options | Name | Type | Description | |------|------|-------------| | root | PassThroughOption | Used to pass attributes to the root's DOM element. | | pcButton | ButtonPassThrough | Used to pass attributes to the Button component. | | list | PassThroughOption | Used to pass attributes to the list's DOM element. | | item | PassThroughOption | Used to pass attributes to the item's DOM element. | | pcAction | ButtonPassThrough | Used to pass attributes to the action's Button component. | | actionIcon | PassThroughOption | Used to pass attributes to the action icon's DOM element. | | mask | PassThroughOption | Used to pass attributes to the mask's DOM element. | ## Theming ### CSS Classes | Class | Description | |-------|-------------| | p-speeddial | Class name of the root element | | p-speeddial-button | Class name of the button element | | p-speeddial-list | Class name of the list element | | p-speeddial-item | Class name of the item element | | p-speeddial-action | Class name of the action element | | p-speeddial-action-icon | Class name of the action icon element | | p-speeddial-mask | Class name of the mask element | ### Design Tokens | Token | CSS Variable | Description | |-------|--------------|-------------| | speeddial.gap | --p-speeddial-gap | Gap of root | | speeddial.transition.duration | --p-speeddial-transition-duration | Transition duration of root | --- # Angular SplitButton Component SplitButton groups a set of commands in an overlay with a default action item. ## Accessibility Screen Reader SplitButton component renders two native button elements, main button uses the label property to define aria-label by default which can be customized with buttonProps . Dropdown button requires an explicit definition to describe it using menuButtonProps option and also includes aria-haspopup , aria-expanded for states along with aria-controls to define the relation between the popup and the button. The popup overlay uses menu role on the list and each action item has a menuitem role with an aria-label as the menuitem label. The id of the menu refers to the aria-controls of the dropdown button. ## Basic SplitButton has a default action button and a collection of additional options defined by the model property based on MenuModel API. **Example:** ```typescript import { Component, inject } from '@angular/core'; import { SplitButtonModule } from 'primeng/splitbutton'; import { MenuItem, MessageService } from 'primeng/api'; @Component({ template: `
`, standalone: true, imports: [SplitButtonModule], providers: [MessageService] }) export class SplitButtonBasicDemo { private messageService = inject(MessageService); constructor() { this.items = [ { label: 'Update', command: () => { this.update(); } }, { label: 'Delete', command: () => { this.delete(); } }, { label: 'Angular.dev', url: 'https://angular.dev' }, { separator: true }, { label: 'Upload', routerLink: ['/fileupload'] } ]; } save() { this.messageService.add({ severity: 'success', summary: 'Success', detail: 'Data Saved' }); } update() { this.messageService.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated' }); } delete() { this.messageService.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted' }); } } ``` ## Disabled When the disabled attribute is present, the element is uneditable and unfocused. Additionally, the disabled states of the button and menu button can be handled independently. The button is disabled when buttonDisabled is present, and the menu button is disabled when menuButtonDisabled is present. **Example:** ```typescript import { Component, inject } from '@angular/core'; import { SplitButtonModule } from 'primeng/splitbutton'; import { MenuItem, MessageService } from 'primeng/api'; @Component({ template: `
`, standalone: true, imports: [SplitButtonModule], providers: [MessageService] }) export class SplitButtonDisabledDemo { private messageService = inject(MessageService); constructor() { this.items = [ { label: 'Update', command: () => { this.update(); } }, { label: 'Delete', command: () => { this.delete(); } }, { label: 'Angular.dev', url: 'https://angular.dev' }, { separator: true }, { label: 'Upload', routerLink: ['/fileupload'] } ]; } save(severity: string) { this.messageService.add({ severity: severity, summary: 'Success', detail: 'Data Saved' }); } update() { this.messageService.add({ severity: 'success', summary: 'Success', detail: 'Data Updated' }); } delete() { this.messageService.add({ severity: 'success', summary: 'Success', detail: 'Data Deleted' }); } } ``` ## Icons The buttons and menuitems have support to display icons. **Example:** ```typescript import { Component, inject } from '@angular/core'; import { SplitButtonModule } from 'primeng/splitbutton'; import { MenuItem, MessageService } from 'primeng/api'; @Component({ template: `
`, standalone: true, imports: [SplitButtonModule], providers: [MessageService] }) export class SplitButtonIconsDemo { private messageService = inject(MessageService); items: MenuItem[]; constructor() { this.items = [ { label: 'Update', icon: 'pi pi-refresh', command: () => { this.messageService.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 }); } }, { label: 'Delete', icon: 'pi pi-times', command: () => { this.messageService.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 }); } }, { separator: true }, { label: 'Quit', icon: 'pi pi-power-off', command: () => { window.open('https://angular.io/', '_blank'); } } ]; } } ``` ## Nested SplitButton has a default action button and a collection of additional options defined by the model property based on MenuModel API. **Example:** ```typescript import { Component, inject } from '@angular/core'; import { SplitButtonModule } from 'primeng/splitbutton'; import { MenuItem, MessageService } from 'primeng/api'; @Component({ template: `
`, standalone: true, imports: [SplitButtonModule], providers: [MessageService] }) export class SplitButtonNestedDemo { private messageService = inject(MessageService); items: MenuItem[]; constructor() { this.items = [ { label: 'File', icon: 'pi pi-fw pi-file', items: [ { label: 'New', icon: 'pi pi-fw pi-plus', items: [ { label: 'Bookmark', icon: 'pi pi-fw pi-bookmark' }, { label: 'Video', icon: 'pi pi-fw pi-video' } ] }, { label: 'Delete', icon: 'pi pi-fw pi-trash' }, { separator: true }, { label: 'Export', icon: 'pi pi-fw pi-external-link' } ] }, { label: 'Edit', icon: 'pi pi-fw pi-pencil', items: [ { label: 'Left', icon: 'pi pi-fw pi-align-left' }, { label: 'Right', icon: 'pi pi-fw pi-align-right' }, { label: 'Center', icon: 'pi pi-fw pi-align-center' }, { label: 'Justify', icon: 'pi pi-fw pi-align-justify' } ] }, { label: 'Users', icon: 'pi pi-fw pi-user', items: [ { label: 'New', icon: 'pi pi-fw pi-user-plus' }, { label: 'Delete', icon: 'pi pi-fw pi-user-minus' }, { label: 'Search', icon: 'pi pi-fw pi-users', items: [ { label: 'Filter', icon: 'pi pi-fw pi-filter', items: [ { label: 'Print', icon: 'pi pi-fw pi-print' } ] }, { icon: 'pi pi-fw pi-bars', label: 'List' } ] } ] }, { label: 'Events', icon: 'pi pi-fw pi-calendar', items: [ { label: 'Edit', icon: 'pi pi-fw pi-pencil', items: [ { label: 'Save', icon: 'pi pi-fw pi-calendar-plus' }, { label: 'Delete', icon: 'pi pi-fw pi-calendar-minus' } ] }, { label: 'Archieve', icon: 'pi pi-fw pi-calendar-times', items: [ { label: 'Remove', icon: 'pi pi-fw pi-calendar-minus' } ] } ] }, { separator: true }, { label: 'Quit', icon: 'pi pi-fw pi-power-off' } ]; } save(severity: string) { this.messageService.add({ severity: severity, summary: 'Success', detail: 'Data Saved' }); } } ``` ## Outlined Outlined buttons display a border without a background initially. **Example:** ```typescript import { Component, inject } from '@angular/core'; import { SplitButtonModule } from 'primeng/splitbutton'; import { MenuItem, MessageService } from 'primeng/api'; @Component({ template: `
`, standalone: true, imports: [SplitButtonModule], providers: [MessageService] }) export class SplitButtonOutlinedDemo { private messageService = inject(MessageService); items: MenuItem[]; constructor() { this.items = [ { label: 'Update', command: () => { this.update(); } }, { label: 'Delete', command: () => { this.delete(); } }, { label: 'Angular.dev', url: 'https://angular.dev' }, { separator: true }, { label: 'Upload', routerLink: ['/fileupload'] } ]; } save(severity: string) { this.messageService.add({ severity: severity, summary: 'Success', detail: 'Data Saved' }); } update() { this.messageService.add({ severity: 'success', summary: 'Success', detail: 'Data Updated' }); } delete() { this.messageService.add({ severity: 'success', summary: 'Success', detail: 'Data Deleted' }); } } ``` ## Raised Raised buttons display a shadow to indicate elevation. **Example:** ```typescript import { Component, inject } from '@angular/core'; import { SplitButtonModule } from 'primeng/splitbutton'; import { MenuItem, MessageService } from 'primeng/api'; @Component({ template: `
`, standalone: true, imports: [SplitButtonModule], providers: [MessageService] }) export class SplitButtonRaisedDemo { private messageService = inject(MessageService); items: MenuItem[]; constructor() { this.items = [ { label: 'Update', command: () => { this.update(); } }, { label: 'Delete', command: () => { this.delete(); } }, { label: 'Angular.dev', url: 'https://angular.dev' }, { separator: true }, { label: 'Upload', routerLink: ['/fileupload'] } ]; } save(severity: string) { this.messageService.add({ severity: severity, summary: 'Success', detail: 'Data Saved' }); } update() { this.messageService.add({ severity: 'success', summary: 'Success', detail: 'Data Updated' }); } delete() { this.messageService.add({ severity: 'success', summary: 'Success', detail: 'Data Deleted' }); } } ``` ## Raised Text Text buttons can be displayed as raised as well for elevation. **Example:** ```typescript import { Component, inject } from '@angular/core'; import { SplitButtonModule } from 'primeng/splitbutton'; import { MenuItem, MessageService } from 'primeng/api'; @Component({ template: `
`, standalone: true, imports: [SplitButtonModule], providers: [MessageService] }) export class SplitButtonRaisedTextDemo { private messageService = inject(MessageService); items: MenuItem[]; constructor() { this.items = [ { label: 'Update', command: () => { this.update(); } }, { label: 'Delete', command: () => { this.delete(); } }, { label: 'Angular.dev', url: 'https://angular.dev' }, { separator: true }, { label: 'Upload', routerLink: ['/fileupload'] } ]; } save(severity: string) { this.messageService.add({ severity: severity, summary: 'Success', detail: 'Data Saved' }); } update() { this.messageService.add({ severity: 'success', summary: 'Success', detail: 'Data Updated' }); } delete() { this.messageService.add({ severity: 'success', summary: 'Success', detail: 'Data Deleted' }); } } ``` ## reversedkeys-doc Following keys are reserved in the preset scheme and cannot be used as a token name; primitive , semantic , components , directives , colorscheme , light , dark , common , root , states and extend . ## rounded-doc Rounded buttons have a circular border radius. **Example:** ```typescript import { Component, inject } from '@angular/core'; import { SplitButtonModule } from 'primeng/splitbutton'; import { MenuItem, MessageService } from 'primeng/api'; @Component({ template: `
`, standalone: true, imports: [SplitButtonModule], providers: [MessageService] }) export class SplitButtonRoundedDemo { private messageService = inject(MessageService); items: MenuItem[]; constructor() { this.items = [ { label: 'Update', command: () => { this.update(); } }, { label: 'Delete', command: () => { this.delete(); } }, { label: 'Angular.dev', url: 'https://angular.dev' }, { separator: true }, { label: 'Upload', routerLink: ['/fileupload'] } ]; } save(severity: string) { this.messageService.add({ severity: severity, summary: 'Success', detail: 'Data Saved' }); } update() { this.messageService.add({ severity: 'success', summary: 'Success', detail: 'Data Updated' }); } delete() { this.messageService.add({ severity: 'success', summary: 'Success', detail: 'Data Deleted' }); } } ``` ## Severity The severity property defines the type of button. **Example:** ```typescript import { Component, inject } from '@angular/core'; import { SplitButtonModule } from 'primeng/splitbutton'; import { MenuItem, MessageService } from 'primeng/api'; @Component({ template: `
`, standalone: true, imports: [SplitButtonModule], providers: [MessageService] }) export class SplitButtonSeverityDemo { private messageService = inject(MessageService); items: MenuItem[]; constructor() { this.items = [ { label: 'Update', command: () => { this.update(); } }, { label: 'Delete', command: () => { this.delete(); } }, { label: 'Angular.dev', url: 'https://angular.dev' }, { separator: true }, { label: 'Upload', routerLink: ['/fileupload'] } ]; } save() { this.messageService.add({ severity: 'success', summary: 'Success', detail: 'Data Saved' }); } update() { this.messageService.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated' }); } delete() { this.messageService.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted' }); } } ``` ## Sizes SplitButton provides small and large sizes as alternatives to the standard. **Example:** ```typescript import { Component, inject } from '@angular/core'; import { SplitButtonModule } from 'primeng/splitbutton'; import { MenuItem, MessageService } from 'primeng/api'; @Component({ template: `
`, standalone: true, imports: [SplitButtonModule], providers: [MessageService] }) export class SplitButtonSizesDemo { private messageService = inject(MessageService); constructor() { this.items = [ { label: 'Update', command: () => { this.update(); } }, { label: 'Delete', command: () => { this.delete(); } }, { label: 'Angular.dev', url: 'https://angular.dev' }, { separator: true }, { label: 'Upload', routerLink: ['/fileupload'] } ]; } save(severity: string) { this.messageService.add({ severity: severity, summary: 'Success', detail: 'Data Saved' }); } update() { this.messageService.add({ severity: 'success', summary: 'Success', detail: 'Data Updated' }); } delete() { this.messageService.add({ severity: 'success', summary: 'Success', detail: 'Data Deleted' }); } } ``` ## Template SplitButton has a default action button and a collection of additional options defined by the model property based on MenuModel API. **Example:** ```typescript import { Component, inject } from '@angular/core'; import { SplitButtonModule } from 'primeng/splitbutton'; import { MenuItem, MessageService } from 'primeng/api'; @Component({ template: `
logo PrimeNG
`, standalone: true, imports: [SplitButtonModule], providers: [MessageService] }) export class SplitButtonTemplateDemo { private messageService = inject(MessageService); items: MenuItem[]; constructor() { this.items = [ { label: 'Update', command: () => { this.update(); } }, { label: 'Delete', command: () => { this.delete(); } }, { label: 'Angular.dev', url: 'https://angular.dev' }, { separator: true }, { label: 'Upload', routerLink: ['/fileupload'] } ]; } save() { this.messageService.add({ severity: 'success', summary: 'Success', detail: 'Data Saved' }); } update() { this.messageService.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated' }); } delete() { this.messageService.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted' }); } } ``` ## Text Text buttons are displayed as textual elements. **Example:** ```typescript import { Component, inject } from '@angular/core'; import { SplitButtonModule } from 'primeng/splitbutton'; import { MenuItem, MessageService } from 'primeng/api'; @Component({ template: `
`, standalone: true, imports: [SplitButtonModule], providers: [MessageService] }) export class SplitButtonTextDemo { private messageService = inject(MessageService); items: MenuItem[]; constructor() { this.items = [ { label: 'Update', command: () => { this.update(); } }, { label: 'Delete', command: () => { this.delete(); } }, { label: 'Angular.dev', url: 'https://angular.dev' }, { separator: true }, { label: 'Upload', routerLink: ['/fileupload'] } ]; } save(severity: string) { this.messageService.add({ severity: severity, summary: 'Success', detail: 'Data Saved' }); } update() { this.messageService.add({ severity: 'success', summary: 'Success', detail: 'Data Updated' }); } delete() { this.messageService.add({ severity: 'success', summary: 'Success', detail: 'Data Deleted' }); } } ``` ## Split Button SplitButton groups a set of commands in an overlay with a default command. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | | model_ | MenuItem[] | - | MenuModel instance to define the overlay items. | | severity | "success" \| "info" \| "warn" \| "danger" \| "help" \| "primary" \| "secondary" \| "contrast" \| null \| undefined | - | Defines the style of the button. | | raised | boolean | - | Add a shadow to indicate elevation. | | rounded | boolean | - | Add a circular border radius to the button. | | text | boolean | - | Add a textual class to the button without a background initially. | | outlined | boolean | - | Add a border class without a background initially. | | size | "small" \| "large" | - | Defines the size of the button. | | plain | boolean | - | Add a plain textual class to the button without a background initially. | | icon | string | - | Name of the icon. | | iconPos | "left" \| "right" | - | Position of the icon. | | label | string | - | Text of the button. | | tooltip | string | - | Tooltip for the main button. | | tooltipOptions | TooltipOptions | - | Tooltip options for the main button. | | menuStyle | Partial | - | Inline style of the overlay menu. | | menuStyleClass | string | - | Style class of the overlay menu. | | dropdownIcon | string | - | Name of the dropdown icon. | | appendTo | HTMLElement \| ElementRef \| TemplateRef \| "self" \| "body" \| null \| undefined | 'body' | Target element to attach the overlay, valid values are "body" or a local ng-template variable of another element (note: use binding with brackets for template variables, e.g. [appendTo]="mydiv" for a div element having #mydiv as variable name). | | dir | string | - | Indicates the direction of the element. | | expandAriaLabel | string | - | Defines a string that labels the expand button for accessibility. | | motionOptions | MotionOptions | - | The motion options. | | autofocus | boolean | - | When present, it specifies that the component should automatically get focus on load. | | disabled | boolean | - | When present, it specifies that the element should be disabled. | | tabindex | number | - | Index of the element in tabbing order. | | menuButtonDisabled | boolean | - | When present, it specifies that the menu button element should be disabled. | | buttonDisabled | boolean | - | When present, it specifies that the button element should be disabled. | ### Emits | Name | Parameters | Description | |------|------------|-------------| | onClick | event: MouseEvent | Callback to invoke when default command button is clicked. | | onMenuHide | value: void | Callback to invoke when overlay menu is hidden. | | onMenuShow | value: void | Callback to invoke when overlay menu is shown. | | onDropdownClick | event: MouseEvent | Callback to invoke when dropdown button is clicked. | ### Templates | Name | Type | Description | |------|------|-------------| | content | TemplateRef | Custom content template. | | dropdownicon | TemplateRef | Custom dropdown icon template. | ## Pass Through Options | Name | Type | Description | |------|------|-------------| | root | PassThroughOption | Used to pass attributes to the root's DOM element. | | pcButton | ButtonPassThrough | Used to pass attributes to the Button component. | | pcDropdown | ButtonPassThrough | Used to pass attributes to the dropdown Button component. | | pcMenu | MenuPassThrough | Used to pass attributes to the TieredMenu component. | ## Theming ### CSS Classes | Class | Description | |-------|-------------| | p-splitbutton | Class name of the root element | | p-splitbutton-button | Class name of the button element | | p-splitbutton-dropdown | Class name of the dropdown element | ### Design Tokens | Token | CSS Variable | Description | |-------|--------------|-------------| | splitbutton.border.radius | --p-splitbutton-border-radius | Border radius of root | | splitbutton.rounded.border.radius | --p-splitbutton-rounded-border-radius | Rounded border radius of root | | splitbutton.raised.shadow | --p-splitbutton-raised-shadow | Raised shadow of root | --- # Angular Splitter Component Splitter is utilized to separate and resize panels. ## Accessibility Screen Reader Splitter bar defines separator as the role with aria-orientation set to either horizontal or vertical. Keyboard Support Key Function tab Moves focus through the splitter bar. down arrow Moves a vertical splitter down. up arrow Moves a vertical splitter up. left arrow Moves a vertical splitter to the left. right arrow Moves a vertical splitter to the right. ## Horizontal Splitter requires two SplitterPanel components as children which are displayed horizontally by default. **Example:** ```typescript import { Component } from '@angular/core'; import { SplitterModule } from 'primeng/splitter'; @Component({ template: `
Panel 1
Panel 2
 `, standalone: true, imports: [SplitterModule] }) export class SplitterHorizontalDemo {} ``` ## Nested Splitters can be combined to create advanced layouts. **Example:** ```typescript import { Component } from '@angular/core'; import { SplitterModule } from 'primeng/splitter'; @Component({ template: `
Panel 1
Panel 2
Panel 3
Panel 4
 `, standalone: true, imports: [SplitterModule] }) export class SplitterNestedDemo {} ``` ## Size When no panelSizes are defined, panels are split 50/50, use the panelSizes property to give relative widths e.g. [25, 75]. **Example:** ```typescript import { Component } from '@angular/core'; import { SplitterModule } from 'primeng/splitter'; @Component({ template: `
Panel 1
Panel 2
 `, standalone: true, imports: [SplitterModule] }) export class SplitterSizeDemo {} ``` ## Vertical Panels are displayed as stacked by setting the layout to vertical . **Example:** ```typescript import { Component } from '@angular/core'; import { SplitterModule } from 'primeng/splitter'; @Component({ template: `
Panel 1
Panel 2
 `, standalone: true, imports: [SplitterModule] }) export class SplitterVerticalDemo {} ``` ## Splitter Splitter is utilized to separate and resize panels. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | | panelStyleClass | string | - | Style class of the panel. | | panelStyle | Partial | - | Inline style of the panel. | | stateStorage | "session" \| "local" | - | Defines where a stateful splitter keeps its state, valid values are 'session' for sessionStorage and 'local' for localStorage. | | stateKey | string | - | Storage identifier of a stateful Splitter. | | layout | "horizontal" \| "vertical" | - | Orientation of the panels. Valid values are 'horizontal' and 'vertical'. | | gutterSize | number | - | Size of the divider in pixels. | | step | number | - | Step factor to increment/decrement the size of the panels while pressing the arrow keys. | | minSizes | number[] | - | Minimum size of the elements relative to 100%. | | panelSizes | number[] | - | Size of the elements relative to 100%. | ### Emits | Name | Parameters | Description | |------|------------|-------------| | onResizeEnd | event: SplitterResizeEndEvent | Callback to invoke when resize ends. | | onResizeStart | event: SplitterResizeStartEvent | Callback to invoke when resize starts. | ## Pass Through Options | Name | Type | Description | |------|------|-------------| | root | PassThroughOption | Used to pass attributes to the root's DOM element. | | panel | PassThroughOption | Used to pass attributes to the panel's DOM element. | | gutter | PassThroughOption | Used to pass attributes to the gutter's DOM element. | | gutterHandle | PassThroughOption | Used to pass attributes to the gutter handle's DOM element. | ## Theming ### CSS Classes | Class | Description | |-------|-------------| | p-splitter | Class name of the root element | | p-splitter-gutter | Class name of the gutter element | | p-splitter-gutter-handle | Class name of the gutter handle element | ### Design Tokens | Token | CSS Variable | Description | |-------|--------------|-------------| | splitter.background | --p-splitter-background | Background of root | | splitter.border.color | --p-splitter-border-color | Border color of root | | splitter.color | --p-splitter-color | Color of root | | splitter.transition.duration | --p-splitter-transition-duration | Transition duration of root | | splitter.gutter.background | --p-splitter-gutter-background | Background of gutter | | splitter.handle.size | --p-splitter-handle-size | Size of handle | | splitter.handle.background | --p-splitter-handle-background | Background of handle | | splitter.handle.border.radius | --p-splitter-handle-border-radius | Border radius of handle | | splitter.handle.focus.ring.width | --p-splitter-handle-focus-ring-width | Focus ring width of handle | | splitter.handle.focus.ring.style | --p-splitter-handle-focus-ring-style | Focus ring style of handle | | splitter.handle.focus.ring.color | --p-splitter-handle-focus-ring-color | Focus ring color of handle | | splitter.handle.focus.ring.offset | --p-splitter-handle-focus-ring-offset | Focus ring offset of handle | | splitter.handle.focus.ring.shadow | --p-splitter-handle-focus-ring-shadow | Focus ring shadow of handle | --- # Angular Stepper Component The Stepper component displays a wizard-like workflow by guiding users through the multi-step progression. ## Accessibility Screen Reader Stepper container is defined with the tablist role, as any attribute is passed to the container element aria-labelledby can be optionally used to specify an element to describe the Stepper. Each stepper header has a tab role and aria-controls to refer to the corresponding stepper content element. The content element of each stepper has tabpanel role, an id to match the aria-controls of the header and aria-labelledby reference to the header as the accessible name. Tab Header Keyboard Support Key Function tab Moves focus through the header. enter Activates the focused stepper header. space Activates the focused stepper header. ## basic-doc Stepper consists of a combination of StepList , Step , StepPanels and StepPanel components. The value property is essential for associating Step and StepPanel with each other. **Example:** ```typescript import { Component } from '@angular/core'; import { ButtonModule } from 'primeng/button'; import { StepperModule } from 'primeng/stepper'; @Component({ template: `
Header I Header II Header II
Content I
Content II
Content III
`, standalone: true, imports: [ButtonModule, StepperModule] }) export class StepperBasicDemo {} ``` ## Linear When linear property is set to true, current step must be completed in order to move to the next step. **Example:** ```typescript import { Component } from '@angular/core'; import { ButtonModule } from 'primeng/button'; import { StepperModule } from 'primeng/stepper'; @Component({ template: `
Header I Header II Header II
Content I
Content II
Content III
`, standalone: true, imports: [ButtonModule, StepperModule] }) export class StepperLinearDemo {} ``` ## stepsonly Use Stepper with a StepList only for custom requirements where a progress indicator is needed. ## Template Stepper provides various templating options to customize the default UI design. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { ButtonModule } from 'primeng/button'; import { PasswordModule } from 'primeng/password'; import { StepperModule } from 'primeng/stepper'; import { ToggleButtonModule } from 'primeng/togglebutton'; import { InputTextModule } from 'primeng/inputtext'; @Component({ template: `
Create your account
Choose your interests
Account created successfully
logo
`, standalone: true, imports: [ButtonModule, PasswordModule, StepperModule, ToggleButtonModule, InputTextModule, FormsModule] }) export class StepperTemplateDemo { activeStep: number = 1; name: string | undefined = null; email: string | undefined = null; password: string | undefined = null; option1: boolean | undefined = false; option2: boolean | undefined = false; option3: boolean | undefined = false; option4: boolean | undefined = false; option5: boolean | undefined = false; option6: boolean | undefined = false; option7: boolean | undefined = false; option8: boolean | undefined = false; option9: boolean | undefined = false; option10: boolean | undefined = false; } ``` ## Vertical Vertical layout requires StepItem as a wrapper of Step and StepPanel components. **Example:** ```typescript import { Component } from '@angular/core'; import { ButtonModule } from 'primeng/button'; import { StepperModule } from 'primeng/stepper'; @Component({ template: ` Header I
Content I
 Header II
Content II
 Header III
Content III
 `, standalone: true, imports: [ButtonModule, StepperModule] }) export class StepperVerticalDemo {} ``` ## Stepper Stepper is a component that streamlines a wizard-like workflow, organizing content into coherent steps and visually guiding users through a numbered progression in a multistep process. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | | value | number | undefined | A model that can hold a numeric value or be undefined. | | linear | boolean | false | A boolean variable that captures user input. | | motionOptions | MotionOptions | - | The motion options. | ## Step Item StepItem is a helper component for Stepper component used in vertical orientation. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | | value | number | undefined | Value of step. | ## Step Panel StepPanel is a helper component for Stepper component. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | | value | number | undefined | Active value of stepper. | ### Templates | Name | Type | Description | |------|------|-------------| | content | TemplateRef | Content template. | ## Step Step is a helper component for Stepper component. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | | value | number | undefined | Active value of stepper. | | disabled | boolean | false | Whether the step is disabled. | ### Templates | Name | Type | Description | |------|------|-------------| | content | TemplateRef | Content template. | ## Stepper Separator StepperSeparator is a helper component for Stepper component used in vertical orientation. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | ## Pass Through Options | Name | Type | Description | |------|------|-------------| | root | PassThroughOption | Used to pass attributes to the root's DOM element. | | motion | MotionOptions | Used to pass options to the motion component/directive. | ## Theming ### CSS Classes | Class | Description | |-------|-------------| | p-stepper | Class name of the root element | | p-stepper-separator | Class name of the separator element | ### Design Tokens | Token | CSS Variable | Description | |-------|--------------|-------------| | stepper.transition.duration | --p-stepper-transition-duration | Transition duration of root | | stepper.separator.background | --p-stepper-separator-background | Background of separator | | stepper.separator.active.background | --p-stepper-separator-active-background | Active background of separator | | stepper.separator.margin | --p-stepper-separator-margin | Margin of separator | | stepper.separator.size | --p-stepper-separator-size | Size of separator | | stepper.step.padding | --p-stepper-step-padding | Padding of step | | stepper.step.gap | --p-stepper-step-gap | Gap of step | | stepper.step.header.padding | --p-stepper-step-header-padding | Padding of step header | | stepper.step.header.border.radius | --p-stepper-step-header-border-radius | Border radius of step header | | stepper.step.header.focus.ring.width | --p-stepper-step-header-focus-ring-width | Focus ring width of step header | | stepper.step.header.focus.ring.style | --p-stepper-step-header-focus-ring-style | Focus ring style of step header | | stepper.step.header.focus.ring.color | --p-stepper-step-header-focus-ring-color | Focus ring color of step header | | stepper.step.header.focus.ring.offset | --p-stepper-step-header-focus-ring-offset | Focus ring offset of step header | | stepper.step.header.focus.ring.shadow | --p-stepper-step-header-focus-ring-shadow | Focus ring shadow of step header | | stepper.step.header.gap | --p-stepper-step-header-gap | Gap of step header | | stepper.step.title.color | --p-stepper-step-title-color | Color of step title | | stepper.step.title.active.color | --p-stepper-step-title-active-color | Active color of step title | | stepper.step.title.font.weight | --p-stepper-step-title-font-weight | Font weight of step title | | stepper.step.title.font.size | --p-stepper-step-title-font-size | Font size of step title | | stepper.step.number.background | --p-stepper-step-number-background | Background of step number | | stepper.step.number.active.background | --p-stepper-step-number-active-background | Active background of step number | | stepper.step.number.border.color | --p-stepper-step-number-border-color | Border color of step number | | stepper.step.number.active.border.color | --p-stepper-step-number-active-border-color | Active border color of step number | | stepper.step.number.color | --p-stepper-step-number-color | Color of step number | | stepper.step.number.active.color | --p-stepper-step-number-active-color | Active color of step number | | stepper.step.number.size | --p-stepper-step-number-size | Size of step number | | stepper.step.number.font.size | --p-stepper-step-number-font-size | Font size of step number | | stepper.step.number.font.weight | --p-stepper-step-number-font-weight | Font weight of step number | | stepper.step.number.border.radius | --p-stepper-step-number-border-radius | Border radius of step number | | stepper.step.number.shadow | --p-stepper-step-number-shadow | Shadow of step number | | stepper.steppanels.padding | --p-stepper-steppanels-padding | Padding of steppanels | | stepper.steppanel.background | --p-stepper-steppanel-background | Background of steppanel | | stepper.steppanel.color | --p-stepper-steppanel-color | Color of steppanel | | stepper.steppanel.padding | --p-stepper-steppanel-padding | Padding of steppanel | | stepper.steppanel.indent | --p-stepper-steppanel-indent | Indent of steppanel | --- # Angular StyleClass Component StyleClass manages css classes declaratively to during enter/leave animations or just to toggle classes on an element. ## Animation Classes to apply during enter and leave animations are specified using the enterFromClass , enterActiveClass , enterToClass , leaveFromClass , leaveActiveClass , leaveToClass properties. In addition in case the target is an overlay, hideOnOutsideClick would be handy to hide the target if outside of the popup is clicked, or enable hideOnEscape to close the popup by listening escape key. **Example:** ```typescript import { Component } from '@angular/core'; import { ButtonModule } from 'primeng/button'; @Component({ template: `
Custom
`, standalone: true, imports: [ButtonModule] }) export class StyleClassAnimationDemo {} ``` ## Hide On Resize When hideOnResize is enabled, the leave animation is triggered automatically when resizing occurs. Use the resizeSelector property to specify whether to listen to window resize events or element-specific resize events. Set resizeSelector to "window" (default) or "document" for browser resize, or a CSS selector to observe the target element's dimensions. **Example:** ```typescript import { Component } from '@angular/core'; import { ButtonModule } from 'primeng/button'; @Component({ template: `
`, standalone: true, imports: [ButtonModule] }) export class StyleClassHideOnResizeDemo {} ``` ## Toggle Class StyleClass has two modes, toggleClass to simply add-remove a class and enter/leave animations. The target element to change the styling is defined with the selector property that accepts any valid CSS selector or keywords including @next , prev , parent , grandparent **Example:** ```typescript import { Component } from '@angular/core'; import { ButtonModule } from 'primeng/button'; import { InputTextModule } from 'primeng/inputtext'; @Component({ template: `
`, standalone: true, imports: [ButtonModule, InputTextModule] }) export class StyleClassToggleClassDemo {} ``` --- # Angular Table Component Table displays data in tabular format. ## Accessibility Screen Reader Default role of the table is table . Header, body and footer elements use rowgroup , rows use row role, header cells have columnheader and body cells use cell roles. Sortable headers utilizer aria-sort attribute either set to "ascending" or "descending". Table rows and table cells should be specified by users using the aria-posinset , aria-setsize , aria-label , and aria-describedby attributes, as they are determined through templating. Built-in checkbox and radiobutton components for row selection use checkbox and radiobutton . The label to describe them is retrieved from the aria.selectRow and aria.unselectRow properties of the locale API. Similarly header checkbox uses selectAll and unselectAll keys. When a row is selected, aria-selected is set to true on a row. The element to expand or collapse a row is a button with aria-expanded and aria-controls properties. Value to describe the buttons is derived from aria.expandRow and aria.collapseRow properties of the locale API. The filter menu button use aria.showFilterMenu and aria.hideFilterMenu properties as aria-label in addition to the aria-haspopup , aria-expanded and aria-controls to define the relation between the button and the overlay. Popop menu has dialog role with aria-modal as focus is kept within the overlay. The operator dropdown use aria.filterOperator and filter constraints dropdown use aria.filterConstraint properties. Buttons to add rules on the other hand utilize aria.addRule and aria.removeRule properties. The footer buttons similarly use aria.clear and aria.apply properties. filterInputProps of the Column component can be used to define aria labels for the built-in filter components, if a custom component is used with templating you also may define your own aria labels as well. Editable cells use custom templating so you need to manage aria roles and attributes manually if required. The row editor controls are button elements with aria.editRow , aria.cancelEdit and aria.saveEdit used for the aria-label . Paginator is a standalone component used inside the Table, refer to the paginator for more information about the accessibility features. Keyboard Support Any button element inside the Table used for cases like filter, row expansion, edit are tabbable and can be used with space and enter keys. Sortable Headers Keyboard Support Key Function tab Moves through the headers. enter Sorts the column. space Sorts the column. Filter Menu Keyboard Support Key Function tab Moves through the elements inside the popup. escape Hides the popup. enter Opens the popup. Selection Keyboard Support Key Function tab Moves focus to the first selected row, if there is none then first row receives the focus. up arrow Moves focus to the previous row. down arrow Moves focus to the next row. enter Toggles the selected state of the focused row depending on the metaKeySelection setting. space Toggles the selected state of the focused row depending on the metaKeySelection setting. home Moves focus to the first row. end Moves focus to the last row. shift + down arrow Moves focus to the next row and toggles the selection state. shift + up arrow Moves focus to the previous row and toggles the selection state. shift + space Selects the rows between the most recently selected row and the focused row. control + shift + home Selects the focused rows and all the options up to the first one. control + shift + end Selects the focused rows and all the options down to the last one. control + a Selects all rows. ## Basic DataTable requires a collection to display along with column components for the representation of the data. **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { Table, TableModule } from 'primeng/table'; import { ProductService } from '@/service/productservice'; import { Product } from '@/domain/product'; @Component({ template: ` Code Name Category Quantity {{ product.code }} {{ product.name }} {{ product.category }} {{ product.quantity }} `, standalone: true, imports: [TableModule], providers: [ProductService] }) export class TableBasicDemo implements OnInit { private productService = inject(ProductService); products!: Product[]; ngOnInit() { this.productService.getProductsMini().then((data) => { this.products = data; }); } } ``` ## celledit-doc In-cell editing is enabled by adding pEditableColumn directive to an editable cell that has a p-cell-editor helper component to define the input-output templates for the edit and view modes respectively. **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { TableModule } from 'primeng/table'; import { InputTextModule } from 'primeng/inputtext'; import { ProductService } from '@/service/productservice'; import { Product } from '@/domain/product'; @Component({ template: ` Code Name Quantity Price {{ product.code }} {{ product.name }} {{ product.quantity }} {{ product.price | currency: 'USD' }} `, standalone: true, imports: [TableModule, InputTextModule, FormsModule], providers: [ProductService] }) export class TableCellEditDemo implements OnInit { private productService = inject(ProductService); products!: Product[]; ngOnInit() { this.productService.getProductsMini().then((data) => { this.products = data; }); } } ``` ## checkboxselection-doc Multiple selection can also be handled using checkboxes by enabling the selectionMode property of column as multiple . **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { TableModule } from 'primeng/table'; import { ProductService } from '@/service/productservice'; import { Product } from '@/domain/product'; @Component({ template: ` Code Name Category Quantity {{ product.code }} {{ product.name }} {{ product.category }} {{ product.quantity }} `, standalone: true, imports: [TableModule], providers: [ProductService] }) export class TableCheckboxSelectionDemo implements OnInit { private productService = inject(ProductService); products!: Product[]; selectedProducts!: Product; ngOnInit() { this.productService.getProductsMini().then((data) => { this.products = data; }); } } ``` ## columngroup-doc Columns can be grouped using rowspan and colspan properties. **Example:** ```typescript import { Component, OnInit } from '@angular/core'; import { TableModule } from 'primeng/table'; import { Product } from '@/domain/product'; @Component({ template: ` Product Sale Rate Sales Profits Last Year This Year Last Year This Year {{ sale.product }} {{ sale.lastYearSale }}% {{ sale.thisYearSale }}% {{ sale.lastYearProfit | currency: 'USD' }} {{ sale.thisYearProfit | currency: 'USD' }} Totals {{ lastYearTotal | currency: 'USD' }} {{ thisYearTotal | currency: 'USD' }} `, standalone: true, imports: [TableModule] }) export class TableColumnGroupDemo implements OnInit { sales!: any[]; lastYearTotal!: number; thisYearTotal!: number; ngOnInit() { this.sales = [ { product: 'Bamboo Watch', lastYearSale: 51, thisYearSale: 40, lastYearProfit: 54406, thisYearProfit: 43342 }, { product: 'Black Watch', lastYearSale: 83, thisYearSale: 9, lastYearProfit: 423132, thisYearProfit: 312122 }, { product: 'Blue Band', lastYearSale: 38, thisYearSale: 5, lastYearProfit: 12321, thisYearProfit: 8500 }, { product: 'Blue T-Shirt', lastYearSale: 49, thisYearSale: 22, lastYearProfit: 745232, thisYearProfit: 65323 }, { product: 'Brown Purse', lastYearSale: 17, thisYearSale: 79, lastYearProfit: 643242, thisYearProfit: 500332 }, { product: 'Chakra Bracelet', lastYearSale: 52, thisYearSale: 65, lastYearProfit: 421132, thisYearProfit: 150005 }, { product: 'Galaxy Earrings', lastYearSale: 82, thisYearSale: 12, lastYearProfit: 131211, thisYearProfit: 100214 }, { product: 'Game Controller', lastYearSale: 44, thisYearSale: 45, lastYearProfit: 66442, thisYearProfit: 53322 }, { product: 'Gaming Set', lastYearSale: 90, thisYearSale: 56, lastYearProfit: 765442, thisYearProfit: 296232 }, { product: 'Gold Phone Case', lastYearSale: 75, thisYearSale: 54, lastYearProfit: 21212, thisYearProfit: 12533 } ]; this.calculateLastYearTotal(); this.calculateThisYearTotal(); } calculateThisYearTotal() { let total = 0; for (let sale of this.sales) { total += sale.thisYearProfit; } this.thisYearTotal = total; } } ``` ## columnresizeexpandmode-doc Setting columnResizeMode as expand changes the table width as well. **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { TableModule } from 'primeng/table'; import { ProductService } from '@/service/productservice'; import { Product } from '@/domain/product'; @Component({ template: ` Code Name Category Quantity {{ product.code }} {{ product.name }} {{ product.category }} {{ product.quantity }} `, standalone: true, imports: [TableModule], providers: [ProductService] }) export class TableColumnResizeExpandModeDemo implements OnInit { private productService = inject(ProductService); products!: Product[]; ngOnInit() { this.productService.getProductsMini().then((data) => { this.products = data; }); } } ``` ## columnresizefitmode-doc Columns can be resized using drag drop by setting the resizableColumns to true . Fit mode is the default one and the overall table width does not change when a column is resized. **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { TableModule } from 'primeng/table'; import { ProductService } from '@/service/productservice'; import { Product } from '@/domain/product'; @Component({ template: ` Code Name Category Quantity {{ product.code }} {{ product.name }} {{ product.category }} {{ product.quantity }} `, standalone: true, imports: [TableModule], providers: [ProductService] }) export class TableColumnResizeFitModeDemo implements OnInit { private productService = inject(ProductService); products!: Product[]; ngOnInit() { this.productService.getProductsMini().then((data) => { this.products = data; }); } } ``` ## columnresizescrollablemode-doc **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { TableModule } from 'primeng/table'; import { CustomerService } from '@/service/customerservice'; import { Customer, Representative, Country } from '@/domain/customer'; @Component({ template: ` Name Country Company Representative {{ customer.name }} {{ customer.country.name }} {{ customer.company }} {{ customer.representative.name }} `, standalone: true, imports: [TableModule], providers: [CustomerService] }) export class TableColumnResizeScrollableModeDemo implements OnInit { private customerService = inject(CustomerService); customers!: Customer[]; ngOnInit() { this.customerService.getCustomersLarge().then((customers) => { this.customers = customers; }); } } ``` ## columnselection-doc Row selection with an element inside a column is implemented with templating. **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { ButtonModule } from 'primeng/button'; import { TableModule } from 'primeng/table'; import { ProductService } from '@/service/productservice'; import { MessageService } from 'primeng/api'; import { Product } from '@/domain/product'; @Component({ template: ` Code Name Category Quantity {{ product.code }} {{ product.name }} {{ product.category }} {{ product.quantity }} `, standalone: true, imports: [ButtonModule, TableModule], providers: [ProductService, MessageService] }) export class TableColumnSelectionDemo implements OnInit { private productService = inject(ProductService); private messageService = inject(MessageService); products!: Product[]; selectedProduct!: Product; ngOnInit() { this.productService.getProductsMini().then((data) => { this.products = data; }); } selectProduct(product: Product) { this.messageService.add({ severity: 'info', summary: 'Product Selected', detail: product.name }); } } ``` ## columntoggle-doc This demo uses a multiselect component to implement toggleable columns. **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { MultiSelectModule } from 'primeng/multiselect'; import { TableModule } from 'primeng/table'; import { ProductService } from '@/service/productservice'; import { Product } from '@/domain/product'; interface Column { field: string; header: string; } @Component({ template: ` Code @for (col of columns; track col) { {{ col.header }} } {{ product.code }} @for (col of columns; track col) { {{ product[col.field] }} } `, standalone: true, imports: [MultiSelectModule, TableModule, FormsModule], providers: [ProductService] }) export class TableColumnToggleDemo implements OnInit { private productService = inject(ProductService); products!: Product[]; cols!: Column[]; selectedColumns!: Column[]; ngOnInit() { this.productService.getProductsMini().then((data) => { this.products = data; }); this.cols = [ { field: 'name', header: 'Name' }, { field: 'category', header: 'Category' }, { field: 'quantity', header: 'Quantity' } ]; this.selectedColumns = this.cols; } } ``` ## contextmenu-doc Table has exclusive integration with contextmenu component. In order to attach a menu to a table, add pContextMenuRow directive to the rows that can be selected with context menu, define a local template variable for the menu and bind it to the contextMenu property of the table. This enables displaying the menu whenever a row is right clicked. Optional pContextMenuRowIndex property is available to access the row index. A separate contextMenuSelection property is used to get a hold of the right clicked row. For dynamic columns, setting pContextMenuRowDisabled property as true disables context menu for that particular row. **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { ContextMenuModule } from 'primeng/contextmenu'; import { Table, TableModule } from 'primeng/table'; import { ProductService } from '@/service/productservice'; import { MenuItem, MessageService } from 'primeng/api'; import { Product } from '@/domain/product'; @Component({ template: ` Code Name Category Price {{ product.code }} {{ product.name }} {{ product.category }} {{ product.price | currency: 'USD' }} `, standalone: true, imports: [ContextMenuModule, TableModule], providers: [ProductService, MessageService] }) export class TableContextMenuDemo implements OnInit { private productService = inject(ProductService); private messageService = inject(MessageService); products!: Product[]; selectedProduct!: Product; items!: MenuItem[]; ngOnInit() { this.productService.getProductsMini().then((data) => { this.products = data; }); this.items = [ { label: 'View', icon: 'pi pi-fw pi-search', command: () => this.viewProduct(this.selectedProduct) }, { label: 'Delete', icon: 'pi pi-fw pi-times', command: () => this.deleteProduct(this.selectedProduct) } ]; } viewProduct(product: Product) { this.messageService.add({ severity: 'info', summary: 'Product Selected', detail: product.name }); } deleteProduct(product: Product) { this.products = this.products.filter((p) => p.id !== product.id); this.messageService.add({ severity: 'error', summary: 'Product Deleted', detail: product.name }); this.selectedProduct = null; } } ``` ## Customers DataTable with selection, pagination, filtering, sorting and templating. **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { ButtonModule } from 'primeng/button'; import { SelectModule } from 'primeng/select'; import { IconFieldModule } from 'primeng/iconfield'; import { InputIconModule } from 'primeng/inputicon'; import { MultiSelectModule } from 'primeng/multiselect'; import { ProgressBarModule } from 'primeng/progressbar'; import { SliderModule } from 'primeng/slider'; import { Table, TableModule } from 'primeng/table'; import { TagModule } from 'primeng/tag'; import { InputTextModule } from 'primeng/inputtext'; import { CustomerService } from '@/service/customerservice'; import { Customer, Representative, Country } from '@/domain/customer'; @Component({ template: `
Name
Country
Agent
{{ option.name }}
Date
Balance
Status
Activity
{{ activityValues[0] }} {{ activityValues[1] }}
{{ customer.name }}
{{ customer.country.name }}
{{ customer.representative.name }}
{{ customer.date | date: 'MM/dd/yyyy' }} {{ customer.balance | currency: 'USD' : 'symbol' }} No customers found. `, standalone: true, imports: [ButtonModule, SelectModule, IconFieldModule, InputIconModule, MultiSelectModule, ProgressBarModule, SliderModule, TableModule, TagModule, InputTextModule, FormsModule], providers: [CustomerService] }) export class TableCustomersDemo implements OnInit { private customerService = inject(CustomerService); customers!: Customer[]; selectedCustomers!: Customer[]; representatives!: Representative[]; statuses!: any[]; loading: boolean = true; activityValues: number[] = [0, 100]; searchValue: string | undefined; ngOnInit() { this.customerService.getCustomersLarge().then((customers) => { this.customers = customers; this.loading = false; this.customers.forEach((customer) => (customer.date = new Date(customer.date))); }); this.representatives = [ { name: 'Amy Elsner', image: 'amyelsner.png' }, { name: 'Anna Fali', image: 'annafali.png' }, { name: 'Asiya Javayant', image: 'asiyajavayant.png' }, { name: 'Bernardo Dominic', image: 'bernardodominic.png' }, { name: 'Elwin Sharvill', image: 'elwinsharvill.png' }, { name: 'Ioni Bowcher', image: 'ionibowcher.png' }, { name: 'Ivan Magalhaes', image: 'ivanmagalhaes.png' }, { name: 'Onyama Limba', image: 'onyamalimba.png' }, { name: 'Stephen Shaw', image: 'stephenshaw.png' }, { name: 'Xuxue Feng', image: 'xuxuefeng.png' } ]; this.statuses = [ { label: 'Unqualified', value: 'unqualified' }, { label: 'Qualified', value: 'qualified' }, { label: 'New', value: 'new' }, { label: 'Negotiation', value: 'negotiation' }, { label: 'Renewal', value: 'renewal' }, { label: 'Proposal', value: 'proposal' } ]; } clear(dt: Table) { this.searchValue = ''; dt.reset(); } getSeverity(status: string) { switch (status) { case 'unqualified': return 'danger'; case 'qualified': return 'success'; case 'new': return 'info'; case 'negotiation': return 'warn'; case 'renewal': return null; } } } ``` ## Dynamic Columns Columns can be defined dynamically using the @for block. **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { TableModule } from 'primeng/table'; import { ProductService } from '@/service/productservice'; import { Product } from '@/domain/product'; interface Column { field: string; header: string; } @Component({ template: ` @for (col of columns; track col) { {{ col.header }} } @for (col of columns; track col) { {{ rowData[col.field] }} } `, standalone: true, imports: [TableModule], providers: [ProductService] }) export class TableDynamicDemo implements OnInit { private productService = inject(ProductService); products!: Product[]; cols!: Column[]; ngOnInit() { this.productService.getProductsMini().then((data) => { this.products = data; }); this.cols = [ { field: 'code', header: 'Code' }, { field: 'name', header: 'Name' }, { field: 'category', header: 'Category' }, { field: 'quantity', header: 'Quantity' } ]; } } ``` ## expandablerowgroup-doc When expandableRowGroups is present in subheader based row grouping, groups can be expanded and collapsed. State of the expansions are controlled using the expandedRows and onRowToggle properties. **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { TableModule } from 'primeng/table'; import { TagModule } from 'primeng/tag'; import { ButtonModule } from 'primeng/button'; import { RippleModule } from 'primeng/ripple'; import { CustomerService } from '@/service/customerservice'; import { Customer, Country } from '@/domain/customer'; @Component({ template: ` Name Country Company Status Date {{ customer.representative.name }} Total Customers {{ calculateCustomerTotal(customer.representative.name) }} {{ customer.name }}
{{ customer.country.name }}
{{ customer.company }} {{ customer.date }} `, standalone: true, imports: [TableModule, TagModule, ButtonModule, RippleModule], providers: [CustomerService] }) export class TableExpandableRowGroupDemo implements OnInit { private customerService = inject(CustomerService); customers!: Customer[]; ngOnInit() { this.customerService.getCustomersMedium().then((data) => { this.customers = data; }); } calculateCustomerTotal(name: string) { let total = 0; if (this.customers) { for (let customer of this.customers) { if (customer.representative?.name === name) { total++; } } } return total; } getSeverity(status: string) { switch (status) { case 'unqualified': return 'danger'; case 'qualified': return 'success'; case 'new': return 'info'; case 'negotiation': return 'warn'; case 'renewal': return null; } } } ``` ## Export Table can export its data to CSV format. **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { ButtonModule } from 'primeng/button'; import { TableModule } from 'primeng/table'; import { ProductService } from '@/service/productservice'; import { Product } from '@/domain/product'; interface Column { field: string; header: string; customExportHeader?: string; } interface ExportColumn { title: string; dataKey: string; } @Component({ template: `
@for (col of columns; track col) { {{ col.header }} } @for (col of columns; track col) { {{ rowData[col.field] }} } `, standalone: true, imports: [ButtonModule, TableModule], providers: [ProductService] }) export class TableExportDemo implements OnInit { private productService = inject(ProductService); products!: Product[]; selectedProducts!: Product[]; ngOnInit() { this.productService.getProductsMini().then((data) => { this.products = data; }); this.cols = [ { field: 'code', header: 'Code', customExportHeader: 'Product Code' }, { field: 'name', header: 'Name' }, { field: 'category', header: 'Category' }, { field: 'quantity', header: 'Quantity' } ]; this.exportColumns = this.cols.map((col) => ({ title: col.header, dataKey: col.field })); } } ``` ## Advanced Filters are displayed in an overlay. **Example:** ```typescript import { Component, OnInit, inject, signal } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { ButtonModule } from 'primeng/button'; import { SelectModule } from 'primeng/select'; import { IconFieldModule } from 'primeng/iconfield'; import { InputIconModule } from 'primeng/inputicon'; import { MultiSelectModule } from 'primeng/multiselect'; import { ProgressBarModule } from 'primeng/progressbar'; import { SliderModule } from 'primeng/slider'; import { Table, TableModule } from 'primeng/table'; import { TagModule } from 'primeng/tag'; import { InputTextModule } from 'primeng/inputtext'; import { CustomerService } from '@/service/customerservice'; import { Customer, Representative, Country } from '@/domain/customer'; @Component({ template: `
Name
Country
Agent
{{ option.name }}
Date
Balance
Status
Activity
@if (!value) { 0 } @else { {{ value[0] }} - {{ value[1] }} }
Verified
{{ customer.name }}
{{ customer.country.name }}
{{ customer.representative.name }}
{{ customer.date | date: 'MM/dd/yyyy' }} {{ customer.balance | currency: 'USD' : 'symbol' }} No customers found. `, standalone: true, imports: [ButtonModule, SelectModule, IconFieldModule, InputIconModule, MultiSelectModule, ProgressBarModule, SliderModule, TableModule, TagModule, InputTextModule, FormsModule], providers: [CustomerService] }) export class TableFilterAdvancedDemo implements OnInit { private customerService = inject(CustomerService); customerService = inject(CustomerService); customers = signal([]); representatives = signal([]); statuses = signal([]); loading = signal(true); searchValue = signal(''); activityValues = signal([0, 100]); ngOnInit() { this.customerService.getCustomersLarge().then((customers) => { customers.forEach((customer: Customer) => (customer.date = new Date(customer.date as string))); this.customers.set(customers); this.loading.set(false); }); this.representatives.set([ { name: 'Amy Elsner', image: 'amyelsner.png' }, { name: 'Anna Fali', image: 'annafali.png' }, { name: 'Asiya Javayant', image: 'asiyajavayant.png' }, { name: 'Bernardo Dominic', image: 'bernardodominic.png' }, { name: 'Elwin Sharvill', image: 'elwinsharvill.png' }, { name: 'Ioni Bowcher', image: 'ionibowcher.png' }, { name: 'Ivan Magalhaes', image: 'ivanmagalhaes.png' }, { name: 'Onyama Limba', image: 'onyamalimba.png' }, { name: 'Stephen Shaw', image: 'stephenshaw.png' }, { name: 'Xuxue Feng', image: 'xuxuefeng.png' } ]); this.statuses.set([ { label: 'Unqualified', value: 'unqualified' }, { label: 'Qualified', value: 'qualified' }, { label: 'New', value: 'new' }, { label: 'Negotiation', value: 'negotiation' }, { label: 'Renewal', value: 'renewal' }, { label: 'Proposal', value: 'proposal' } ]); } clear(table: Table) { table.clear(); this.searchValue.set(''); } getSeverity(status: string) { switch (status) { case 'unqualified': return 'danger'; case 'qualified': return 'success'; case 'new': return 'info'; case 'negotiation': return 'warn'; case 'renewal': return null; } } } ``` ## filterbasic-doc Data filtering is enabled by defining the filters property referring to a DataTableFilterMeta instance. Each column to filter also requires filter to be enabled. Built-in filter element is a input field and using filterElement , it is possible to customize the filtering with your own UI. The optional global filtering searches the data against a single value that is bound to the global key of the filters object. The fields to search against is defined with the globalFilterFields . **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { SelectModule } from 'primeng/select'; import { IconFieldModule } from 'primeng/iconfield'; import { InputIconModule } from 'primeng/inputicon'; import { MultiSelectModule } from 'primeng/multiselect'; import { Table, TableModule } from 'primeng/table'; import { TagModule } from 'primeng/tag'; import { InputTextModule } from 'primeng/inputtext'; import { CustomerService } from '@/service/customerservice'; import { Customer, Representative, Country } from '@/domain/customer'; @Component({ template: `
Name Country Agent Status Verified
{{ option.name }}
{{ customer.name }}
{{ customer.country.name }}
{{ customer.representative.name }}
No customers found. `, standalone: true, imports: [SelectModule, IconFieldModule, InputIconModule, MultiSelectModule, TableModule, TagModule, InputTextModule, FormsModule], providers: [CustomerService] }) export class TableFilterBasicDemo implements OnInit { private customerService = inject(CustomerService); customers!: Customer[]; representatives!: Representative[]; statuses!: any[]; loading: boolean = true; activityValues: number[] = [0, 100]; ngOnInit() { this.customerService.getCustomersLarge().then((customers) => { this.customers = customers; this.loading = false; this.customers.forEach((customer) => (customer.date = new Date(customer.date))); }); this.representatives = [ { name: 'Amy Elsner', image: 'amyelsner.png' }, { name: 'Anna Fali', image: 'annafali.png' }, { name: 'Asiya Javayant', image: 'asiyajavayant.png' }, { name: 'Bernardo Dominic', image: 'bernardodominic.png' }, { name: 'Elwin Sharvill', image: 'elwinsharvill.png' }, { name: 'Ioni Bowcher', image: 'ionibowcher.png' }, { name: 'Ivan Magalhaes', image: 'ivanmagalhaes.png' }, { name: 'Onyama Limba', image: 'onyamalimba.png' }, { name: 'Stephen Shaw', image: 'stephenshaw.png' }, { name: 'Xuxue Feng', image: 'xuxuefeng.png' } ]; this.statuses = [ { label: 'Unqualified', value: 'unqualified' }, { label: 'Qualified', value: 'qualified' }, { label: 'New', value: 'new' }, { label: 'Negotiation', value: 'negotiation' }, { label: 'Renewal', value: 'renewal' }, { label: 'Proposal', value: 'proposal' } ]; } clear(table: Table) { table.clear(); } getSeverity(status: string) { switch (status) { case 'unqualified': return 'danger'; case 'qualified': return 'success'; case 'new': return 'info'; case 'negotiation': return 'warn'; case 'renewal': return null; } } } ``` ## flexiblescroll-doc Flex scroll feature makes the scrollable viewport section dynamic instead of a fixed value so that it can grow or shrink relative to the parent size of the table. Click the button below to display a maximizable Dialog where data viewport adjusts itself according to the size changes. **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { ButtonModule } from 'primeng/button'; import { Dialog, DialogModule } from 'primeng/dialog'; import { TableModule } from 'primeng/table'; import { CustomerService } from '@/service/customerservice'; import { Customer, Representative, Country } from '@/domain/customer'; @Component({ template: `
Name Country Company Representative {{ customer.name }} {{ customer.country.name }} {{ customer.company }} {{ customer.representative.name }} `, standalone: true, imports: [ButtonModule, DialogModule, TableModule], providers: [CustomerService] }) export class TableFlexibleScrollDemo implements OnInit { private customerService = inject(CustomerService); customers!: Customer[]; dialogVisible: boolean = false; ngOnInit() { this.customerService.getCustomersMedium().then((data) => { this.customers = data; }); } showDialog() { this.dialogVisible = true; } } ``` ## frozencolumns-doc Certain columns can be frozen by using the pFrozenColumn directive of the table component. In addition, alignFrozen is available to define whether the column should be fixed on the left or right. **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { TableModule } from 'primeng/table'; import { ToggleButtonModule } from 'primeng/togglebutton'; import { CustomerService } from '@/service/customerservice'; import { Customer, Representative, Country } from '@/domain/customer'; @Component({ template: ` Name Id Country Date Company Status Activity Representative Balance {{ customer.name }} {{ customer.id }} {{ customer.country.name }} {{ customer.date }} {{ customer.company }} {{ customer.status }} {{ customer.activity }} {{ customer.representative.name }} {{ formatCurrency(customer.balance) }} `, standalone: true, imports: [TableModule, ToggleButtonModule, FormsModule], providers: [CustomerService] }) export class TableFrozenColumnsDemo implements OnInit { private customerService = inject(CustomerService); balanceFrozen: boolean = false; customers!: Customer[]; ngOnInit() { this.customerService.getCustomersMedium().then((data) => { this.customers = data; }); } formatCurrency(value: number) { return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' }); } } ``` ## frozenrows-doc Frozen rows are used to fix certain rows while scrolling, this data is defined with the frozenValue property. **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { TableModule } from 'primeng/table'; import { ButtonModule } from 'primeng/button'; import { RippleModule } from 'primeng/ripple'; import { CustomerService } from '@/service/customerservice'; import { Customer, Representative, Country } from '@/domain/customer'; @Component({ template: ` Name Country Company Representative {{ customer.name }} {{ customer.country.name }} {{ customer.company }} {{ customer.representative.name }} {{ customer.name }} {{ customer.country.name }} {{ customer.company }} {{ customer.representative.name }} `, standalone: true, imports: [TableModule, ButtonModule, RippleModule], providers: [CustomerService] }) export class TableFrozenRowsDemo implements OnInit { private customerService = inject(CustomerService); unlockedCustomers!: Customer[]; lockedCustomers!: Customer[]; ngOnInit() { this.customerService.getCustomersMedium().then((data) => { this.unlockedCustomers = data; }); this.lockedCustomers = [ { id: 5135, name: 'Geraldine Bisset', country: { name: 'France', code: 'fr' }, company: 'Bisset Group', status: 'proposal', date: '2019-05-05', activity: 0, representative: { name: 'Amy Elsner', image: 'amyelsner.png' } } ]; } toggleLock(data: Customer, frozen: boolean, index: number) { if (frozen) { this.lockedCustomers = this.lockedCustomers.filter((c, i) => i !== index); this.unlockedCustomers.push(data); } else { this.unlockedCustomers = this.unlockedCustomers.filter((c, i) => i !== index); this.lockedCustomers.push(data); } this.unlockedCustomers.sort((val1, val2) => { return val1.id < val2.id ? -1 : 1; }); } } ``` ## Grid Lines Enabling showGridlines displays borders between cells. **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { TableModule } from 'primeng/table'; import { ProductService } from '@/service/productservice'; import { Product } from '@/domain/product'; @Component({ template: ` Code Name Category Quantity {{ product.code }} {{ product.name }} {{ product.category }} {{ product.quantity }} `, standalone: true, imports: [TableModule], providers: [ProductService] }) export class TableGridLinesDemo implements OnInit { private productService = inject(ProductService); products!: Product[]; ngOnInit() { this.productService.getProductsMini().then((data) => { this.products = data; }); } } ``` ## horizontalscroll-doc Horizontal scrollbar is displayed when table width exceeds the parent width. **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { TableModule } from 'primeng/table'; import { CustomerService } from '@/service/customerservice'; import { Customer, Representative, Country } from '@/domain/customer'; @Component({ template: ` Id Name Country Date Balance Company Status Activity Representative {{ customer.id }} {{ customer.name }} {{ customer.country.name }} {{ customer.date }} {{ formatCurrency(customer.balance) }} {{ customer.company }} {{ customer.status }} {{ customer.activity }} {{ customer.representative.name }} Id Name Country Date Balance Company Status Activity Representative `, standalone: true, imports: [TableModule], providers: [CustomerService] }) export class TableHorizontalScrollDemo implements OnInit { private customerService = inject(CustomerService); customers!: Customer[]; ngOnInit() { this.customerService.getCustomersMedium().then((data) => { this.customers = data; }); } formatCurrency(value: number) { return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' }); } } ``` ## loadingmask-doc The loading property displays a mask layer to indicate busy state. Use the paginator to display the mask. **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { TableModule } from 'primeng/table'; import { ProductService } from '@/service/productservice'; import { Product } from '@/domain/product'; @Component({ template: ` Code Name Category Quantity {{ product.code }} {{ product.name }} {{ product.category }} {{ product.quantity }} `, standalone: true, imports: [TableModule], providers: [ProductService] }) export class TableLoadingMaskDemo implements OnInit { private productService = inject(ProductService); products!: Product[]; ngOnInit() { this.productService.getProductsMini().then((data) => { this.products = data; }); } } ``` ## loadingskeleton-doc Skeleton component can be used as a placeholder during the loading process. **Example:** ```typescript import { Component, OnInit } from '@angular/core'; import { SkeletonModule } from 'primeng/skeleton'; import { TableModule } from 'primeng/table'; import { Product } from '@/domain/product'; @Component({ template: ` Code Name Category Quantity `, standalone: true, imports: [SkeletonModule, TableModule] }) export class TableLoadingSkeletonDemo implements OnInit { products!: Product[]; ngOnInit() { this.products = Array.from({ length: 10 }).map((_, i) => ({ id: i.toString() })); } } ``` ## multiplecolumnssort-doc Multiple columns can be sorted by defining sortMode as multiple . This mode requires metaKey (e.g. ⌘ ) to be pressed when clicking a header. **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { TableModule } from 'primeng/table'; import { ProductService } from '@/service/productservice'; import { Product } from '@/domain/product'; @Component({ template: `
Code
Name
Category
Quantity
{{ product.code }} {{ product.name }} {{ product.category }} {{ product.quantity }} `, standalone: true, imports: [TableModule], providers: [ProductService] }) export class TableMultipleColumnsSortDemo implements OnInit { private productService = inject(ProductService); products: Product[]; ngOnInit() { this.productService.getProductsMini().then((data) => { this.products = data; }); } } ``` ## multipleselection-doc More than one row is selectable by setting selectionMode to multiple . By default in multiple selection mode, metaKey press (e.g. ⌘ ) is not necessary to add to existing selections. When the optional metaKeySelection is present, behavior is changed in a way that selecting a new row requires meta key to be present. Note that in touch enabled devices, DataTable always ignores metaKey. **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { TableModule } from 'primeng/table'; import { ToggleSwitchModule } from 'primeng/toggleswitch'; import { ProductService } from '@/service/productservice'; import { Product } from '@/domain/product'; @Component({ template: `
Code Name Category Quantity {{ product.code }} {{ product.name }} {{ product.category }} {{ product.quantity }} `, standalone: true, imports: [TableModule, ToggleSwitchModule, FormsModule], providers: [ProductService] }) export class TableMultipleSelectionDemo implements OnInit { private productService = inject(ProductService); products!: Product[]; selectedProducts!: Product; metaKey: boolean = true; ngOnInit() { this.productService.getProductsMini().then((data) => { this.products = data; }); } } ``` ## paginatorbasic-doc Pagination is enabled by setting paginator property to true and defining a rows property to specify the number of rows per page. **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { TableModule } from 'primeng/table'; import { CustomerService } from '@/service/customerservice'; import { Customer, Representative, Country } from '@/domain/customer'; @Component({ template: ` Name Country Company Representative {{ customer.name }} {{ customer.country.name }} {{ customer.company }} {{ customer.representative.name }} `, standalone: true, imports: [TableModule], providers: [CustomerService] }) export class TablePaginatorBasicDemo implements OnInit { private customerService = inject(CustomerService); customers!: Customer[]; ngOnInit() { this.customerService.getCustomersLarge().then((customers) => { this.customers = customers; }); } } ``` ## paginatorprogrammatic-doc Paginator can also be controlled via model using a binding to the first property where changes trigger a pagination. **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { ButtonModule } from 'primeng/button'; import { TableModule } from 'primeng/table'; import { CustomerService } from '@/service/customerservice'; import { Customer, Representative, Country } from '@/domain/customer'; @Component({ template: `
Name Country Company Representative {{ customer.name }} {{ customer.country.name }} {{ customer.company }} {{ customer.representative.name }} `, standalone: true, imports: [ButtonModule, TableModule], providers: [CustomerService] }) export class TablePaginatorProgrammaticDemo implements OnInit { private customerService = inject(CustomerService); customers!: Customer[]; first: number = 0; rows: number = 10; ngOnInit() { this.customerService.getCustomersLarge().then((customers) => { this.customers = customers; }); } next() { this.first = this.first + this.rows; } prev() { this.first = this.first - this.rows; } reset() { this.first = 0; } pageChange(event) { this.first = event.first; this.rows = event.rows; } isLastPage(): boolean { return this.customers ? this.first + this.rows >= this.customers.length : true; } isFirstPage(): boolean { return this.customers ? this.first === 0 : true; } } ``` ## presort-doc Defining a default sortField and sortOrder displays data as sorted initially in single column sorting. In multiple sort mode, multiSortMeta should be used instead by providing an array of DataTableSortMeta objects. **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { TableModule } from 'primeng/table'; import { ProductService } from '@/service/productservice'; import { Product } from '@/domain/product'; @Component({ template: `
Code
Name
Price
Category
Quantity
{{ product.code }} {{ product.name }} {{ product.price | currency: 'USD' }} {{ product.category }} {{ product.quantity }} `, standalone: true, imports: [TableModule], providers: [ProductService] }) export class TablePreSortDemo implements OnInit { private productService = inject(ProductService); products!: Product[]; ngOnInit() { this.productService.getProductsMini().then((data) => { this.products = data; }); } } ``` ## Products CRUD implementation example with a Dialog. **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { ButtonModule } from 'primeng/button'; import { ConfirmDialogModule } from 'primeng/confirmdialog'; import { Dialog, DialogModule } from 'primeng/dialog'; import { SelectModule } from 'primeng/select'; import { FileUploadModule } from 'primeng/fileupload'; import { IconFieldModule } from 'primeng/iconfield'; import { InputIconModule } from 'primeng/inputicon'; import { InputNumberModule } from 'primeng/inputnumber'; import { RadioButtonModule } from 'primeng/radiobutton'; import { RatingModule } from 'primeng/rating'; import { Table, TableModule } from 'primeng/table'; import { TagModule } from 'primeng/tag'; import { ToolbarModule } from 'primeng/toolbar'; import { InputTextModule } from 'primeng/inputtext'; import { ProductService } from '@/service/productservice'; import { MessageService, ConfirmationService } from 'primeng/api'; import { Product } from '@/domain/product'; interface Column { field: string; header: string; customExportHeader?: string; } interface ExportColumn { title: string; dataKey: string; } @Component({ template: `
Manage Products
 Code
Name
Image
Price
Category
Reviews
Status
{{ product.code }} {{ product.name }} {{ product.price | currency: 'USD' }} {{ product.category }}
@if (product.image) { }
@if (submitted && !product.name) { Name is required. }
Category
`, standalone: true, imports: [ButtonModule, ConfirmDialogModule, DialogModule, SelectModule, FileUploadModule, IconFieldModule, InputIconModule, InputNumberModule, RadioButtonModule, RatingModule, TableModule, TagModule, ToolbarModule, InputTextModule, FormsModule], providers: [ProductService, MessageService, ConfirmationService] }) export class TableProductsDemo implements OnInit { private productService = inject(ProductService); private messageService = inject(MessageService); private confirmationService = inject(ConfirmationService); productDialog: boolean = false; products!: Product[]; product!: Product; selectedProducts!: Product[] | null; submitted: boolean = false; statuses!: any[]; cols!: Column[]; exportColumns!: ExportColumn[]; ngOnInit() { this.productService.getProducts().then((data) => { this.products = data; }); this.statuses = [ { label: 'INSTOCK', value: 'instock' }, { label: 'LOWSTOCK', value: 'lowstock' }, { label: 'OUTOFSTOCK', value: 'outofstock' } ]; this.cols = [ { field: 'code', header: 'Code', customExportHeader: 'Product Code' }, { field: 'name', header: 'Name' }, { field: 'image', header: 'Image' }, { field: 'price', header: 'Price' }, { field: 'category', header: 'Category' } ]; this.exportColumns = this.cols.map((col) => ({ title: col.header, dataKey: col.field })); } openNew() { this.product = {}; this.submitted = false; this.productDialog = true; } editProduct(product: Product) { this.product = { ...product }; this.productDialog = true; } deleteSelectedProducts() { this.confirmationService.confirm({ message: 'Are you sure you want to delete the selected products?', header: 'Confirm', icon: 'pi pi-exclamation-triangle', rejectButtonProps: { label: 'No', severity: 'secondary', variant: 'text' }, acceptButtonProps: { severity: 'danger', label: 'Yes' }, accept: () => { this.products = this.products.filter((val) => !this.selectedProducts?.includes(val)); this.selectedProducts = null; this.messageService.add({ severity: 'success', summary: 'Successful', detail: 'Products Deleted', life: 3000 }); } }); } hideDialog() { this.productDialog = false; this.submitted = false; } deleteProduct(product: Product) { this.confirmationService.confirm({ message: 'Are you sure you want to delete ' + product.name + '?', header: 'Confirm', icon: 'pi pi-exclamation-triangle', rejectButtonProps: { label: 'No', severity: 'secondary', variant: 'text' }, acceptButtonProps: { severity: 'danger', label: 'Yes' }, accept: () => { this.products = this.products.filter((val) => val.id !== product.id); this.product = {}; this.messageService.add({ severity: 'success', summary: 'Successful', detail: 'Product Deleted', life: 3000 }); } }); } findIndexById(id: string): number { let index = -1; for (let i = 0; i < this.products.length; i++) { if (this.products[i].id === id) { index = i; break; } } return index; } createId(): string { let id = ''; var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; for (var i = 0; i < 5; i++) { id += chars.charAt(Math.floor(Math.random() * chars.length)); } return id; } getSeverity(status: string) { switch (status) { case 'INSTOCK': return 'success'; case 'LOWSTOCK': return 'warn'; case 'OUTOFSTOCK': return 'danger'; } } saveProduct() { this.submitted = true; if (this.product.name?.trim()) { if (this.product.id) { this.products[this.findIndexById(this.product.id)] = this.product; this.messageService.add({ severity: 'success', summary: 'Successful', detail: 'Product Updated', life: 3000 }); } else { this.product.id = this.createId(); this.product.code = this.createId(); this.product.image = 'product-placeholder.svg'; this.products.push(this.product); this.messageService.add({ severity: 'success', summary: 'Successful', detail: 'Product Created', life: 3000 }); } this.products = [...this.products]; this.productDialog = false; this.product = {}; } } } ``` ## radiobuttonselection-doc Single selection can also be handled using radio buttons. **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { TableModule } from 'primeng/table'; import { ProductService } from '@/service/productservice'; import { Product } from '@/domain/product'; @Component({ template: ` Code Name Category Quantity {{ product.code }} {{ product.name }} {{ product.category }} {{ product.quantity }} `, standalone: true, imports: [TableModule], providers: [ProductService] }) export class TableRadioButtonSelectionDemo implements OnInit { private productService = inject(ProductService); products!: Product[]; selectedProduct!: Product; ngOnInit() { this.productService.getProductsMini().then((data) => { this.products = data; }); } } ``` ## removablesort-doc The removable sort can be implemented using the customSort property. **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { Table, TableModule } from 'primeng/table'; import { ProductService } from '@/service/productservice'; import { SortEvent } from 'primeng/api'; import { Product } from '@/domain/product'; @Component({ template: `
Code
Name
Category
Quantity
{{ product.code }} {{ product.name }} {{ product.category }} {{ product.quantity }} `, standalone: true, imports: [TableModule], providers: [ProductService] }) export class TableRemovableSortDemo implements OnInit { private productService = inject(ProductService); products: Product[]; initialValue: Product[]; isSorted: boolean = null; ngOnInit() { this.productService.getProductsMini().then((data) => { this.products = data; this.initialValue = [...data]; }); } customSort(event: SortEvent) { if (this.isSorted == null || this.isSorted === undefined) { this.isSorted = true; this.sortTableData(event); } else if (this.isSorted == true) { this.isSorted = false; this.sortTableData(event); } else if (this.isSorted == false) { this.isSorted = null; this.products = [...this.initialValue]; this.dt.reset(); } } sortTableData(event) { event.data.sort((data1, data2) => { let value1 = data1[event.field]; let value2 = data2[event.field]; let result = null; if (value1 == null && value2 != null) result = -1; else if (value1 != null && value2 == null) result = 1; else if (value1 == null && value2 == null) result = 0; else if (typeof value1 === 'string' && typeof value2 === 'string') result = value1.localeCompare(value2); else result = value1 < value2 ? -1 : value1 > value2 ? 1 : 0; return event.order * result; }); } } ``` ## Reorder Order of the columns and rows can be changed using drag and drop. Column reordering is configured by adding reorderableColumns property. Similarly, adding reorderableRows property enables draggable rows. For the drag handle a column needs to have rowReorder property and onRowReorder callback is required to control the state of the rows after reorder completes. **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { TableModule } from 'primeng/table'; import { ProductService } from '@/service/productservice'; import { Product } from '@/domain/product'; interface Column { field: string; header: string; } @Component({ template: ` @for (col of columns; track col) { {{ col.header }} } @for (col of columns; track col) { {{ rowData[col.field] }} } `, standalone: true, imports: [TableModule], providers: [ProductService] }) export class TableReorderDemo implements OnInit { private productService = inject(ProductService); products!: Product[]; cols!: Column[]; ngOnInit() { this.productService.getProductsMini().then((data) => { this.products = data; }); this.cols = [ { field: 'code', header: 'Code' }, { field: 'name', header: 'Name' }, { field: 'category', header: 'Category' }, { field: 'quantity', header: 'Quantity' } ]; } } ``` ## rowedit-doc Row editing toggles the visibility of all the editors in the row at once and provides additional options to save and cancel editing. Row editing functionality is enabled by setting the editMode to "row" on table, defining a dataKey to uniquely identify a row, adding pEditableRow directive to the editable rows and defining the UI Controls with pInitEditableRow , pSaveEditableRow and pCancelEditableRow directives respectively. Save and Cancel functionality implementation is left to the page author to provide more control over the editing business logic. Example below utilizes a simple implementation where a row is cloned when editing is initialized and is saved or restored depending on the result of the editing. An implicit variable called "editing" is passed to the body template so you may come up with your own UI controls that implement editing based on your own requirements such as adding validations and styling. Note that pSaveEditableRow only switches the row to back view mode when there are no validation errors. Moreover, you may use setting pEditableRowDisabled property as true to disable editing for that particular row and in case you need to display rows in edit mode by default, use the editingRowKeys property which is a map whose key is the dataKey of the record where the value is any arbitrary number greater than zero. **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { SelectModule } from 'primeng/select'; import { TableModule } from 'primeng/table'; import { TagModule } from 'primeng/tag'; import { ButtonModule } from 'primeng/button'; import { InputTextModule } from 'primeng/inputtext'; import { RippleModule } from 'primeng/ripple'; import { ProductService } from '@/service/productservice'; import { SelectItem, MessageService } from 'primeng/api'; import { Product } from '@/domain/product'; @Component({ template: ` Code Name Inventory Status Price {{ product.code }} {{ product.name }} {{ product.price | currency: 'USD' }}
@if (!editing) { } @if (editing) { }
`, standalone: true, imports: [SelectModule, TableModule, TagModule, ButtonModule, InputTextModule, RippleModule, FormsModule], providers: [ProductService, MessageService] }) export class TableRowEditDemo implements OnInit { private productService = inject(ProductService); private messageService = inject(MessageService); products!: Product[]; statuses!: SelectItem[]; ngOnInit() { this.productService.getProductsMini().then((data) => { this.products = data; }); this.statuses = [ { label: 'In Stock', value: 'INSTOCK' }, { label: 'Low Stock', value: 'LOWSTOCK' }, { label: 'Out of Stock', value: 'OUTOFSTOCK' } ]; } onRowEditInit(product: Product) { this.clonedProducts[product.id as string] = { ...product }; } onRowEditSave(product: Product) { if (product.price > 0) { delete this.clonedProducts[product.id as string]; this.messageService.add({ severity: 'success', summary: 'Success', detail: 'Product is updated' }); } else { this.messageService.add({ severity: 'error', summary: 'Error', detail: 'Invalid Price' }); } } onRowEditCancel(product: Product, index: number) { this.products[index] = this.clonedProducts[product.id as string]; delete this.clonedProducts[product.id as string]; } getSeverity(status: string) { switch (status) { case 'INSTOCK': return 'success'; case 'LOWSTOCK': return 'warn'; case 'OUTOFSTOCK': return 'danger'; } } } ``` ## rowexpansion-doc Row expansion allows displaying detailed content for a particular row. To use this feature, define a dataKey , add a template named expandedrow and use the pRowToggler directive on an element as the target to toggle an expansion. This enables providing your custom UI such as buttons, links and so on. Example below uses an anchor with an icon as a toggler. Setting pRowTogglerDisabled as true disables the toggle event for the element. **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { ButtonModule } from 'primeng/button'; import { RatingModule } from 'primeng/rating'; import { TableModule } from 'primeng/table'; import { TagModule } from 'primeng/tag'; import { RippleModule } from 'primeng/ripple'; import { ProductService } from '@/service/productservice'; import { MessageService } from 'primeng/api'; import { Product } from '@/domain/product'; import { Customer } from '@/domain/customer'; @Component({ template: `
Name Image Price Category Reviews Status {{ product.name }} {{ product.price | currency: 'USD' }} {{ product.category }}
Orders for {{ product.name }}
Id
Customer
Date
Amount
Status
{{ order.id }} {{ order.customer }} {{ order.date }} {{ order.amount | currency: 'USD' }} There are no order for this product yet.
`, standalone: true, imports: [ButtonModule, RatingModule, TableModule, TagModule, RippleModule, FormsModule], providers: [ProductService, MessageService] }) export class TableRowExpansionDemo implements OnInit { private productService = inject(ProductService); private messageService = inject(MessageService); products!: Product[]; expandedRows: any = {}; ngOnInit() { this.productService.getProductsWithOrdersSmall().then((data) => { this.products = data; }); } expandAll() { this.expandedRows = this.products.reduce((acc, p) => (acc[p.id] = true) && acc, {}); } collapseAll() { this.expandedRows = {}; } getSeverity(status: string) { switch (status) { case 'INSTOCK': return 'success'; case 'LOWSTOCK': return 'warn'; case 'OUTOFSTOCK': return 'danger'; } } getStatusSeverity(status: string) { switch (status) { case 'PENDING': return 'warn'; case 'DELIVERED': return 'success'; case 'CANCELLED': return 'danger'; } } onRowExpand(event: TableRowExpandEvent) { this.messageService.add({ severity: 'info', summary: 'Product Expanded', detail: event.data.name, life: 3000 }); } onRowCollapse(event: TableRowCollapseEvent) { this.messageService.add({ severity: 'success', summary: 'Product Collapsed', detail: event.data.name, life: 3000 }); } } ``` ## rowspangrouping-doc When rowGroupMode is configured to be rowspan , the grouping column spans multiple rows. **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { TableModule } from 'primeng/table'; import { TagModule } from 'primeng/tag'; import { CustomerService } from '@/service/customerservice'; import { Customer, Representative, Country } from '@/domain/customer'; @Component({ template: ` # Representative Name Country Company Status {{ rowIndex }} @if (rowgroup) {
{{ customer.representative.name }}
} {{ customer.name }}
{{ customer.country.name }}
{{ customer.company }} `, standalone: true, imports: [TableModule, TagModule], providers: [CustomerService] }) export class TableRowSpanGroupingDemo implements OnInit { private customerService = inject(CustomerService); customers!: Customer[]; ngOnInit() { this.customerService.getCustomersMedium().then((data) => { this.customers = data; }); } calculateCustomerTotal(name: string) { let total = 0; if (this.customers) { for (let customer of this.customers) { if (customer.representative?.name === name) { total++; } } } return total; } getSeverity(status: string) { switch (status) { case 'unqualified': return 'danger'; case 'qualified': return 'success'; case 'new': return 'info'; case 'negotiation': return 'warn'; case 'renewal': return null; } } } ``` ## selectionevents-doc Table provides onRowSelect and onRowUnselect events to listen selection events. **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { TableModule } from 'primeng/table'; import { ProductService } from '@/service/productservice'; import { MessageService } from 'primeng/api'; import { Product } from '@/domain/product'; @Component({ template: ` Code Name Category Quantity {{ product.code }} {{ product.name }} {{ product.category }} {{ product.quantity }} `, standalone: true, imports: [TableModule], providers: [ProductService, MessageService] }) export class TableSelectionEventsDemo implements OnInit { private productService = inject(ProductService); private messageService = inject(MessageService); products!: Product[]; selectedProduct!: Product; ngOnInit() { this.productService.getProductsMini().then((data) => { this.products = data; }); } onRowSelect(event: any) { this.messageService.add({ severity: 'info', summary: 'Product Selected', detail: event.data.name }); } onRowUnselect(event: any) { this.messageService.add({ severity: 'info', summary: 'Product Unselected', detail: event.data.name }); } } ``` ## singlecolumnsort-doc A column can be made sortable by adding the pSortableColumn directive whose value is the field to sort against and a sort indicator via p-sort-icon component. For dynamic columns, setting pSortableColumnDisabled property as true disables sorting for that particular column. Default sorting is executed on a single column, in order to enable multiple field sorting, set sortMode property to "multiple" and use metakey when clicking on another column. **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { TableModule } from 'primeng/table'; import { ProductService } from '@/service/productservice'; import { Product } from '@/domain/product'; @Component({ template: `
Code
Name
Category
Quantity
{{ product.code }} {{ product.name }} {{ product.category }} {{ product.quantity }} `, standalone: true, imports: [TableModule], providers: [ProductService] }) export class TableSingleColumnSortDemo implements OnInit { private productService = inject(ProductService); products!: Product[]; ngOnInit() { this.productService.getProductsMini().then((data) => { this.products = data; }); } } ``` ## singleselection-doc Single row selection is enabled by defining selectionMode as single along with a value binding using selection property. When available, it is suggested to provide a unique identifier of a row with dataKey to optimize performance. By default, metaKey press (e.g. ⌘ ) is necessary to unselect a row however this can be configured with disabling the metaKeySelection property. In touch enabled devices this option has no effect and behavior is same as setting it to false. **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { TableModule } from 'primeng/table'; import { ToggleSwitchModule } from 'primeng/toggleswitch'; import { ProductService } from '@/service/productservice'; import { Product } from '@/domain/product'; @Component({ template: `
Code Name Category Quantity {{ product.code }} {{ product.name }} {{ product.category }} {{ product.quantity }} `, standalone: true, imports: [TableModule, ToggleSwitchModule, FormsModule], providers: [ProductService] }) export class TableSingleSelectionDemo implements OnInit { private productService = inject(ProductService); products!: Product[]; selectedProduct!: Product; metaKey: boolean = true; ngOnInit() { this.productService.getProductsMini().then((data) => { this.products = data; }); } } ``` ## Size In addition to a regular table, alternatives with alternative sizes are available. **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { SelectButtonModule } from 'primeng/selectbutton'; import { TableModule } from 'primeng/table'; import { ProductService } from '@/service/productservice'; import { Product } from '@/domain/product'; @Component({ template: `
Code Name Category Quantity {{ product.code }} {{ product.name }} {{ product.category }} {{ product.quantity }} `, standalone: true, imports: [SelectButtonModule, TableModule, FormsModule], providers: [ProductService] }) export class TableSizeDemo implements OnInit { private productService = inject(ProductService); products!: Product[]; sizes!: any[]; selectedSize: any = undefined; ngOnInit() { this.productService.getProductsMini().then((data) => { this.products = data; }); this.sizes = [ { name: 'Small', value: 'small' }, { name: 'Normal', value: undefined }, { name: 'Large', value: 'large' } ]; } } ``` ## Stateful Stateful table allows keeping the state such as page, sort and filtering either at local storage or session storage so that when the page is visited again, table would render the data using the last settings. Change the state of the table e.g paginate, navigate away and then return to this table again to test this feature, the setting is set as session with the stateStorage property so that Table retains the state until the browser is closed. Other alternative is local referring to localStorage for an extended lifetime. **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { IconFieldModule } from 'primeng/iconfield'; import { InputIconModule } from 'primeng/inputicon'; import { Table, TableModule } from 'primeng/table'; import { TagModule } from 'primeng/tag'; import { InputTextModule } from 'primeng/inputtext'; import { CustomerService } from '@/service/customerservice'; import { Customer, Representative, Country } from '@/domain/customer'; @Component({ template: `
Name
Country
Representative
Status
{{ customer.name }}
{{ customer.country.name }}
{{ customer.representative.name }}
{{ customer.name }} {{ customer.country.name }} {{ customer.representative.name }} No customers found. `, standalone: true, imports: [IconFieldModule, InputIconModule, TableModule, TagModule, InputTextModule], providers: [CustomerService] }) export class TableStatefulDemo implements OnInit { private customerService = inject(CustomerService); customers!: Customer[]; selectedCustomers!: Customer; ngOnInit() { this.customerService.getCustomersSmall().then((data) => { this.customers = data; }); } } ``` ## Striped Rows Alternating rows are displayed when stripedRows property is present. **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { TableModule } from 'primeng/table'; import { ProductService } from '@/service/productservice'; import { Product } from '@/domain/product'; @Component({ template: ` Code Name Category Quantity {{ product.code }} {{ product.name }} {{ product.category }} {{ product.quantity }} `, standalone: true, imports: [TableModule], providers: [ProductService] }) export class TableStripedDemo implements OnInit { private productService = inject(ProductService); products!: Product[]; ngOnInit() { this.productService.getProductsMini().then((data) => { this.products = data; }); } } ``` ## style-doc Certain rows or cells can easily be styled based on conditions. ## styling-doc **Example:** ```typescript import { Component } from '@angular/core'; @Component({ template: `
Name Element
p-datatable Container element.
p-datatable-header Header section.
p-datatable-footer Footer section.
p-sortable-column Sortable column header.
p-editable-column Editable column cell.
p-datatable-thead Thead element of header columns.
p-datatable-tbody Tbody element of body rows.
p-datatable-tfoot Tfoot element of footer columns.
p-datatable-scrollable Container element when scrolling is enabled.
p-datatable-resizable Container element when column resizing is enabled.
p-datatable-resizable-fit Container element when column resizing is enabled and set to fit mode.
p-column-resizer-helper Vertical resizer indicator bar.
p-datatable-reorderablerow-handle Handle element of a reorderable row.
p-datatable-reorder-indicator-up Up indicator to display during column reordering.
p-datatable-reorder-indicator-up Down indicator to display during column reordering.
p-datatable-loading-overlay Overlay to display when table is loading.
p-datatable-loading-icon Icon to display when table is loading.
`, standalone: true, imports: [] }) export class TableStylingDemo {} ``` ## subheadergrouping-doc Rows are grouped with the groupRowsBy property. When rowGroupMode is set as subheader , a header and footer can be displayed for each group. The content of a group header is provided with groupheader and footer with groupfooter templates. **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { TableModule } from 'primeng/table'; import { TagModule } from 'primeng/tag'; import { CustomerService } from '@/service/customerservice'; import { Customer, Country } from '@/domain/customer'; @Component({ template: ` Name Country Company Status Date
{{ customer.representative.name }}
Total Customers: {{ calculateCustomerTotal(customer.representative.name) }}
 {{ customer.name }}
{{ customer.country.name }}
{{ customer.company }} {{ customer.date }} `, standalone: true, imports: [TableModule, TagModule], providers: [CustomerService] }) export class TableSubHeaderGroupingDemo implements OnInit { private customerService = inject(CustomerService); customers!: Customer[]; ngOnInit() { this.customerService.getCustomersMedium().then((data) => { this.customers = data; }); } calculateCustomerTotal(name: string) { let total = 0; if (this.customers) { for (let customer of this.customers) { if (customer.representative?.name === name) { total++; } } } return total; } getSeverity(status: string) { switch (status) { case 'unqualified': return 'danger'; case 'qualified': return 'success'; case 'new': return 'info'; case 'negotiation': return 'warn'; case 'renewal': return null; } } } ``` ## Template Custom content at header , body and footer sections are supported via templating. **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { ButtonModule } from 'primeng/button'; import { RatingModule } from 'primeng/rating'; import { TableModule } from 'primeng/table'; import { TagModule } from 'primeng/tag'; import { ProductService } from '@/service/productservice'; import { Product } from '@/domain/product'; interface Column { field: string; header: string; } @Component({ template: `
Products
Name Image Price Category Reviews Status {{ product.name }} {{ product.price | currency: 'USD' }} {{ product.category }} In total there are {{ products ? products.length : 0 }} products. `, standalone: true, imports: [ButtonModule, RatingModule, TableModule, TagModule, FormsModule], providers: [ProductService] }) export class TableTemplateDemo implements OnInit { private productService = inject(ProductService); products!: Product[]; cols!: Column[]; ngOnInit() { this.productService.getProductsMini().then((data) => { this.products = data; }); this.cols = [ { field: 'code', header: 'Code' }, { field: 'name', header: 'Name' }, { field: 'category', header: 'Category' }, { field: 'quantity', header: 'Quantity' } ]; } getSeverity(status: string) { switch (status) { case 'INSTOCK': return 'success'; case 'LOWSTOCK': return 'warn'; case 'OUTOFSTOCK': return 'danger'; } } } ``` ## verticalscroll-doc **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { TableModule } from 'primeng/table'; import { CustomerService } from '@/service/customerservice'; import { Customer, Representative, Country } from '@/domain/customer'; @Component({ template: ` Name Country Company Representative {{ customer.name }} {{ customer.country.name }} {{ customer.company }} {{ customer.representative.name }} `, standalone: true, imports: [TableModule], providers: [CustomerService] }) export class TableVerticalScrollDemo implements OnInit { private customerService = inject(CustomerService); customers!: Customer[]; ngOnInit() { this.customerService.getCustomersMedium().then((data) => { this.customers = data; }); } } ``` ## virtualscroll-doc Virtual Scrolling is an efficient way to render large amount data. Usage is similar to regular scrolling with the addition of virtualScrollerOptions property to define a fixed itemSize . Internally, VirtualScroller component is utilized so refer to the API of VirtualScroller for more information about the available options. In this example, 10000 preloaded records are rendered by the Table. **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { Table, TableModule } from 'primeng/table'; import { CarService } from '@/service/carservice'; import { Car } from '@/domain/car'; interface Column { field: string; header: string; } @Component({ template: ` @for (col of columns; track col) { {{ col.header }} } @for (col of columns; track col) { {{ rowData[col.field] }} } `, standalone: true, imports: [TableModule], providers: [CarService] }) export class TableVirtualScrollDemo implements OnInit { private carService = inject(CarService); cars!: Car[]; virtualCars!: Car[]; cols!: Column[]; ngOnInit() { this.cols = [ { field: 'id', header: 'Id' }, { field: 'vin', header: 'Vin' }, { field: 'year', header: 'Year' }, { field: 'brand', header: 'Brand' }, { field: 'color', header: 'Color' } ]; this.cars = Array.from({ length: 10000 }).map((_, i) => this.carService.generateCar(i + 1)); this.virtualCars = Array.from({ length: 10000 }); } } ``` ## virtualscrolllazy-doc VirtualScroller is a performance-approach to handle huge data efficiently. Setting virtualScroll property as true and providing a virtualScrollItemSize in pixels would be enough to enable this functionality. It is also suggested to use the same virtualScrollItemSize value on the tr element inside the body template. **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { SkeletonModule } from 'primeng/skeleton'; import { TableModule } from 'primeng/table'; import { CarService } from '@/service/carservice'; import { TableLazyLoadEvent } from 'primeng/api'; import { Car } from '@/domain/car'; interface Column { field: string; header: string; } @Component({ template: ` @for (col of columns; track col) { {{ col.header }} } @for (col of columns; track col) { {{ rowData[col.field] }} } @for (col of columns; track col; let even = $even) { } `, standalone: true, imports: [SkeletonModule, TableModule], providers: [CarService] }) export class TableVirtualScrollLazyDemo implements OnInit { private carService = inject(CarService); cars!: Car[]; virtualCars!: Car[]; cols!: Column[]; ngOnInit() { this.cols = [ { field: 'id', header: 'Id' }, { field: 'vin', header: 'Vin' }, { field: 'year', header: 'Year' }, { field: 'brand', header: 'Brand' }, { field: 'color', header: 'Color' } ]; this.cars = Array.from({ length: 10000 }).map((_, i) => this.carService.generateCar(i + 1)); this.virtualCars = Array.from({ length: 10000 }); } loadCarsLazy(event: TableLazyLoadEvent) { //simulate remote connection with a timeout setTimeout( () => { //load data of required page let loadedCars = this.cars.slice(event.first, event.first + event.rows); //populate page of virtual cars Array.prototype.splice.apply(this.virtualCars, [...[event.first, event.rows], ...loadedCars]); //trigger change detection event.forceUpdate(); }, Math.random() * 1000 + 250 ); } } ``` ## Table Table displays data in tabular format. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | | frozenColumns | any[] | - | An array of objects to represent dynamic columns that are frozen. | | frozenValue | any[] | - | An array of objects to display as frozen. | | tableStyle | Partial | - | Inline style of the table. | | tableStyleClass | string | - | Style class of the table. | | paginator | boolean | - | When specified as true, enables the pagination. | | pageLinks | number | - | Number of page links to display in paginator. | | rowsPerPageOptions | any[] | - | Array of integer/object values to display inside rows per page dropdown of paginator | | alwaysShowPaginator | boolean | - | Whether to show it even there is only one page. | | paginatorPosition | "top" \| "bottom" \| "both" | - | Position of the paginator, options are "top", "bottom" or "both". | | paginatorStyleClass | string | - | Custom style class for paginator | | paginatorDropdownAppendTo | any | - | Target element to attach the paginator dropdown overlay, valid values are "body" or a local ng-template variable of another element (note: use binding with brackets for template variables, e.g. [appendTo]="mydiv" for a div element having #mydiv as variable name). | | paginatorDropdownScrollHeight | string | - | Paginator dropdown height of the viewport in pixels, a scrollbar is defined if height of list exceeds this value. | | currentPageReportTemplate | string | - | Template of the current page report element. Available placeholders are {currentPage},{totalPages},{rows},{first},{last} and {totalRecords} | | showCurrentPageReport | boolean | - | Whether to display current page report. | | showJumpToPageDropdown | boolean | - | Whether to display a dropdown to navigate to any page. | | showJumpToPageInput | boolean | - | Whether to display a input to navigate to any page. | | showFirstLastIcon | boolean | - | When enabled, icons are displayed on paginator to go first and last page. | | showPageLinks | boolean | - | Whether to show page links. | | defaultSortOrder | number | - | Sort order to use when an unsorted column gets sorted by user interaction. | | sortMode | "single" \| "multiple" | - | Defines whether sorting works on single column or on multiple columns. | | resetPageOnSort | boolean | - | When true, resets paginator to first page after sorting. Available only when sortMode is set to single. | | selectionMode | "single" \| "multiple" | - | Specifies the selection mode, valid values are "single" and "multiple". | | selectionPageOnly | boolean | - | When enabled with paginator and checkbox selection mode, the select all checkbox in the header will select all rows on the current page. | | contextMenuSelectionInput | any | - | Selected row with a context menu. | | dataKey | string | - | A property to uniquely identify a record in data. | | metaKeySelection | boolean | - | Defines whether metaKey should be considered for the selection. On touch enabled devices, metaKeySelection is turned off automatically. | | rowSelectable | (row: { data: any; index: number }) => boolean | - | Defines if the row is selectable. | | rowTrackBy | Function | - | Function to optimize the dom operations by delegating to ngForTrackBy, default algorithm checks for object identity. | | lazy | boolean | - | Defines if data is loaded and interacted with in lazy manner. | | lazyLoadOnInit | boolean | - | Whether to call lazy loading on initialization. | | compareSelectionBy | "equals" \| "deepEquals" | - | Algorithm to define if a row is selected, valid values are "equals" that compares by reference and "deepEquals" that compares all fields. | | csvSeparator | string | - | Character to use as the csv separator. | | exportFilename | string | - | Name of the exported file. | | filtersInput | { [s: string]: FilterMetadata \| FilterMetadata[] } | - | An array of FilterMetadata objects to provide external filters. | | globalFilterFields | string[] | - | An array of fields as string to use in global filtering. | | filterDelay | number | - | Delay in milliseconds before filtering the data. | | filterLocale | string | - | Locale to use in filtering. The default locale is the host environment's current locale. | | expandedRowKeysInput | { [s: string]: boolean } | - | Map instance to keep the expanded rows where key of the map is the data key of the row. | | editingRowKeysInput | { [s: string]: boolean } | - | Map instance to keep the rows being edited where key of the map is the data key of the row. | | rowExpandMode | "multiple" \| "single" | - | Whether multiple rows can be expanded at any time. Valid values are "multiple" and "single". | | scrollable | boolean | - | Enables scrollable tables. | | rowGroupMode | "subheader" \| "rowspan" | - | Type of the row grouping, valid values are "subheader" and "rowspan". | | scrollHeight | string | - | Height of the scroll viewport in fixed pixels or the "flex" keyword for a dynamic size. | | virtualScroll | boolean | - | Whether the data should be loaded on demand during scroll. | | virtualScrollItemSize | number | - | Height of a row to use in calculations of virtual scrolling. | | virtualScrollOptions | ScrollerOptions | - | Whether to use the scroller feature. The properties of scroller component can be used like an object in it. | | virtualScrollDelay | number | - | Threshold in milliseconds to delay lazy loading during scrolling. | | frozenWidth | string | - | Width of the frozen columns container. | | contextMenu | any | - | Local ng-template varilable of a ContextMenu. | | resizableColumns | boolean | - | When enabled, columns can be resized using drag and drop. | | columnResizeMode | "fit" \| "expand" | - | Defines whether the overall table width should change on column resize, valid values are "fit" and "expand". | | reorderableColumns | boolean | - | When enabled, columns can be reordered using drag and drop. | | loading | boolean | - | Displays a loader to indicate data load is in progress. | | loadingIcon | string | - | The icon to show while indicating data load is in progress. | | showLoader | boolean | - | Whether to show the loading mask when loading property is true. | | rowHover | boolean | - | Adds hover effect to rows without the need for selectionMode. Note that tr elements that can be hovered need to have "p-selectable-row" class for rowHover to work. | | customSort | boolean | - | Whether to use the default sorting or a custom one using sortFunction. | | showInitialSortBadge | boolean | - | Whether to use the initial sort badge or not. | | exportFunction | Function | - | Export function. | | exportHeader | string | - | Custom export header of the column to be exported as CSV. | | stateKey | string | - | Unique identifier of a stateful table to use in state storage. | | stateStorage | "session" \| "local" | - | Defines where a stateful table keeps its state, valid values are "session" for sessionStorage and "local" for localStorage. | | editMode | "cell" \| "row" | - | Defines the editing mode, valid values are "cell" and "row". | | groupRowsBy | any | - | Field name to use in row grouping. | | size | "small" \| "large" | - | Defines the size of the table. | | showGridlines | boolean | - | Whether to show grid lines between cells. | | stripedRows | boolean | - | Whether to display rows with alternating colors. | | groupRowsByOrder | number | - | Order to sort when default row grouping is enabled. | | paginatorLocale | string | - | Locale to be used in paginator formatting. | | valueInput | RowData[] | - | An array of objects to display. | | columnsInput | any[] | - | An array of objects to represent dynamic columns. | | first | number | - | Index of the first row to be displayed. | | rows | number | - | Number of rows to display per page. | | totalRecords | number | - | Number of total records, defaults to length of value when not defined. | | sortFieldInput | string | - | Name of the field to sort data by default. | | sortOrderInput | number | - | Order to sort when default sorting is enabled. | | multiSortMetaInput | SortMeta[] | - | An array of SortMeta objects to sort the data by default in multiple sort mode. | | selection | any | - | Selected row in single mode or an array of values in multiple mode. | | selectAllInput | boolean | - | Whether all data is selected. | ### Emits | Name | Parameters | Description | |------|------------|-------------| | contextMenuSelectionChange | value: any | Callback to invoke on context menu selection change. | | selectAllChange | event: TableSelectAllChangeEvent | Emits when the all of the items selected or unselected. | | onRowSelect | event: TableRowSelectEvent[] | - | Filter match mode options. | | maxConstraints | number | - | Defines maximum amount of constraints. | | minFractionDigits | number | - | Defines minimum fraction of digits. | | maxFractionDigits | number | - | Defines maximum fraction of digits. | | prefix | string | - | Defines prefix of the filter. | | suffix | string | - | Defines suffix of the filter. | | locale | string | - | Defines filter locale. | | localeMatcher | string | - | Defines filter locale matcher. | | currency | string | - | Enables currency input. | | currencyDisplay | string | - | Defines the display of the currency input. | | filterOn | string | enter | Default trigger to run filtering on built-in text and numeric filters, valid values are 'enter' and 'input'. | | useGrouping | boolean | - | Defines if filter grouping will be enabled. | | showButtons | boolean | - | Defines the visibility of buttons. | | ariaLabel | string | - | Defines the aria-label of the form element. | | filterButtonProps | TableFilterButtonPropsOptions | { filter: { severity: 'secondary', text: true, rounded: true }, inline: { clear: { severity: 'secondary', text: true, rounded: true } }, popover: { addRule: { severity: 'info', text: true, size: 'small' }, removeRule: { severity: 'danger', text: true, size: 'small' }, apply: { size: 'small' }, clear: { outlined: true, size: 'small' } } } | Used to pass all filter button property object | ### Emits | Name | Parameters | Description | |------|------------|-------------| | onShow | event: { originalEvent: AnimationEvent } | Callback to invoke on overlay is shown. | | onHide | event: { originalEvent: AnimationEvent } | Callback to invoke on overlay is hidden. | ### Templates | Name | Type | Description | |------|------|-------------| | header | TemplateRef | Custom header template. | | filter | TemplateRef | Custom filter template. | | footer | TemplateRef | Custom footer template. | | filtericon | TemplateRef | Custom filter icon template. | | removeruleicon | TemplateRef | Custom remove rule button icon template. | | addruleicon | TemplateRef | Custom add rule button icon template. | ## Pass Through Options | Name | Type | Description | |------|------|-------------| | filter | PassThroughOption | Used to pass attributes to the filter container element. | | pcColumnFilterButton | ButtonPassThrough | Used to pass attributes to the column filter button component. | | filterOverlay | PassThroughOption | Used to pass attributes to the filter overlay element. | | filterConstraintList | PassThroughOption | Used to pass attributes to the filter constraint list element. | | filterConstraint | PassThroughOption | Used to pass attributes to the filter constraint element. | | filterConstraintSeparator | PassThroughOption | Used to pass attributes to the filter constraint separator element. | | emtpyFilterLabel | PassThroughOption | Used to pass attributes to the empty filter label element. | | filterOperator | PassThroughOption | Used to pass attributes to the filter operator element. | | pcFilterOperatorDropdown | SelectPassThrough | Used to pass attributes to the filter operator dropdown component. | | filterRuleList | PassThroughOption | Used to pass attributes to the filter rule list element. | | filterRule | PassThroughOption | Used to pass attributes to the filter rule element. | | pcFilterConstraintDropdown | SelectPassThrough | Used to pass attributes to the filter constraint dropdown component. | | pcFilterRemoveRuleButton | ButtonPassThrough | Used to pass attributes to the filter remove rule button component. | | pcAddRuleButtonLabel | ButtonPassThrough | Used to pass attributes to the add rule button label. | | filterButtonBar | PassThroughOption | Used to pass attributes to the filter button bar element. | | pcFilterClearButton | ButtonPassThrough | Used to pass attributes to the filter clear button component. | | pcFilterApplyButton | ButtonPassThrough | Used to pass attributes to the filter apply button component. | | pcFilterInputText | InputTextPassThrough | Used to pass attributes to the filter input text component. | | pcFilterInputNumber | InputNumberPassThrough | Used to pass attributes to the filter input number component. | | pcFilterCheckbox | CheckboxPassThrough | Used to pass attributes to the filter checkbox component. | | pcFilterDatePicker | DatePickerPassThrough | Used to pass attributes to the filter datepicker component. | | motion | MotionOptions | Used to pass options to the motion component/directive. | ## Theming ### CSS Classes | Class | Description | |-------|-------------| | p-datatable | Class name of the root element | | p-datatable-mask | Class name of the mask element | | p-datatable-loading-icon | Class name of the loading icon element | | p-datatable-header | Class name of the header element | | p-datatable-paginator-[position] | Class name of the paginator element | | p-datatable-table-container | Class name of the table container element | | p-datatable-table | Class name of the table element | | p-datatable-thead | Class name of the thead element | | p-datatable-column-resizer | Class name of the column resizer element | | p-datatable-column-header-content | Class name of the column header content element | | p-datatable-column-title | Class name of the column title element | | p-datatable-sort-icon | Class name of the sort icon element | | p-datatable-sort-badge | Class name of the sort badge element | | p-datatable-filter | Class name of the filter element | | p-datatable-filter-element-container | Class name of the filter element container element | | p-datatable-column-filter-button | Class name of the column filter button element | | p-datatable-column-filter-clear-button | Class name of the column filter clear button element | | p-datatable-filter-overlay | Class name of the filter overlay element | | p-datatable-filter-constraint-list | Class name of the filter constraint list element | | p-datatable-filter-constraint | Class name of the filter constraint element | | p-datatable-filter-constraint-separator | Class name of the filter constraint separator element | | p-datatable-filter-operator | Class name of the filter operator element | | p-datatable-filter-operator-dropdown | Class name of the filter operator dropdown element | | p-datatable-filter-rule-list | Class name of the filter rule list element | | p-datatable-filter-rule | Class name of the filter rule element | | p-datatable-filter-constraint-dropdown | Class name of the filter constraint dropdown element | | p-datatable-filter-remove-rule-button | Class name of the filter remove rule button element | | p-datatable-filter-add-rule-button | Class name of the filter add rule button element | | p-datatable-filter-buttonbar | Class name of the filter buttonbar element | | p-datatable-filter-clear-button | Class name of the filter clear button element | | p-datatable-filter-apply-button | Class name of the filter apply button element | | p-datatable-tbody | Class name of the tbody element | | p-datatable-row-group-header | Class name of the row group header element | | p-datatable-row-toggle-button | Class name of the row toggle button element | | p-datatable-row-toggle-icon | Class name of the row toggle icon element | | p-datatable-row-expansion | Class name of the row expansion element | | p-datatable-row-group-footer | Class name of the row group footer element | | p-datatable-empty-message | Class name of the empty message element | | p-datatable-reorderable-row-handle | Class name of the reorderable row handle element | | p-datatable-row-editor-init | Class name of the row editor init element | | p-datatable-row-editor-save | Class name of the row editor save element | | p-datatable-row-editor-cancel | Class name of the row editor cancel element | | p-datatable-tfoot | Class name of the tfoot element | | p-datatable-virtualscroller-spacer | Class name of the virtual scroller spacer element | | p-datatable-footer | Class name of the footer element | | p-datatable-column-resize-indicator | Class name of the column resize indicator element | | p-datatable-row-reorder-indicator-up | Class name of the row reorder indicator up element | | p-datatable-row-reorder-indicator-down | Class name of the row reorder indicator down element | | p-datatable-sortable-column | Class name of the sortable column element | | p-sortable-column-icon | Class name of the sortable column icon element | | p-sortable-column-badge | Class name of the sortable column badge element | | p-datatable-selectable-row | Class name of the selectable row element | | p-datatable-resizable-column | Class name of the resizable column element | | p-datatable-row-editor-cancel | Class name of the row editor cancel element | | p-datatable-frozen-column | Class name of the frozen column element | | p-datatable-contextmenu-row-selected | Class name of the contextmenu row selected element | --- # Angular Tabs Component Tabs is a container component to group content with tabs. ## Accessibility Screen Reader Tabs container is defined with the tablist role, as any attribute is passed to the container element aria-labelledby can be optionally used to specify an element to describe the Tabs. Each tab header has a tab role along with aria-selected state attribute and aria-controls to refer to the corresponding tab content element. The content element of each tab has tabpanel role, an id to match the aria-controls of the header and aria-labelledby reference to the header as the accessible name. Tab Header Keyboard Support Key Function tab Moves focus through the header. enter Activates the focused tab header. space Activates the focused tab header. right arrow Moves focus to the next header. left arrow Moves focus to the previous header. home Moves focus to the last header. end Moves focus to the first header. ## Basic Tabs is defined using TabList , Tab , TabPanels and TabPanel components. Tab and TabPanel components are associated with their value properties **Example:** ```typescript import { Component } from '@angular/core'; import { TabsModule } from 'primeng/tabs'; @Component({ template: ` Header I Header II Header III

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.

`, standalone: true, imports: [TabsModule] }) export class TabsBasicDemo {} ``` ## Controlled Tabs can be controlled programmatically using value property as a model. **Example:** ```typescript import { Component } from '@angular/core'; import { ButtonModule } from 'primeng/button'; import { TabsModule } from 'primeng/tabs'; @Component({ template: `
Header I Header II Header III

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.

`, standalone: true, imports: [ButtonModule, TabsModule] }) export class TabsControlledDemo { value: number = 0; } ``` ## customtemplate-doc Custom content for a tab is defined with the default ng-content. **Example:** ```typescript import { Component } from '@angular/core'; import { AvatarModule } from 'primeng/avatar'; import { BadgeModule } from 'primeng/badge'; import { TabsModule } from 'primeng/tabs'; @Component({ template: ` Amy Elsner Onyama Limba Ioni Bowcher

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.

`, standalone: true, imports: [AvatarModule, BadgeModule, TabsModule] }) export class TabsCustomTemplateDemo {} ``` ## Disabled Enabling disabled property of a Tab prevents user interaction. **Example:** ```typescript import { Component } from '@angular/core'; import { TabsModule } from 'primeng/tabs'; @Component({ template: ` Header I Header II Header III Header IV

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.

`, standalone: true, imports: [TabsModule] }) export class TabsDisabledDemo {} ``` ## Dynamic Tabs can be generated dynamically using the standard @for block. **Example:** ```typescript import { Component, OnInit } from '@angular/core'; import { TabsModule } from 'primeng/tabs'; @Component({ template: ` @for (tab of tabs; track tab.value) { {{ tab.title }} } @for (tab of tabs; track tab.value) {

{{ tab.content }}

 } `, standalone: true, imports: [TabsModule] }) export class TabsDynamicDemo implements OnInit { ngOnInit() { this.tabs = [ { title: 'Tab 1', value: '0', content: 'Tab 1 Content' }, { title: 'Tab 2', value: '1', content: 'Tab 2 Content' }, { title: 'Tab 3', value: '2', content: 'Tab 3 Content' } ]; } } ``` ## Lazy By default, inactive tab's content is rendered (but hidden). You can use the lazy input (either globally on Tabs or individually on a TabPanel ) to change this behavior so that content is only rendered when the tab becomes active. If a lazy tab contains complex components that should only be initialized when the tab is activated, you should wrap the content inside: <ng-template #content>your content</ng-template> . **Example:** ```typescript import { Component } from '@angular/core'; import { TabsModule } from 'primeng/tabs'; @Component({ template: ` Header I Header II Header III

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.

Complex components that should only be initialized when the tab becomes active `, standalone: true, imports: [TabsModule] }) export class TabsLazyDemo {} ``` ## Scrollable Adding scrollable property displays navigational buttons at each side to scroll between tabs. **Example:** ```typescript import { Component } from '@angular/core'; import { TabsModule } from 'primeng/tabs'; @Component({ template: ` @for (tab of scrollableTabs; track tab.value) { {{ tab.title }} } @for (tab of scrollableTabs; track tab.value) {

{{ tab.content }}

 } `, standalone: true, imports: [TabsModule] }) export class TabsScrollableDemo { scrollableTabs: any[] = Array.from({ length: 50 }, (_, i) => ({ title: `Tab ${i + 1}`, content: `Tab ${i + 1} Content`, value: `${i}` })); } ``` ## Tab Menu A navigation menu is implemented using tabs without the panels where the content of a tab is provided by a route component like router-outlet . For the purpose of this demo, router-outlet is not included. **Example:** ```typescript import { Component } from '@angular/core'; import { TabsModule } from 'primeng/tabs'; @Component({ template: ` @for (tab of tabs; track tab.route) { {{ tab.label }} } `, standalone: true, imports: [TabsModule] }) export class TabsTabMenuDemo { tabs: any[] = [ { route: 'dashboard', label: 'Dashboard', icon: 'pi pi-home' }, { route: 'transactions', label: 'Transactions', icon: 'pi pi-chart-line' }, { route: 'products', label: 'Products', icon: 'pi pi-list' }, { route: 'messages', label: 'Messages', icon: 'pi pi-inbox' } ]; } ``` ## Tabs Tabs facilitates seamless switching between different views. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | | value | string \| number | undefined | Value of the active tab. | | scrollable | boolean | false | When specified, enables horizontal and/or vertical scrolling. | | lazy | boolean | false | When enabled, tabs are not rendered until activation. | | selectOnFocus | boolean | false | When enabled, the focused tab is activated. | | showNavigators | boolean | true | Whether to display navigation buttons in container when scrollable is enabled. | | tabindex | number | 0 | Tabindex of the tab buttons. | ## Tab Defines valid properties in Tab component. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | | value | string \| number | undefined | Value of tab. | | disabled | boolean | false | Whether the tab is disabled. | ## Tab List TabList is a helper component for Tabs component. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | ### Templates | Name | Type | Description | |------|------|-------------| | previcon | TemplateRef | A template reference variable that represents the previous icon in a UI component. | | nexticon | TemplateRef | A template reference variable that represents the next icon in a UI component. | ## Tab Panel TabPanel is a helper component for Tabs component. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | | lazy | boolean | false | When enabled, tab is not rendered until activation. | | value | string \| number | undefined | Value of the active tab. | ### Templates | Name | Type | Description | |------|------|-------------| | content | unknown | Template for initializing complex content when lazy is enabled. | ## Tab Panels TabPanels is a helper component for Tabs component. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | ## Pass Through Options | Name | Type | Description | |------|------|-------------| | root | PassThroughOption | Used to pass attributes to the root's DOM element. | ## Theming ### CSS Classes | Class | Description | |-------|-------------| | p-tabs | Class name of the root element | | p-tablist | Class name of the wrapper element | | p-tablist-content | Class name of the content element | | p-tablist-tab-list | Class name of the tab list element | | p-tab | Class name of the tab list element | | p-tablist-active-bar | Class name of the inkbar element | | p-tablist-nav-button | Class name of the navigation buttons | | p-tabpanels | Class name of the tab panels wrapper | | p-tabs-panel | Class name of the tab panel element | ### Design Tokens | Token | CSS Variable | Description | |-------|--------------|-------------| | tabs.transition.duration | --p-tabs-transition-duration | Transition duration of root | | tabs.tablist.border.width | --p-tabs-tablist-border-width | Border width of tablist | | tabs.tablist.background | --p-tabs-tablist-background | Background of tablist | | tabs.tablist.border.color | --p-tabs-tablist-border-color | Border color of tablist | | tabs.tab.background | --p-tabs-tab-background | Background of tab | | tabs.tab.hover.background | --p-tabs-tab-hover-background | Hover background of tab | | tabs.tab.active.background | --p-tabs-tab-active-background | Active background of tab | | tabs.tab.border.width | --p-tabs-tab-border-width | Border width of tab | | tabs.tab.border.color | --p-tabs-tab-border-color | Border color of tab | | tabs.tab.hover.border.color | --p-tabs-tab-hover-border-color | Hover border color of tab | | tabs.tab.active.border.color | --p-tabs-tab-active-border-color | Active border color of tab | | tabs.tab.color | --p-tabs-tab-color | Color of tab | | tabs.tab.hover.color | --p-tabs-tab-hover-color | Hover color of tab | | tabs.tab.active.color | --p-tabs-tab-active-color | Active color of tab | | tabs.tab.padding | --p-tabs-tab-padding | Padding of tab | | tabs.tab.font.weight | --p-tabs-tab-font-weight | Font weight of tab | | tabs.tab.font.size | --p-tabs-tab-font-size | Font size of tab | | tabs.tab.margin | --p-tabs-tab-margin | Margin of tab | | tabs.tab.gap | --p-tabs-tab-gap | Gap of tab | | tabs.tab.focus.ring.width | --p-tabs-tab-focus-ring-width | Focus ring width of tab | | tabs.tab.focus.ring.style | --p-tabs-tab-focus-ring-style | Focus ring style of tab | | tabs.tab.focus.ring.color | --p-tabs-tab-focus-ring-color | Focus ring color of tab | | tabs.tab.focus.ring.offset | --p-tabs-tab-focus-ring-offset | Focus ring offset of tab | | tabs.tab.focus.ring.shadow | --p-tabs-tab-focus-ring-shadow | Focus ring shadow of tab | | tabs.tabpanel.background | --p-tabs-tabpanel-background | Background of tabpanel | | tabs.tabpanel.color | --p-tabs-tabpanel-color | Color of tabpanel | | tabs.tabpanel.padding | --p-tabs-tabpanel-padding | Padding of tabpanel | | tabs.tabpanel.focus.ring.width | --p-tabs-tabpanel-focus-ring-width | Focus ring width of tabpanel | | tabs.tabpanel.focus.ring.style | --p-tabs-tabpanel-focus-ring-style | Focus ring style of tabpanel | | tabs.tabpanel.focus.ring.color | --p-tabs-tabpanel-focus-ring-color | Focus ring color of tabpanel | | tabs.tabpanel.focus.ring.offset | --p-tabs-tabpanel-focus-ring-offset | Focus ring offset of tabpanel | | tabs.tabpanel.focus.ring.shadow | --p-tabs-tabpanel-focus-ring-shadow | Focus ring shadow of tabpanel | | tabs.nav.button.background | --p-tabs-nav-button-background | Background of nav button | | tabs.nav.button.color | --p-tabs-nav-button-color | Color of nav button | | tabs.nav.button.hover.color | --p-tabs-nav-button-hover-color | Hover color of nav button | | tabs.nav.button.width | --p-tabs-nav-button-width | Width of nav button | | tabs.nav.button.focus.ring.width | --p-tabs-nav-button-focus-ring-width | Focus ring width of nav button | | tabs.nav.button.focus.ring.style | --p-tabs-nav-button-focus-ring-style | Focus ring style of nav button | | tabs.nav.button.focus.ring.color | --p-tabs-nav-button-focus-ring-color | Focus ring color of nav button | | tabs.nav.button.focus.ring.offset | --p-tabs-nav-button-focus-ring-offset | Focus ring offset of nav button | | tabs.nav.button.focus.ring.shadow | --p-tabs-nav-button-focus-ring-shadow | Focus ring shadow of nav button | | tabs.nav.button.shadow | --p-tabs-nav-button-shadow | Shadow of nav button | | tabs.active.bar.height | --p-tabs-active-bar-height | Height of active bar | | tabs.active.bar.bottom | --p-tabs-active-bar-bottom | Bottom of active bar | | tabs.active.bar.background | --p-tabs-active-bar-background | Background of active bar | --- # Angular Tag Component Tag component is used to categorize content. ## Accessibility Screen Reader Tag does not include any roles and attributes by default, any attribute is passed to the root element so aria roles and attributes can be added if required. If the tags are dynamic, aria-live may be utilized as well. In case badges need to be tabbable, tabIndex can be added to implement custom key handlers. Keyboard Support Component does not include any interactive elements. ## Basic Label of the tag is defined with the value property. **Example:** ```typescript import { Component } from '@angular/core'; import { TagModule } from 'primeng/tag'; @Component({ template: `
`, standalone: true, imports: [TagModule] }) export class TagBasicDemo {} ``` ## Icon A font icon next to the value can be displayed with the icon property. **Example:** ```typescript import { Component } from '@angular/core'; import { TagModule } from 'primeng/tag'; @Component({ template: `
`, standalone: true, imports: [TagModule] }) export class TagIconDemo {} ``` ## Pill Enabling rounded , displays a tag as a pill. **Example:** ```typescript import { Component } from '@angular/core'; import { TagModule } from 'primeng/tag'; @Component({ template: `
`, standalone: true, imports: [TagModule] }) export class TagPillDemo {} ``` ## Severity Severity defines the color of the tag, possible values are success , info , warn and danger in addition to the default theme color. **Example:** ```typescript import { Component } from '@angular/core'; import { TagModule } from 'primeng/tag'; @Component({ template: `
`, standalone: true, imports: [TagModule] }) export class TagSeverityDemo {} ``` ## Template Children of the component are passed as the content for templating. **Example:** ```typescript import { Component } from '@angular/core'; import { TagModule } from 'primeng/tag'; import { Country } from '@/domain/customer'; @Component({ template: `
Country Italy
`, standalone: true, imports: [TagModule] }) export class TagTemplateDemo {} ``` ## Tag Tag component is used to categorize content. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | | severity | "success" \| "secondary" \| "info" \| "warn" \| "danger" \| "contrast" | - | Severity type of the tag. | | value | string | - | Value to display inside the tag. | | icon | string | - | Icon of the tag to display next to the value. | | rounded | boolean | - | Whether the corners of the tag are rounded. | ### Templates | Name | Type | Description | |------|------|-------------| | icon | TemplateRef | Custom icon template. | ## Pass Through Options | Name | Type | Description | |------|------|-------------| | host | PassThroughOption | Used to pass attributes to the host's DOM element. | | root | PassThroughOption | Used to pass attributes to the root's DOM element. | | icon | PassThroughOption | Used to pass attributes to the icon's DOM element. | | label | PassThroughOption | Used to pass attributes to the label's DOM element. | ## Theming ### CSS Classes | Class | Description | |-------|-------------| | p-tag | Class name of the root element | | p-tag-icon | Class name of the icon element | | p-tag-label | Class name of the label element | ### Design Tokens | Token | CSS Variable | Description | |-------|--------------|-------------| | tag.font.size | --p-tag-font-size | Font size of root | | tag.font.weight | --p-tag-font-weight | Font weight of root | | tag.padding | --p-tag-padding | Padding of root | | tag.gap | --p-tag-gap | Gap of root | | tag.border.radius | --p-tag-border-radius | Border radius of root | | tag.rounded.border.radius | --p-tag-rounded-border-radius | Rounded border radius of root | | tag.icon.size | --p-tag-icon-size | Size of icon | | tag.primary.background | --p-tag-primary-background | Background of primary | | tag.primary.color | --p-tag-primary-color | Color of primary | | tag.secondary.background | --p-tag-secondary-background | Background of secondary | | tag.secondary.color | --p-tag-secondary-color | Color of secondary | | tag.success.background | --p-tag-success-background | Background of success | | tag.success.color | --p-tag-success-color | Color of success | | tag.info.background | --p-tag-info-background | Background of info | | tag.info.color | --p-tag-info-color | Color of info | | tag.warn.background | --p-tag-warn-background | Background of warn | | tag.warn.color | --p-tag-warn-color | Color of warn | | tag.danger.background | --p-tag-danger-background | Background of danger | | tag.danger.color | --p-tag-danger-color | Color of danger | | tag.contrast.background | --p-tag-contrast-background | Background of contrast | | tag.contrast.color | --p-tag-contrast-color | Color of contrast | --- # Angular Terminal Component ## Accessibility Screen Reader Terminal component has an input element that can be described with aria-label or aria-labelledby props. The element that lists the previous commands has aria-live so that changes are received by the screen reader. Keyboard Support Key Function tab Moves focus through the input element. enter Executes the command when focus in on the input element. ## Basic Commands are processed using observables via the TerminalService . Import this service into your component and subscribe to commandHandler to process commands by sending replies with sendResponse function. **Example:** ```typescript import { Component } from '@angular/core'; import { TerminalModule } from 'primeng/terminal'; @Component({ template: `

Enter "date" to display the current date, "greet {0}" for a message and "random" to get a random number.

`, standalone: true, imports: [TerminalModule] }) export class TerminalBasicDemo { subscription: Subscription; constructor() { this.subscription = this.terminalService.commandHandler.subscribe((text) => { let response; let argsIndex = text.indexOf(' '); let command = argsIndex !== -1 ? text.substring(0, argsIndex) : text; switch (command) { case 'date': response = 'Today is ' + new Date().toDateString(); break; case 'greet': response = 'Hola ' + text.substring(argsIndex + 1); break; case 'random': response = Math.floor(Math.random() * 100); break; default: response = 'Unknown command: ' + command; } this.terminalService.sendResponse(response); }); } ngOnDestroy() { if (this.subscription) { this.subscription.unsubscribe(); } } } ``` ## Terminal Terminal is a text based user interface. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | | welcomeMessage | string | - | Initial text to display on terminal. | | prompt | string | - | Prompt text for each command. | | response | string | - | Response to display after a command. | ## Pass Through Options | Name | Type | Description | |------|------|-------------| | host | PassThroughOption | Used to pass attributes to the host's DOM element. | | root | PassThroughOption | Used to pass attributes to the root's DOM element. | | welcomeMessage | PassThroughOption | Used to pass attributes to the welcome message's DOM element. | | commandList | PassThroughOption | Used to pass attributes to the command list's DOM element. | | command | PassThroughOption | Used to pass attributes to the command's DOM element. | | promptLabel | PassThroughOption | Used to pass attributes to the prompt label's DOM element. | | commandValue | PassThroughOption | Used to pass attributes to the command value's DOM element. | | commandResponse | PassThroughOption | Used to pass attributes to the command response's DOM element. | | prompt | PassThroughOption | Used to pass attributes to the prompt's DOM element. | | promptValue | PassThroughOption | Used to pass attributes to the prompt value's DOM element. | ## Theming ### CSS Classes | Class | Description | |-------|-------------| | p-terminal | Class name of the root element | | p-terminal-welcome-message | Class name of the welcome message element | | p-terminal-command-list | Class name of the command list element | | p-terminal-command | Class name of the command element | | p-terminal-command-value | Class name of the command value element | | p-terminal-command-response | Class name of the command response element | | p-terminal-prompt | Class name of the prompt element | | p-terminal-prompt-label | Class name of the prompt label element | | p-terminal-prompt-value | Class name of the prompt value element | ### Design Tokens | Token | CSS Variable | Description | |-------|--------------|-------------| | terminal.background | --p-terminal-background | Background of root | | terminal.border.color | --p-terminal-border-color | Border color of root | | terminal.color | --p-terminal-color | Color of root | | terminal.height | --p-terminal-height | Height of root | | terminal.padding | --p-terminal-padding | Padding of root | | terminal.border.radius | --p-terminal-border-radius | Border radius of root | | terminal.font.weight | --p-terminal-font-weight | Font weight of root | | terminal.font.size | --p-terminal-font-size | Font size of root | | terminal.prompt.gap | --p-terminal-prompt-gap | Gap of prompt | | terminal.command.response.margin | --p-terminal-command-response-margin | Margin of command response | --- # Angular Textarea Component Textarea adds styling and autoResize functionality to standard textarea element. ## Accessibility Screen Reader Textarea component renders a native textarea element that implicitly includes any passed prop. Value to describe the component can either be provided via label tag combined with id prop or using aria-labelledby , aria-label props. ## AutoResize When autoResize is enabled, textarea grows instead of displaying a scrollbar. **Example:** ```typescript import { Component } from '@angular/core'; @Component({ template: `
`, standalone: true, imports: [] }) export class TextareaAutoResizeDemo {} ``` ## Basic Textarea is applied to an input field with pTextarea directive. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; @Component({ template: `
`, standalone: true, imports: [FormsModule] }) export class TextareaBasicDemo { value!: string; } ``` ## Disabled When disabled is present, the element cannot be edited and focused. **Example:** ```typescript import { Component } from '@angular/core'; @Component({ template: `
`, standalone: true, imports: [] }) export class TextareaDisabledDemo {} ``` ## Filled Specify the variant property as filled to display the component with a higher visual emphasis than the default outlined style. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; @Component({ template: `
`, standalone: true, imports: [FormsModule] }) export class TextareaFilledDemo { value!: string; } ``` ## Float Label A floating label appears on top of the input field when focused. Visit FloatLabel documentation for more information. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { FloatLabelModule } from 'primeng/floatlabel'; @Component({ template: `
`, standalone: true, imports: [FloatLabelModule, FormsModule] }) export class TextareaFloatLabelDemo { value1: string = ''; value2: string = ''; value3: string = ''; } ``` ## Fluid The fluid prop makes the component take up the full width of its container when set to true. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; @Component({ template: ` `, standalone: true, imports: [FormsModule] }) export class TextareaFluidDemo { value!: string; } ``` ## Ifta Label IftaLabel is used to create infield top aligned labels. Visit IftaLabel documentation for more information. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { IftaLabelModule } from 'primeng/iftalabel'; @Component({ template: `
`, standalone: true, imports: [IftaLabelModule, FormsModule] }) export class TextareaIftaLabelDemo { value: string = ''; } ``` ## Invalid The invalid state is applied using the ⁠invalid property to indicate failed validation, which can be integrated with Angular Forms. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; @Component({ template: `
`, standalone: true, imports: [FormsModule] }) export class TextareaInvalidDemo { value!: string; } ``` ## keyfilter-doc InputText has built-in key filtering support to block certain keys, refer to keyfilter page for more information. **Example:** ```typescript import { Component } from '@angular/core'; @Component({ template: `
`, standalone: true, imports: [] }) export class TextareaKeyFilterDemo {} ``` ## reactiveforms-doc Textarea can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control. **Example:** ```typescript import { Component, inject } from '@angular/core'; import { ReactiveFormsModule } from '@angular/forms'; import { MessageModule } from 'primeng/message'; import { ButtonModule } from 'primeng/button'; import { MessageService } from 'primeng/api'; @Component({ template: `
@if (isInvalid('address')) { Address is required.. }
`, standalone: true, imports: [MessageModule, ButtonModule, ReactiveFormsModule] }) export class TextareaReactiveFormsDemo { messageService = inject(MessageService); items: any[] | undefined; exampleForm: FormGroup | undefined; formSubmitted: boolean = false; constructor() { this.exampleForm = this.fb.group({ address: ['', Validators.required] }); } onSubmit() { this.formSubmitted = true; if (this.exampleForm.valid) { this.messageService.add({ severity: 'success', summary: 'Success', detail: 'Form is submitted', life: 3000 }); this.exampleForm.reset(); this.formSubmitted = false; } } isInvalid(controlName: string) { const control = this.exampleForm.get(controlName); return control?.invalid && (control.touched || this.formSubmitted); } } ``` ## Sizes Textarea provides small and large sizes as alternatives to the base. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; @Component({ template: `
`, standalone: true, imports: [FormsModule] }) export class TextareaSizesDemo { value1!: string; value2!: string; value3!: string; } ``` ## templatedrivenforms-doc **Example:** ```typescript import { Component, inject } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { MessageModule } from 'primeng/message'; import { ButtonModule } from 'primeng/button'; import { MessageService } from 'primeng/api'; @Component({ template: `
@if (address.invalid && (address.touched || exampleForm.submitted)) { Address is required. }
`, standalone: true, imports: [MessageModule, ButtonModule, FormsModule] }) export class TextareaTemplateDrivenFormsDemo { messageService = inject(MessageService); items: any[] = []; value: any; onSubmit(form: any) { if (form.valid) { this.messageService.add({ severity: 'success', summary: 'Success', detail: 'Form is submitted', life: 3000 }); form.resetForm(); } } } ``` ## Textarea Textarea adds styling and autoResize functionality to standard textarea element. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | | pTextareaPT | PassThrough> | undefined | Used to pass attributes to DOM elements inside the Textarea component. | | pTextareaUnstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | autoResize | boolean | - | When present, textarea size changes as being typed. | | pSize | "small" \| "large" | - | Defines the size of the component. | | variant | "filled" \| "outlined" | undefined | Specifies the input variant of the component. | | fluid | boolean | undefined | Spans 100% width of the container when enabled. | | invalid | boolean | false | When present, it specifies that the component should have invalid state style. | ### Emits | Name | Parameters | Description | |------|------------|-------------| | onResize | event: {} \| Event | Callback to invoke on textarea resize. | ## Pass Through Options | Name | Type | Description | |------|------|-------------| | host | PassThroughOption | Used to pass attributes to the host's DOM element. | | root | PassThroughOption | Used to pass attributes to the root's DOM element. | ## Theming ### CSS Classes | Class | Description | |-------|-------------| | p-textarea | Class name of the root element | ### Design Tokens | Token | CSS Variable | Description | |-------|--------------|-------------| | textarea.background | --p-textarea-background | Background of root | | textarea.disabled.background | --p-textarea-disabled-background | Disabled background of root | | textarea.filled.background | --p-textarea-filled-background | Filled background of root | | textarea.filled.hover.background | --p-textarea-filled-hover-background | Filled hover background of root | | textarea.filled.focus.background | --p-textarea-filled-focus-background | Filled focus background of root | | textarea.border.color | --p-textarea-border-color | Border color of root | | textarea.hover.border.color | --p-textarea-hover-border-color | Hover border color of root | | textarea.focus.border.color | --p-textarea-focus-border-color | Focus border color of root | | textarea.invalid.border.color | --p-textarea-invalid-border-color | Invalid border color of root | | textarea.color | --p-textarea-color | Color of root | | textarea.disabled.color | --p-textarea-disabled-color | Disabled color of root | | textarea.placeholder.color | --p-textarea-placeholder-color | Placeholder color of root | | textarea.invalid.placeholder.color | --p-textarea-invalid-placeholder-color | Invalid placeholder color of root | | textarea.shadow | --p-textarea-shadow | Shadow of root | | textarea.padding.x | --p-textarea-padding-x | Padding x of root | | textarea.padding.y | --p-textarea-padding-y | Padding y of root | | textarea.border.radius | --p-textarea-border-radius | Border radius of root | | textarea.focus.ring.width | --p-textarea-focus-ring-width | Focus ring width of root | | textarea.focus.ring.style | --p-textarea-focus-ring-style | Focus ring style of root | | textarea.focus.ring.color | --p-textarea-focus-ring-color | Focus ring color of root | | textarea.focus.ring.offset | --p-textarea-focus-ring-offset | Focus ring offset of root | | textarea.focus.ring.shadow | --p-textarea-focus-ring-shadow | Focus ring shadow of root | | textarea.transition.duration | --p-textarea-transition-duration | Transition duration of root | | textarea.sm.font.size | --p-textarea-sm-font-size | Sm font size of root | | textarea.sm.padding.x | --p-textarea-sm-padding-x | Sm padding x of root | | textarea.sm.padding.y | --p-textarea-sm-padding-y | Sm padding y of root | | textarea.lg.font.size | --p-textarea-lg-font-size | Lg font size of root | | textarea.lg.padding.x | --p-textarea-lg-padding-x | Lg padding x of root | | textarea.lg.padding.y | --p-textarea-lg-padding-y | Lg padding y of root | | textarea.font.weight | --p-textarea-font-weight | Font weight of root | | textarea.font.size | --p-textarea-font-size | Font size of root | --- # Angular TieredMenu Component TieredMenu displays submenus in nested overlays. ## Accessibility Screen Reader TieredMenu component uses the menubar role with aria-orientation set to "vertical" and the value to describe the menu can either be provided with aria-labelledby or aria-label props. Each list item has a presentation role whereas anchor elements have a menuitem role with aria-label referring to the label of the item and aria-disabled defined if the item is disabled. A submenu within a TieredMenu uses the menu role with an aria-labelledby defined as the id of the submenu root menuitem label. In addition, menuitems that open a submenu have aria-haspopup , aria-expanded and aria-controls to define the relation between the item and the submenu. In popup mode, the component implicitly manages the aria-expanded , aria-haspopup and aria-controls attributes of the target element to define the relation between the target and the popup. Keyboard Support Key Function tab Add focus to the first item if focus moves in to the menu. If the focus is already within the menu, focus moves to the next focusable item in the page tab sequence. shift + tab Add focus to the last item if focus moves in to the menu. If the focus is already within the menu, focus moves to the previous focusable item in the page tab sequence. enter If menuitem has a submenu, toggles the visibility of the submenu otherwise activates the menuitem and closes all open overlays. space If menuitem has a submenu, toggles the visibility of the submenu otherwise activates the menuitem and closes all open overlays. escape If focus is inside a popup submenu, closes the submenu and moves focus to the root item of the closed submenu. down arrow Moves focus to the next menuitem within the submenu. up arrow Moves focus to the previous menuitem within the submenu. right arrow Opens a submenu if there is one available and moves focus to the first item. left arrow Closes a submenu and moves focus to the root item of the closed submenu. home Moves focus to the first menuitem within the submenu. end Moves focus to the last menuitem within the submenu. ## Basic TieredMenu requires a collection of menuitems as its model . **Example:** ```typescript import { Component, OnInit } from '@angular/core'; import { TieredMenuModule } from 'primeng/tieredmenu'; import { MenuItem } from 'primeng/api'; @Component({ template: `
`, standalone: true, imports: [TieredMenuModule] }) export class TieredMenuBasicDemo implements OnInit { items: MenuItem[] | undefined; ngOnInit() { this.items = [ { label: 'File', icon: 'pi pi-file', items: [ { label: 'New', icon: 'pi pi-plus', items: [ { label: 'Document', icon: 'pi pi-file' }, { label: 'Image', icon: 'pi pi-image' }, { label: 'Video', icon: 'pi pi-video' } ] }, { label: 'Open', icon: 'pi pi-folder-open' }, { label: 'Print', icon: 'pi pi-print' } ] }, { label: 'Edit', icon: 'pi pi-file-edit', items: [ { label: 'Copy', icon: 'pi pi-copy' }, { label: 'Delete', icon: 'pi pi-times' } ] }, { label: 'Search', icon: 'pi pi-search' }, { separator: true }, { label: 'Share', icon: 'pi pi-share-alt', items: [ { label: 'Slack', icon: 'pi pi-slack' }, { label: 'Whatsapp', icon: 'pi pi-whatsapp' } ] } ]; } } ``` ## Command The command property defines the callback to run when an item is activated by click or a key event. **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { TieredMenuModule } from 'primeng/tieredmenu'; import { MenuItem, MessageService } from 'primeng/api'; @Component({ template: `
`, standalone: true, imports: [TieredMenuModule], providers: [MessageService] }) export class TieredMenuCommandDemo implements OnInit { private messageService = inject(MessageService); items: MenuItem[] | undefined; ngOnInit() { this.items = [ { label: 'File', icon: 'pi pi-file', items: [ { label: 'New', icon: 'pi pi-plus', command: () => { this.messageService.add({ severity: 'success', summary: 'Success', detail: 'File created', life: 3000 }); } }, { label: 'Print', icon: 'pi pi-print', command: () => { this.messageService.add({ severity: 'error', summary: 'Error', detail: 'No printer connected', life: 3000 }); } } ] }, { label: 'Search', icon: 'pi pi-search', command: () => { this.messageService.add({ severity: 'warn', summary: 'Search Results', detail: 'No results found', life: 3000 }); } }, { separator: true }, { label: 'Sync', icon: 'pi pi-cloud', items: [ { label: 'Import', icon: 'pi pi-cloud-download', command: () => { this.messageService.add({ severity: 'info', summary: 'Downloads', detail: 'Downloaded from cloud', life: 3000 }); } }, { label: 'Export', icon: 'pi pi-cloud-upload', command: () => { this.messageService.add({ severity: 'info', summary: 'Shared', detail: 'Exported to cloud', life: 3000 }); } } ] } ]; } } ``` ## Popup Popup mode is enabled by adding popup property and calling toggle method with an event of the target. **Example:** ```typescript import { Component, OnInit } from '@angular/core'; import { ButtonModule } from 'primeng/button'; import { TieredMenuModule } from 'primeng/tieredmenu'; import { MenuItem } from 'primeng/api'; @Component({ template: `
`, standalone: true, imports: [ButtonModule, TieredMenuModule] }) export class TieredMenuPopupDemo implements OnInit { items: MenuItem[] | undefined; ngOnInit() { this.items = [ { label: 'File', icon: 'pi pi-file', items: [ { label: 'New', icon: 'pi pi-plus', items: [ { label: 'Document', icon: 'pi pi-file' }, { label: 'Image', icon: 'pi pi-image' }, { label: 'Video', icon: 'pi pi-video' } ] }, { label: 'Open', icon: 'pi pi-folder-open' }, { label: 'Print', icon: 'pi pi-print' } ] }, { label: 'Edit', icon: 'pi pi-file-edit', items: [ { label: 'Copy', icon: 'pi pi-copy' }, { label: 'Delete', icon: 'pi pi-times' } ] }, { label: 'Search', icon: 'pi pi-search' }, { separator: true }, { label: 'Share', icon: 'pi pi-share-alt', items: [ { label: 'Slack', icon: 'pi pi-slack' }, { label: 'Whatsapp', icon: 'pi pi-whatsapp' } ] } ]; } } ``` ## Router Menu items support navigation via routerLink, programmatic routing using commands, or external URLs. **Example:** ```typescript import { Component, OnInit } from '@angular/core'; import { TieredMenuModule } from 'primeng/tieredmenu'; import { MenuItem } from 'primeng/api'; @Component({ template: `
`, standalone: true, imports: [TieredMenuModule] }) export class TieredMenuRouterDemo implements OnInit { items: MenuItem[] | undefined; ngOnInit() { this.items = [ { label: 'Router', icon: 'pi pi-palette', items: [ { label: 'Theming', routerLink: '/theming' }, { label: 'UI Kit', routerLink: '/uikit' } ] }, { label: 'Programmatic', icon: 'pi pi-link', command: () => { this.router.navigate(['/installation']); } }, { label: 'External', icon: 'pi pi-home', items: [ { label: 'Angular', url: 'https://angular.dev/' }, { label: 'Vite.js', url: 'https://vitejs.dev/' } ] } ]; } } ``` ## Template TieredMenu offers item customization with the item template that receives the menuitem instance from the model as a parameter. **Example:** ```typescript import { Component, OnInit } from '@angular/core'; import { BadgeModule } from 'primeng/badge'; import { TieredMenuModule } from 'primeng/tieredmenu'; import { RippleModule } from 'primeng/ripple'; import { MenuItem } from 'primeng/api'; @Component({ template: `
{{ item.label }} @if (item.badge) { } @if (item.shortcut) { {{ item.shortcut }} } @if (hasSubmenu) { }
`, standalone: true, imports: [BadgeModule, TieredMenuModule, RippleModule] }) export class TieredMenuTemplateDemo implements OnInit { items: MenuItem[] | undefined; ngOnInit() { this.items = [ { label: 'File', icon: 'pi pi-file', items: [ { label: 'New', icon: 'pi pi-plus', items: [ { label: 'Docs', icon: 'pi pi-file', shortcut: '⌘+N' }, { label: 'Image', icon: 'pi pi-image', shortcut: '⌘+I' }, { label: 'Video', icon: 'pi pi-video', shortcut: '⌘+L' } ] }, { label: 'Open', icon: 'pi pi-folder-open', shortcut: '⌘+O' }, { label: 'Print', icon: 'pi pi-print', shortcut: '⌘+P' } ] }, { label: 'Edit', icon: 'pi pi-file-edit', items: [ { label: 'Copy', icon: 'pi pi-copy', shortcut: '⌘+C' }, { label: 'Delete', icon: 'pi pi-times', shortcut: '⌘+D' } ] }, { label: 'Search', icon: 'pi pi-search', shortcut: '⌘+S' }, { separator: true }, { label: 'Share', icon: 'pi pi-share-alt', items: [ { label: 'Slack', icon: 'pi pi-slack', badge: '2' }, { label: 'Whatsapp', icon: 'pi pi-whatsapp', badge: '3' } ] } ]; } } ``` ## Tiered Menu TieredMenu displays submenus in nested overlays. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | | model | MenuItem[] | - | An array of menuitems. | | popup | boolean | - | Defines if menu would displayed as a popup. | | style | Partial | - | Inline style of the component. | | styleClass | string | - | Style class of the component. | | breakpoint | string | - | The breakpoint to define the maximum width boundary. | | autoZIndex | boolean | - | Whether to automatically manage layering. | | baseZIndex | number | - | Base zIndex value to use in layering. | | autoDisplay | boolean | true | Whether to show a root submenu on mouse over. | | id | string | - | Current id state as a string. | | ariaLabel | string | - | Defines a string value that labels an interactive element. | | ariaLabelledBy | string | - | Identifier of the underlying input element. | | disabled | boolean | - | When present, it specifies that the component should be disabled. | | tabindex | number | - | Index of the element in tabbing order. | | appendTo | HTMLElement \| ElementRef \| TemplateRef \| "self" \| "body" \| null \| undefined | 'self' | Target element to attach the overlay, valid values are "body" or a local ng-template variable of another element (note: use binding with brackets for template variables, e.g. [appendTo]="mydiv" for a div element having #mydiv as variable name). | | motionOptions | MotionOptions | - | The motion options. | ### Emits | Name | Parameters | Description | |------|------------|-------------| | onShow | value: Record | Custom submenu icon template. | | item | TemplateRef | Custom item template. | ### Methods | Name | Parameters | Return Type | Description | |------|------------|-------------|-------------| | hide | _event: Event, isFocus: boolean | void | Hides the popup menu. | | toggle | event: TieredMenuToggleEvent | void | Toggles the visibility of the popup menu. | | show | event: TieredMenuToggleEvent, isFocus: boolean | void | Displays the popup menu. | ## Pass Through Options | Name | Type | Description | |------|------|-------------| | root | PassThroughOption | Used to pass attributes to the root's DOM element. | | rootList | PassThroughOption | Used to pass attributes to the root list's DOM element. | | submenu | PassThroughOption | Used to pass attributes to the submenu's DOM element. | | item | PassThroughOption | Used to pass attributes to the item's DOM element. | | itemContent | PassThroughOption | Used to pass attributes to the item content's DOM element. | | itemLink | PassThroughOption | Used to pass attributes to the item link's DOM element. | | itemIcon | PassThroughOption | Used to pass attributes to the item icon's DOM element. | | itemLabel | PassThroughOption | Used to pass attributes to the item label's DOM element. | | submenuIcon | PassThroughOption | Used to pass attributes to the submenu icon's DOM element. | | separator | PassThroughOption | Used to pass attributes to the separator's DOM element. | | motion | MotionOptions | Used to pass options to the motion component/directive. | ## Theming ### CSS Classes | Class | Description | |-------|-------------| | p-tieredmenu | Class name of the root element | | p-tieredmenu-start | Class name of the start element | | p-tieredmenu-root-list | Class name of the root list element | | p-tieredmenu-item | Class name of the item element | | p-tieredmenu-item-content | Class name of the item content element | | p-tieredmenu-item-link | Class name of the item link element | | p-tieredmenu-item-icon | Class name of the item icon element | | p-tieredmenu-item-label | Class name of the item label element | | p-tieredmenu-submenu-icon | Class name of the submenu icon element | | p-tieredmenu-submenu | Class name of the submenu element | | p-tieredmenu-separator | Class name of the separator element | | p-tieredmenu-end | Class name of the end element | ### Design Tokens | Token | CSS Variable | Description | |-------|--------------|-------------| | tieredmenu.background | --p-tieredmenu-background | Background of root | | tieredmenu.border.color | --p-tieredmenu-border-color | Border color of root | | tieredmenu.color | --p-tieredmenu-color | Color of root | | tieredmenu.border.radius | --p-tieredmenu-border-radius | Border radius of root | | tieredmenu.shadow | --p-tieredmenu-shadow | Shadow of root | | tieredmenu.transition.duration | --p-tieredmenu-transition-duration | Transition duration of root | | tieredmenu.list.padding | --p-tieredmenu-list-padding | Padding of list | | tieredmenu.list.gap | --p-tieredmenu-list-gap | Gap of list | | tieredmenu.item.focus.background | --p-tieredmenu-item-focus-background | Focus background of item | | tieredmenu.item.active.background | --p-tieredmenu-item-active-background | Active background of item | | tieredmenu.item.color | --p-tieredmenu-item-color | Color of item | | tieredmenu.item.focus.color | --p-tieredmenu-item-focus-color | Focus color of item | | tieredmenu.item.active.color | --p-tieredmenu-item-active-color | Active color of item | | tieredmenu.item.padding | --p-tieredmenu-item-padding | Padding of item | | tieredmenu.item.border.radius | --p-tieredmenu-item-border-radius | Border radius of item | | tieredmenu.item.gap | --p-tieredmenu-item-gap | Gap of item | | tieredmenu.item.icon.color | --p-tieredmenu-item-icon-color | Icon color of item | | tieredmenu.item.icon.focus.color | --p-tieredmenu-item-icon-focus-color | Icon focus color of item | | tieredmenu.item.icon.active.color | --p-tieredmenu-item-icon-active-color | Icon active color of item | | tieredmenu.item.icon.size | --p-tieredmenu-item-icon-size | Icon size of item | | tieredmenu.item.label.font.weight | --p-tieredmenu-item-label-font-weight | Font weight of item label | | tieredmenu.item.label.font.size | --p-tieredmenu-item-label-font-size | Font size of item label | | tieredmenu.submenu.mobile.indent | --p-tieredmenu-submenu-mobile-indent | Mobile indent of submenu | | tieredmenu.submenu.icon.size | --p-tieredmenu-submenu-icon-size | Size of submenu icon | | tieredmenu.submenu.icon.color | --p-tieredmenu-submenu-icon-color | Color of submenu icon | | tieredmenu.submenu.icon.focus.color | --p-tieredmenu-submenu-icon-focus-color | Focus color of submenu icon | | tieredmenu.submenu.icon.active.color | --p-tieredmenu-submenu-icon-active-color | Active color of submenu icon | | tieredmenu.separator.border.color | --p-tieredmenu-separator-border-color | Border color of separator | --- # Angular Timeline Component Timeline visualizes a series of chained events. ## Accessibility Screen Reader Timeline uses a semantic ordered list element to list the events. No specific role is enforced, still you may use any aria role and attributes as any valid attribute is passed to the list element. Keyboard Support Component does not include any interactive elements. ## Alignment Content location relative the line is defined with the align property. **Example:** ```typescript import { Component } from '@angular/core'; import { TimelineModule } from 'primeng/timeline'; interface EventItem { status?: string; date?: string; icon?: string; color?: string; image?: string; } @Component({ template: `
{{ event.status }} {{ event.status }} {{ event.status }}
`, standalone: true, imports: [TimelineModule] }) export class TimelineAlignmentDemo { events: EventItem[]; constructor() { this.events = [ { status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0', image: 'game-controller.jpg' }, { status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7' }, { status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800' }, { status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B' } ]; } } ``` ## Basic Timeline receives the events with the value property as a collection of arbitrary objects. In addition, content template is required to display the representation of an event. Example below is a sample events array that is used throughout the documentation. **Example:** ```typescript import { Component } from '@angular/core'; import { TimelineModule } from 'primeng/timeline'; @Component({ template: ` {{ event.status }} `, standalone: true, imports: [TimelineModule] }) export class TimelineBasicDemo { events: any[]; constructor() { this.events = [ { status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0', image: 'game-controller.jpg' }, { status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7' }, { status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800' }, { status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B' } ]; } } ``` ## Horizontal TimeLine orientation is controlled with the layout property, default is vertical having horizontal as the alternative. **Example:** ```typescript import { Component } from '@angular/core'; import { TimelineModule } from 'primeng/timeline'; @Component({ template: `
{{ event }} {{ event }} {{ event }}  
`, standalone: true, imports: [TimelineModule] }) export class TimelineHorizontalDemo { events: string[]; constructor() { this.events = ['2020', '2021', '2022', '2023']; } } ``` ## Opposite Additional content at the other side of the line can be provided with the opposite property. **Example:** ```typescript import { Component } from '@angular/core'; import { TimelineModule } from 'primeng/timeline'; interface EventItem { status?: string; date?: string; icon?: string; color?: string; image?: string; } @Component({ template: ` {{ event.date }} {{ event.status }} `, standalone: true, imports: [TimelineModule] }) export class TimelineOppositeDemo { events: EventItem[]; constructor() { this.events = [ { status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0', image: 'game-controller.jpg' }, { status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7' }, { status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800' }, { status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B' } ]; } } ``` ## Template Sample implementation with custom content and styled markers. **Example:** ```typescript import { Component } from '@angular/core'; import { ButtonModule } from 'primeng/button'; import { CardModule } from 'primeng/card'; import { TimelineModule } from 'primeng/timeline'; interface EventItem { status?: string; date?: string; icon?: string; color?: string; image?: string; } @Component({ template: ` @if (event.image) { }

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!

`, standalone: true, imports: [ButtonModule, CardModule, TimelineModule] }) export class TimelineTemplateDemo { events: EventItem[]; constructor() { this.events = [ { status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0', image: 'game-controller.jpg' }, { status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7' }, { status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800' }, { status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B' } ]; } } ``` ## Timeline Timeline visualizes a series of chained events. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | | value | any[] | - | An array of events to display. | | align | "left" \| "right" \| "top" \| "bottom" \| "alternate" | - | Position of the timeline bar relative to the content. Valid values are "left", "right" for vertical layout and "top", "bottom" for horizontal layout. | | layout | "vertical" \| "horizontal" | - | Orientation of the timeline. | ### Templates | Name | Type | Description | |------|------|-------------| | content | TemplateRef> | Custom content template. | | opposite | TemplateRef> | Custom opposite item template. | | marker | TemplateRef> | Custom marker template. | ## Pass Through Options | Name | Type | Description | |------|------|-------------| | host | PassThroughOption | Used to pass attributes to the host's DOM element. | | root | PassThroughOption | Used to pass attributes to the root's DOM element. | | event | PassThroughOption | Used to pass attributes to the event's DOM element. | | eventOpposite | PassThroughOption | Used to pass attributes to the event opposite's DOM element. | | eventSeparator | PassThroughOption | Used to pass attributes to the event separator's DOM element. | | eventMarker | PassThroughOption | Used to pass attributes to the event marker's DOM element. | | eventConnector | PassThroughOption | Used to pass attributes to the event connector's DOM element. | | eventContent | PassThroughOption | Used to pass attributes to the event content's DOM element. | ## Theming ### CSS Classes | Class | Description | |-------|-------------| | p-timeline | Class name of the root element | | p-timeline-event | Class name of the event element | | p-timeline-event-opposite | Class name of the event opposite element | | p-timeline-event-separator | Class name of the event separator element | | p-timeline-event-marker | Class name of the event marker element | | p-timeline-event-connector | Class name of the event connector element | | p-timeline-event-content | Class name of the event content element | ### Design Tokens | Token | CSS Variable | Description | |-------|--------------|-------------| | timeline.event.min.height | --p-timeline-event-min-height | Min height of event | | timeline.horizontal.event.content.padding | --p-timeline-horizontal-event-content-padding | Event content padding of horizontal | | timeline.vertical.event.content.padding | --p-timeline-vertical-event-content-padding | Event content padding of vertical | | timeline.event.marker.size | --p-timeline-event-marker-size | Size of event marker | | timeline.event.marker.border.radius | --p-timeline-event-marker-border-radius | Border radius of event marker | | timeline.event.marker.border.width | --p-timeline-event-marker-border-width | Border width of event marker | | timeline.event.marker.background | --p-timeline-event-marker-background | Background of event marker | | timeline.event.marker.border.color | --p-timeline-event-marker-border-color | Border color of event marker | | timeline.event.marker.content.border.radius | --p-timeline-event-marker-content-border-radius | Content border radius of event marker | | timeline.event.marker.content.size | --p-timeline-event-marker-content-size | Content size of event marker | | timeline.event.marker.content.background | --p-timeline-event-marker-content-background | Content background of event marker | | timeline.event.marker.content.inset.shadow | --p-timeline-event-marker-content-inset-shadow | Content inset shadow of event marker | | timeline.event.connector.color | --p-timeline-event-connector-color | Color of event connector | | timeline.event.connector.size | --p-timeline-event-connector-size | Size of event connector | --- # Angular Toast Component Toast is used to display messages in an overlay. ## Accessibility Screen Reader Toast component use alert role that implicitly defines aria-live as "assertive" and aria-atomic as "true". Close element is a button with an aria-label that refers to the aria.close property of the locale API by default. Close Button Keyboard Support Key Function enter Closes the message. space Closes the message. ## Basic Toasts are displayed by calling the add and addAll method provided by the messageService . A single toast is specified by the Message interface that defines various properties such as severity , summary and detail . **Example:** ```typescript import { Component, inject } from '@angular/core'; import { ButtonModule } from 'primeng/button'; import { ToastModule } from 'primeng/toast'; import { MessageService } from 'primeng/api'; @Component({ template: `
`, standalone: true, imports: [ButtonModule, ToastModule], providers: [MessageService] }) export class ToastBasicDemo { private messageService = inject(MessageService); show() { this.messageService.add({ severity: 'info', summary: 'Info', detail: 'Message Content', life: 3000 }); } } ``` ## clear-doc Clicking the close icon on the toast, removes it manually. Same can also be achieved programmatically using the clear function of the messageService . Calling it without any arguments, removes all displayed messages whereas calling it with a key, removes the messages displayed on a toast having the same key. **Example:** ```typescript import { Component, inject } from '@angular/core'; import { ButtonModule } from 'primeng/button'; import { ToastModule } from 'primeng/toast'; import { MessageService } from 'primeng/api'; @Component({ template: `
`, standalone: true, imports: [ButtonModule, ToastModule], providers: [MessageService] }) export class ToastClearDemo { private messageService = inject(MessageService); show() { this.messageService.add({ key: 'myKey', severity: 'success', summary: 'Message 1', detail: 'Message Content' }); } clear() { this.messageService.clear(); } } ``` ## Headless Headless mode allows you to customize the entire user interface instead of the default elements. **Example:** ```typescript import { Component, inject, signal } from '@angular/core'; import { ButtonModule } from 'primeng/button'; import { ProgressBarModule } from 'primeng/progressbar'; import { ToastModule } from 'primeng/toast'; import { MessageService } from 'primeng/api'; @Component({ template: `
{{ message.summary }}
`, standalone: true, imports: [ButtonModule, ProgressBarModule, ToastModule], providers: [MessageService] }) export class ToastHeadlessDemo { private messageService = inject(MessageService); visible: boolean = false; progress = signal(0); interval: any = null; showConfirm() { if (!this.visible) { this.messageService.add({ key: 'confirm', sticky: true, severity: 'custom', summary: 'Uploading your files.', styleClass: 'backdrop-blur-lg rounded-2xl' }); this.visible = true; this.progress.set(0); if (this.interval) { clearInterval(this.interval); } this.interval = setInterval(() => { if (this.progress() <= 100) { this.progress.update((v) => v + 20); } if (this.progress() >= 100) { this.progress.set(100); clearInterval(this.interval); } }, 1000); } } onClose() { this.visible = false; } } ``` ## life-doc A toast disappears after 3000ms by default, set the life option on either the message or toast to override this. **Example:** ```typescript import { Component, inject } from '@angular/core'; import { ButtonModule } from 'primeng/button'; import { ToastModule } from 'primeng/toast'; import { MessageService } from 'primeng/api'; @Component({ template: `
`, standalone: true, imports: [ButtonModule, ToastModule], providers: [MessageService] }) export class ToastLifeDemo { private messageService = inject(MessageService); showLife() { this.messageService.add({ severity: 'info', summary: 'Life', detail: 'I show for 10000ms' }); } showLifeLong() { this.messageService.add({ severity: 'info', summary: 'Life', detail: 'I show for 20000ms', life: 20000 }); } } ``` ## Multiple Multiple toasts are displayed by passing an array to the showAll method of the messageService . **Example:** ```typescript import { Component, inject } from '@angular/core'; import { ButtonModule } from 'primeng/button'; import { ToastModule } from 'primeng/toast'; import { RippleModule } from 'primeng/ripple'; import { MessageService } from 'primeng/api'; @Component({ template: `
`, standalone: true, imports: [ButtonModule, ToastModule, RippleModule], providers: [MessageService] }) export class ToastMultipleDemo { private messageService = inject(MessageService); show() { this.messageService.addAll([ { severity: 'success', summary: 'Message 1', detail: 'Message Content' }, { severity: 'info', summary: 'Message 2', detail: 'Message Content' }, { severity: 'warn', summary: 'Message 3', detail: 'Message Content' }, { severity: 'error', summary: 'Message 4', detail: 'Message Content' } ]); } } ``` ## Position Location of the toast is customized with the position property. Valid values are top-left , top-center , top-right , bottom-left , bottom-center , bottom-right and center . **Example:** ```typescript import { Component, inject } from '@angular/core'; import { ButtonModule } from 'primeng/button'; import { ToastModule } from 'primeng/toast'; import { RippleModule } from 'primeng/ripple'; import { MessageService } from 'primeng/api'; @Component({ template: `
`, standalone: true, imports: [ButtonModule, ToastModule, RippleModule], providers: [MessageService] }) export class ToastPositionDemo { private messageService = inject(MessageService); showTopLeft() { this.messageService.add({ severity: 'info', summary: 'Info Message', detail: 'Message Content', key: 'tl', life: 3000 }); } showBottomLeft() { this.messageService.add({ severity: 'warn', summary: 'Warn Message', detail: 'Message Content', key: 'bl', life: 3000 }); } showBottomRight() { this.messageService.add({ severity: 'success', summary: 'Success Message', detail: 'Message Content', key: 'br', life: 3000 }); } } ``` ## Responsive Toast styling can be adjusted per screen size with the breakpoints option. The value of breakpoints should be an object literal whose keys are the maximum screen sizes and values are the styles per screen. **Example:** ```typescript import { Component, inject } from '@angular/core'; import { ButtonModule } from 'primeng/button'; import { ToastModule } from 'primeng/toast'; import { MessageService } from 'primeng/api'; @Component({ template: `
`, standalone: true, imports: [ButtonModule, ToastModule], providers: [MessageService] }) export class ToastResponsiveDemo { private messageService = inject(MessageService); show() { this.messageService.add({ severity: 'contrast', summary: 'Success', detail: 'Message Content' }); } } ``` ## Severity The severity option specifies the type of the message. There are four types of messages: success , info , warn and error . The severity of the message is used to display the icon and the color of the toast. **Example:** ```typescript import { Component, inject } from '@angular/core'; import { ButtonModule } from 'primeng/button'; import { ToastModule } from 'primeng/toast'; import { RippleModule } from 'primeng/ripple'; import { MessageService } from 'primeng/api'; @Component({ template: `
`, standalone: true, imports: [ButtonModule, ToastModule, RippleModule], providers: [MessageService] }) export class ToastSeverityDemo { private messageService = inject(MessageService); showSuccess() { this.messageService.add({ severity: 'success', summary: 'Success', detail: 'Message Content' }); } showInfo() { this.messageService.add({ severity: 'info', summary: 'Info', detail: 'Message Content' }); } showWarn() { this.messageService.add({ severity: 'warn', summary: 'Warn', detail: 'Message Content' }); } showError() { this.messageService.add({ severity: 'error', summary: 'Error', detail: 'Message Content' }); } showContrast() { this.messageService.add({ severity: 'contrast', summary: 'Contrast', detail: 'Message Content' }); } showSecondary() { this.messageService.add({ severity: 'secondary', summary: 'Secondary', detail: 'Message Content' }); } } ``` ## Stack Setting mode to stack displays toasts in a stacked layout. Toasts visually overlap with a subtle scale effect and expand on hover to reveal all messages. Use stackGap to control spacing and stackVisibleLimit to set the maximum number of visible toasts. **Example:** ```typescript import { Component, inject } from '@angular/core'; import { ButtonModule } from 'primeng/button'; import { ToastModule } from 'primeng/toast'; import { MessageService } from 'primeng/api'; @Component({ template: `
`, standalone: true, imports: [ButtonModule, ToastModule], providers: [MessageService] }) export class ToastStackDemo { private messageService = inject(MessageService); show() { const sev = this.severities[this.counter++ % this.severities.length]; this.messageService.add({ severity: sev, summary: sev.charAt(0).toUpperCase() + sev.slice(1), detail: 'Toast message content', key: 'stack', life: 10000 }); } showMultiple() { this.messageService.addAll([ { severity: 'info', summary: 'Info', detail: 'Message 1', key: 'stack', life: 10000 }, { severity: 'success', summary: 'Success', detail: 'Message 2', key: 'stack', life: 10000 }, { severity: 'warn', summary: 'Warning', detail: 'Message 3', key: 'stack', life: 10000 } ]); } } ``` ## Sticky A toast disappears after the time defined by the life option, set sticky option true on the message to override this and not hide the toast automatically. **Example:** ```typescript import { Component, inject } from '@angular/core'; import { ButtonModule } from 'primeng/button'; import { ToastModule } from 'primeng/toast'; import { RippleModule } from 'primeng/ripple'; import { MessageService } from 'primeng/api'; @Component({ template: `
`, standalone: true, imports: [ButtonModule, ToastModule, RippleModule], providers: [MessageService] }) export class ToastStickyDemo { private messageService = inject(MessageService); show() { this.messageService.add({ severity: 'info', summary: 'Sticky', detail: 'Message Content', sticky: true }); } clear() { this.messageService.clear(); } } ``` ## target-doc A page may have multiple toast components, in case you'd like to target a specific message to a particular toast, use the key property so that toast and the message can match. **Example:** ```typescript import { Component, inject } from '@angular/core'; import { ButtonModule } from 'primeng/button'; import { ToastModule } from 'primeng/toast'; import { MessageService } from 'primeng/api'; @Component({ template: `
`, standalone: true, imports: [ButtonModule, ToastModule], providers: [MessageService] }) export class ToastTargetDemo { private messageService = inject(MessageService); showToast1() { this.messageService.clear(); this.messageService.add({ key: 'toast1', severity: 'success', summary: 'Success', detail: 'key: toast1' }); } showToast2() { this.messageService.clear(); this.messageService.add({ key: 'toast2', severity: 'warn', summary: 'Warning', detail: 'key: toast2' }); } } ``` ## template-doc Templating allows customizing the content where the message instance is available as the implicit variable. **Example:** ```typescript import { Component, inject } from '@angular/core'; import { AvatarModule } from 'primeng/avatar'; import { ButtonModule } from 'primeng/button'; import { ToastModule } from 'primeng/toast'; import { MessageService } from 'primeng/api'; @Component({ template: `
Amy Elsner
{{ message.summary }}
`, standalone: true, imports: [AvatarModule, ButtonModule, ToastModule], providers: [MessageService] }) export class ToastTemplateDemo { private messageService = inject(MessageService); visible: boolean = false; onConfirm() { this.messageService.clear('confirm'); this.visible = false; } onReject() { this.messageService.clear('confirm'); this.visible = false; } showConfirm() { if (!this.visible) { this.messageService.add({ key: 'confirm', sticky: true, severity: 'success', summary: 'Can you send me the report?' }); this.visible = true; } } } ``` ## Toast Toast is used to display messages in an overlay. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | | key | string | - | Key of the message in case message is targeted to a specific toast component. | | autoZIndex | boolean | - | Whether to automatically manage layering. | | baseZIndex | number | - | Base zIndex value to use in layering. | | life | number | - | The default time to display messages for in milliseconds. | | position | "top-left" \| "top-center" \| "top-right" \| "bottom-left" \| "bottom-center" \| "bottom-right" \| "center" | - | Position of the toast in viewport. | | mode | "single" \| "stack" | - | Display mode of the toast. | | stackGap | number | - | Gap between stacked toast items in pixels. | | stackVisibleLimit | number | - | Maximum number of visible toasts in the stack. | | preventOpenDuplicates | boolean | - | It does not add the new message if there is already a toast displayed with the same content | | preventDuplicates | boolean | - | Displays only once a message with the same content. | | motionOptions | MotionOptions | - | The motion options. | | breakpoints | Record> | - | Object literal to define styles per screen size. | ### Emits | Name | Parameters | Description | |------|------------|-------------| | onClose | event: ToastCloseEvent | Callback to invoke when a message is closed. | ### Templates | Name | Type | Description | |------|------|-------------| | message | TemplateRef | Custom message template. | | headless | TemplateRef | Custom headless template. | ## Pass Through Options | Name | Type | Description | |------|------|-------------| | host | PassThroughOption | Used to pass attributes to the host's DOM element. | | root | PassThroughOption | Used to pass attributes to the root's DOM element. | | message | PassThroughOption | Used to pass attributes to the message's DOM element. | | messageContent | PassThroughOption | Used to pass attributes to the message content's DOM element. | | messageIcon | PassThroughOption | Used to pass attributes to the message icon's DOM element. | | messageText | PassThroughOption | Used to pass attributes to the message text's DOM element. | | summary | PassThroughOption | Used to pass attributes to the summary's DOM element. | | detail | PassThroughOption | Used to pass attributes to the detail's DOM element. | | closeButton | PassThroughOption | Used to pass attributes to the close button's DOM element. | | closeIcon | PassThroughOption | Used to pass attributes to the close icon's DOM element. | | motion | MotionOptions | Used to pass options to the motion component/directive. | ## Theming ### CSS Classes | Class | Description | |-------|-------------| | p-toast | Class name of the root element | | p-toast-message | Class name of the message element | | p-toast-message-content | Class name of the message content element | | p-toast-message-icon | Class name of the message icon element | | p-toast-message-text | Class name of the message text element | | p-toast-summary | Class name of the summary element | | p-toast-detail | Class name of the detail element | | p-toast-close-button | Class name of the close button element | | p-toast-close-icon | Class name of the close icon element | ### Design Tokens | Token | CSS Variable | Description | |-------|--------------|-------------| | toast.width | --p-toast-width | Width of root | | toast.border.radius | --p-toast-border-radius | Border radius of root | | toast.border.width | --p-toast-border-width | Border width of root | | toast.transition.duration | --p-toast-transition-duration | Transition duration of root | | toast.blur | --p-toast-blur | Used to pass tokens of the blur section | | toast.focus.ring.width | --p-toast-focus-ring-width | Focus ring width of root | | toast.focus.ring.style | --p-toast-focus-ring-style | Focus ring style of root | | toast.focus.ring.color | --p-toast-focus-ring-color | Focus ring color of root | | toast.focus.ring.offset | --p-toast-focus-ring-offset | Focus ring offset of root | | toast.focus.ring.shadow | --p-toast-focus-ring-shadow | Focus ring shadow of root | | toast.icon.size | --p-toast-icon-size | Size of icon | | toast.icon.margin | --p-toast-icon-margin | Margin of icon | | toast.content.padding | --p-toast-content-padding | Padding of content | | toast.content.gap | --p-toast-content-gap | Gap of content | | toast.text.gap | --p-toast-text-gap | Gap of text | | toast.summary.font.weight | --p-toast-summary-font-weight | Font weight of summary | | toast.summary.font.size | --p-toast-summary-font-size | Font size of summary | | toast.detail.font.weight | --p-toast-detail-font-weight | Font weight of detail | | toast.detail.font.size | --p-toast-detail-font-size | Font size of detail | | toast.close.button.width | --p-toast-close-button-width | Width of close button | | toast.close.button.height | --p-toast-close-button-height | Height of close button | | toast.close.button.border.radius | --p-toast-close-button-border-radius | Border radius of close button | | toast.close.button.focus.ring.width | --p-toast-close-button-focus-ring-width | Focus ring width of close button | | toast.close.button.focus.ring.style | --p-toast-close-button-focus-ring-style | Focus ring style of close button | | toast.close.button.focus.ring.offset | --p-toast-close-button-focus-ring-offset | Focus ring offset of close button | | toast.close.icon.size | --p-toast-close-icon-size | Size of close icon | | toast.normal.background | --p-toast-normal-background | Background of normal | | toast.normal.border.color | --p-toast-normal-border-color | Border color of normal | | toast.normal.color | --p-toast-normal-color | Color of normal | | toast.normal.detail.color | --p-toast-normal-detail-color | Detail color of normal | | toast.normal.shadow | --p-toast-normal-shadow | Shadow of normal | | toast.normal.close.button.hover.background | --p-toast-normal-close-button-hover-background | Close button hover background of normal | | toast.normal.close.button.focus.ring.color | --p-toast-normal-close-button-focus-ring-color | Close button focus ring color of normal | | toast.normal.close.button.focus.ring.shadow | --p-toast-normal-close-button-focus-ring-shadow | Close button focus ring shadow of normal | | toast.info.background | --p-toast-info-background | Background of info | | toast.info.border.color | --p-toast-info-border-color | Border color of info | | toast.info.color | --p-toast-info-color | Color of info | | toast.info.detail.color | --p-toast-info-detail-color | Detail color of info | | toast.info.shadow | --p-toast-info-shadow | Shadow of info | | toast.info.close.button.hover.background | --p-toast-info-close-button-hover-background | Close button hover background of info | | toast.info.close.button.focus.ring.color | --p-toast-info-close-button-focus-ring-color | Close button focus ring color of info | | toast.info.close.button.focus.ring.shadow | --p-toast-info-close-button-focus-ring-shadow | Close button focus ring shadow of info | | toast.success.background | --p-toast-success-background | Background of success | | toast.success.border.color | --p-toast-success-border-color | Border color of success | | toast.success.color | --p-toast-success-color | Color of success | | toast.success.detail.color | --p-toast-success-detail-color | Detail color of success | | toast.success.shadow | --p-toast-success-shadow | Shadow of success | | toast.success.close.button.hover.background | --p-toast-success-close-button-hover-background | Close button hover background of success | | toast.success.close.button.focus.ring.color | --p-toast-success-close-button-focus-ring-color | Close button focus ring color of success | | toast.success.close.button.focus.ring.shadow | --p-toast-success-close-button-focus-ring-shadow | Close button focus ring shadow of success | | toast.warn.background | --p-toast-warn-background | Background of warn | | toast.warn.border.color | --p-toast-warn-border-color | Border color of warn | | toast.warn.color | --p-toast-warn-color | Color of warn | | toast.warn.detail.color | --p-toast-warn-detail-color | Detail color of warn | | toast.warn.shadow | --p-toast-warn-shadow | Shadow of warn | | toast.warn.close.button.hover.background | --p-toast-warn-close-button-hover-background | Close button hover background of warn | | toast.warn.close.button.focus.ring.color | --p-toast-warn-close-button-focus-ring-color | Close button focus ring color of warn | | toast.warn.close.button.focus.ring.shadow | --p-toast-warn-close-button-focus-ring-shadow | Close button focus ring shadow of warn | | toast.error.background | --p-toast-error-background | Background of error | | toast.error.border.color | --p-toast-error-border-color | Border color of error | | toast.error.color | --p-toast-error-color | Color of error | | toast.error.detail.color | --p-toast-error-detail-color | Detail color of error | | toast.error.shadow | --p-toast-error-shadow | Shadow of error | | toast.error.close.button.hover.background | --p-toast-error-close-button-hover-background | Close button hover background of error | | toast.error.close.button.focus.ring.color | --p-toast-error-close-button-focus-ring-color | Close button focus ring color of error | | toast.error.close.button.focus.ring.shadow | --p-toast-error-close-button-focus-ring-shadow | Close button focus ring shadow of error | | toast.secondary.background | --p-toast-secondary-background | Background of secondary | | toast.secondary.border.color | --p-toast-secondary-border-color | Border color of secondary | | toast.secondary.color | --p-toast-secondary-color | Color of secondary | | toast.secondary.detail.color | --p-toast-secondary-detail-color | Detail color of secondary | | toast.secondary.shadow | --p-toast-secondary-shadow | Shadow of secondary | | toast.secondary.close.button.hover.background | --p-toast-secondary-close-button-hover-background | Close button hover background of secondary | | toast.secondary.close.button.focus.ring.color | --p-toast-secondary-close-button-focus-ring-color | Close button focus ring color of secondary | | toast.secondary.close.button.focus.ring.shadow | --p-toast-secondary-close-button-focus-ring-shadow | Close button focus ring shadow of secondary | | toast.contrast.background | --p-toast-contrast-background | Background of contrast | | toast.contrast.border.color | --p-toast-contrast-border-color | Border color of contrast | | toast.contrast.color | --p-toast-contrast-color | Color of contrast | | toast.contrast.detail.color | --p-toast-contrast-detail-color | Detail color of contrast | | toast.contrast.shadow | --p-toast-contrast-shadow | Shadow of contrast | | toast.contrast.close.button.hover.background | --p-toast-contrast-close-button-hover-background | Close button hover background of contrast | | toast.contrast.close.button.focus.ring.color | --p-toast-contrast-close-button-focus-ring-color | Close button focus ring color of contrast | | toast.contrast.close.button.focus.ring.shadow | --p-toast-contrast-close-button-focus-ring-shadow | Close button focus ring shadow of contrast | --- # Angular ToggleButton Component ToggleButton is used to select a boolean value using a button. ## Accessibility Screen Reader ToggleButton component uses an element with button role and updates aria-pressed state for screen readers. Value to describe the component can be defined with ariaLabelledBy or ariaLabel props, it is highly suggested to use either of these props as the component changes the label displayed which will result in screen readers to read different labels when the component receives focus. To prevent this, always provide an aria label that does not change related to state. ## Basic Two-way binding to a boolean property is defined using the standard ngModel directive. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { ToggleButtonModule } from 'primeng/togglebutton'; @Component({ template: `
`, standalone: true, imports: [ToggleButtonModule, FormsModule] }) export class ToggleButtonBasicDemo { checked: boolean = false; } ``` ## Customized Icons and Labels can be customized using onLabel , offLabel , onIcon and offIcon properties. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { ToggleButtonModule } from 'primeng/togglebutton'; @Component({ template: `
`, standalone: true, imports: [ToggleButtonModule, FormsModule] }) export class ToggleButtonCustomizedDemo { checked: boolean = false; } ``` ## Disabled When disabled is present, the element cannot be edited and focused. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { ToggleButtonModule } from 'primeng/togglebutton'; @Component({ template: `
`, standalone: true, imports: [ToggleButtonModule, FormsModule] }) export class ToggleButtonDisabledDemo { checked: boolean = false; } ``` ## Fluid The fluid prop makes the component take up the full width of its container when set to true. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { ToggleButtonModule } from 'primeng/togglebutton'; @Component({ template: `
`, standalone: true, imports: [ToggleButtonModule, FormsModule] }) export class ToggleButtonFluidDemo { checked: boolean = false; } ``` ## Invalid The invalid state is applied using the ⁠invalid property to indicate failed validation, which can be integrated with Angular Forms. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { ToggleButtonModule } from 'primeng/togglebutton'; @Component({ template: `
`, standalone: true, imports: [ToggleButtonModule, FormsModule] }) export class ToggleButtonInvalidDemo { checked: boolean = false; } ``` ## reactiveforms-doc ToggleButton can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control. **Example:** ```typescript import { Component, inject } from '@angular/core'; import { ReactiveFormsModule } from '@angular/forms'; import { MessageModule } from 'primeng/message'; import { ToggleButtonModule } from 'primeng/togglebutton'; import { ButtonModule } from 'primeng/button'; import { MessageService } from 'primeng/api'; @Component({ template: `
@if (isInvalid('checked')) { Consent is mandatory. }
`, standalone: true, imports: [MessageModule, ToggleButtonModule, ButtonModule, ReactiveFormsModule] }) export class ToggleButtonReactiveFormsDemo { messageService = inject(MessageService); exampleForm: FormGroup | undefined; formSubmitted: boolean = false; constructor() { this.exampleForm = this.fb.group({ checked: [false, Validators.requiredTrue] }); } onSubmit() { this.formSubmitted = true; if (this.exampleForm.valid) { this.messageService.add({ severity: 'success', summary: 'Success', detail: 'Form is submitted', life: 3000 }); this.exampleForm.reset(); this.formSubmitted = false; } } isInvalid(controlName: string) { const control = this.exampleForm.get(controlName); return control?.invalid && (control.touched || this.formSubmitted); } } ``` ## Sizes ToggleButton provides small and large sizes as alternatives to the base. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { ToggleButtonModule } from 'primeng/togglebutton'; @Component({ template: `
`, standalone: true, imports: [ToggleButtonModule, FormsModule] }) export class ToggleButtonSizesDemo { value1: boolean = false; value2: boolean = false; value3: boolean = false; } ``` ## templatedrivenforms-doc **Example:** ```typescript import { Component, inject } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { MessageModule } from 'primeng/message'; import { ToggleButtonModule } from 'primeng/togglebutton'; import { ButtonModule } from 'primeng/button'; import { MessageService } from 'primeng/api'; @Component({ template: `
@if (model.invalid && (model.touched || exampleForm.submitted)) { Consent is mandatory. }
`, standalone: true, imports: [MessageModule, ToggleButtonModule, ButtonModule, FormsModule] }) export class ToggleButtonTemplateDrivenFormsDemo { messageService = inject(MessageService); checked: boolean; onSubmit(form: any) { if (form.valid) { this.messageService.add({ severity: 'success', summary: 'Success', detail: 'Form Submitted', life: 3000 }); form.resetForm(); } } } ``` ## Toggle Button ToggleButton is used to select a boolean value using a button. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | | required | boolean | false | There must be a value (if set). | | invalid | boolean | false | When present, it specifies that the component should have invalid state style. | | disabled | boolean | false | When present, it specifies that the component should have disabled state style. | | name | string | undefined | When present, it specifies that the name of the input. | | onLabel | string | - | Label for the on state. | | offLabel | string | - | Label for the off state. | | onIcon | string | - | Icon for the on state. | | offIcon | string | - | Icon for the off state. | | ariaLabel | string | - | Defines a string that labels the input for accessibility. | | ariaLabelledBy | string | - | Establishes relationships between the component and label(s) where its value should be one or more element IDs. | | inputId | string | - | Identifier of the focus input to match a label defined for the component. | | tabindex | number | - | Index of the element in tabbing order. | | iconPos | "left" \| "right" | - | Position of the icon. | | autofocus | boolean | - | When present, it specifies that the component should automatically get focus on load. | | size | "small" \| "large" | - | Defines the size of the component. | | allowEmpty | boolean | - | Whether selection can not be cleared. | | fluid | boolean | undefined | Spans 100% width of the container when enabled. | ### Emits | Name | Parameters | Description | |------|------------|-------------| | onChange | event: ToggleButtonChangeEvent | Callback to invoke on value change. | ### Templates | Name | Type | Description | |------|------|-------------| | icon | TemplateRef | Custom icon template. | | content | TemplateRef | Custom content template. | ## Pass Through Options | Name | Type | Description | |------|------|-------------| | root | PassThroughOption | Used to pass attributes to the root's DOM element. | | content | PassThroughOption | Used to pass attributes to the content's DOM element. | | icon | PassThroughOption | Used to pass attributes to the icon's DOM element. | | label | PassThroughOption | Used to pass attributes to the label's DOM element. | ## Theming ### CSS Classes | Class | Description | |-------|-------------| | p-togglebutton | Class name of the root element | | p-togglebutton-icon | Class name of the icon element | | p-togglebutton-icon-left | Class name of the left icon | | p-togglebutton-icon-right | Class name of the right icon | | p-togglebutton-label | Class name of the label element | ### Design Tokens | Token | CSS Variable | Description | |-------|--------------|-------------| | togglebutton.padding | --p-togglebutton-padding | Padding of root | | togglebutton.border.radius | --p-togglebutton-border-radius | Border radius of root | | togglebutton.gap | --p-togglebutton-gap | Gap of root | | togglebutton.font.size | --p-togglebutton-font-size | Font size of root | | togglebutton.font.weight | --p-togglebutton-font-weight | Font weight of root | | togglebutton.disabled.background | --p-togglebutton-disabled-background | Disabled background of root | | togglebutton.disabled.border.color | --p-togglebutton-disabled-border-color | Disabled border color of root | | togglebutton.disabled.color | --p-togglebutton-disabled-color | Disabled color of root | | togglebutton.invalid.border.color | --p-togglebutton-invalid-border-color | Invalid border color of root | | togglebutton.focus.ring.width | --p-togglebutton-focus-ring-width | Focus ring width of root | | togglebutton.focus.ring.style | --p-togglebutton-focus-ring-style | Focus ring style of root | | togglebutton.focus.ring.color | --p-togglebutton-focus-ring-color | Focus ring color of root | | togglebutton.focus.ring.offset | --p-togglebutton-focus-ring-offset | Focus ring offset of root | | togglebutton.focus.ring.shadow | --p-togglebutton-focus-ring-shadow | Focus ring shadow of root | | togglebutton.transition.duration | --p-togglebutton-transition-duration | Transition duration of root | | togglebutton.sm.font.size | --p-togglebutton-sm-font-size | Sm font size of root | | togglebutton.sm.padding | --p-togglebutton-sm-padding | Sm padding of root | | togglebutton.lg.font.size | --p-togglebutton-lg-font-size | Lg font size of root | | togglebutton.lg.padding | --p-togglebutton-lg-padding | Lg padding of root | | togglebutton.background | --p-togglebutton-background | Background of root | | togglebutton.checked.background | --p-togglebutton-checked-background | Checked background of root | | togglebutton.hover.background | --p-togglebutton-hover-background | Hover background of root | | togglebutton.border.color | --p-togglebutton-border-color | Border color of root | | togglebutton.color | --p-togglebutton-color | Color of root | | togglebutton.hover.color | --p-togglebutton-hover-color | Hover color of root | | togglebutton.checked.color | --p-togglebutton-checked-color | Checked color of root | | togglebutton.checked.border.color | --p-togglebutton-checked-border-color | Checked border color of root | | togglebutton.icon.disabled.color | --p-togglebutton-icon-disabled-color | Disabled color of icon | | togglebutton.icon.color | --p-togglebutton-icon-color | Color of icon | | togglebutton.icon.hover.color | --p-togglebutton-icon-hover-color | Hover color of icon | | togglebutton.icon.checked.color | --p-togglebutton-icon-checked-color | Checked color of icon | | togglebutton.content.padding | --p-togglebutton-content-padding | Padding of content | | togglebutton.content.border.radius | --p-togglebutton-content-border-radius | Border radius of content | | togglebutton.content.checked.shadow | --p-togglebutton-content-checked-shadow | Checked shadow of content | | togglebutton.content.sm.padding | --p-togglebutton-content-sm-padding | Sm padding of content | | togglebutton.content.lg.padding | --p-togglebutton-content-lg-padding | Lg padding of content | | togglebutton.content.checked.background | --p-togglebutton-content-checked-background | Checked background of content | --- # Angular ToggleSwitch Component ToggleSwitch is used to select a boolean value. ## Accessibility Screen Reader InputSwitch component uses a hidden native checkbox element with switch role internally that is only visible to screen readers. Value to describe the component can either be provided via label tag combined with inputId prop or using ariaLabelledBy , ariaLabel props. ## Basic Two-way value binding is defined using ngModel . **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { ToggleSwitchModule } from 'primeng/toggleswitch'; @Component({ template: `
`, standalone: true, imports: [ToggleSwitchModule, FormsModule] }) export class ToggleSwitchBasicDemo { checked: boolean = false; } ``` ## Disabled When disabled is present, the element cannot be edited and focused. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { ToggleSwitchModule } from 'primeng/toggleswitch'; @Component({ template: `
`, standalone: true, imports: [ToggleSwitchModule, FormsModule] }) export class ToggleSwitchDisabledDemo { checked: boolean = false; } ``` ## Invalid The invalid state is applied using the ⁠invalid property to indicate failed validation, which can be integrated with Angular Forms. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { ToggleSwitchModule } from 'primeng/toggleswitch'; @Component({ template: `
`, standalone: true, imports: [ToggleSwitchModule, FormsModule] }) export class ToggleSwitchInvalidDemo { checked: boolean = false; } ``` ## Preselection Enabling ngModel property displays the component as active initially. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { ToggleSwitchModule } from 'primeng/toggleswitch'; @Component({ template: `
`, standalone: true, imports: [ToggleSwitchModule, FormsModule] }) export class ToggleSwitchPreSelectionDemo { checked: boolean = true; } ``` ## reactiveforms-doc ToggleSwitch can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control. **Example:** ```typescript import { Component, inject } from '@angular/core'; import { ReactiveFormsModule } from '@angular/forms'; import { MessageModule } from 'primeng/message'; import { ToggleSwitchModule } from 'primeng/toggleswitch'; import { ButtonModule } from 'primeng/button'; import { MessageService } from 'primeng/api'; @Component({ template: `
@if (isInvalid('activation')) { Activation is required. }
`, standalone: true, imports: [MessageModule, ToggleSwitchModule, ButtonModule, ReactiveFormsModule] }) export class ToggleSwitchReactiveFormsDemo { messageService = inject(MessageService); exampleForm: FormGroup | undefined; formSubmitted: boolean = false; constructor() { this.exampleForm = this.fb.group({ activation: ['', Validators.required] }); } onSubmit() { this.formSubmitted = true; if (this.exampleForm.valid) { this.messageService.add({ severity: 'success', summary: 'Success', detail: 'Form is submitted', life: 3000 }); this.exampleForm.reset(); this.formSubmitted = false; } } isInvalid(controlName: string) { const control = this.exampleForm.get(controlName); return control?.invalid && (control.touched || this.formSubmitted); } } ``` ## Template The handle template is available to display custom content. **Example:** ```typescript import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { ToggleSwitchModule } from 'primeng/toggleswitch'; @Component({ template: `
`, standalone: true, imports: [ToggleSwitchModule, FormsModule] }) export class ToggleSwitchTemplateDemo { checked: boolean = false; } ``` ## templatedrivenforms-doc **Example:** ```typescript import { Component, inject } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { MessageModule } from 'primeng/message'; import { ToggleSwitchModule } from 'primeng/toggleswitch'; import { ButtonModule } from 'primeng/button'; import { MessageService } from 'primeng/api'; @Component({ template: `
@if (model.invalid && exampleForm.submitted) { Activation is required. }
`, standalone: true, imports: [MessageModule, ToggleSwitchModule, ButtonModule, FormsModule] }) export class ToggleSwitchTemplateDrivenFormsDemo { messageService = inject(MessageService); checked: boolean; onSubmit(form: any) { if (form.valid) { this.messageService.add({ severity: 'success', summary: 'Success', detail: 'Form Submitted', life: 3000 }); form.resetForm(); } } } ``` ## Toggle Switch ToggleSwitch is used to select a boolean value. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | | required | boolean | false | There must be a value (if set). | | invalid | boolean | false | When present, it specifies that the component should have invalid state style. | | disabled | boolean | false | When present, it specifies that the component should have disabled state style. | | name | string | undefined | When present, it specifies that the name of the input. | | tabindex | number | - | Index of the element in tabbing order. | | inputId | string | - | Identifier of the input element. | | readonly | boolean | - | When present, it specifies that the component cannot be edited. | | trueValue | any | - | Value in checked state. | | falseValue | any | - | Value in unchecked state. | | ariaLabel | string | - | Used to define a string that autocomplete attribute the current element. | | size | "small" \| "large" | undefined | Specifies the size of the component. | | ariaLabelledBy | string | - | Establishes relationships between the component and label(s) where its value should be one or more element IDs. | | autofocus | boolean | - | When present, it specifies that the component should automatically get focus on load. | ### Emits | Name | Parameters | Description | |------|------------|-------------| | onChange | event: ToggleSwitchChangeEvent | Callback to invoke when the on value change. | ### Templates | Name | Type | Description | |------|------|-------------| | handle | TemplateRef | Custom handle template. | ## Pass Through Options | Name | Type | Description | |------|------|-------------| | root | PassThroughOption | Used to pass attributes to the root's DOM element. | | input | PassThroughOption | Used to pass attributes to the input's DOM element. | | slider | PassThroughOption | Used to pass attributes to the slider's DOM element. | | handle | PassThroughOption | Used to pass attributes to the handle's DOM element. | ## Theming ### CSS Classes | Class | Description | |-------|-------------| | p-toggleswitch | Class name of the root element | | p-toggleswitch-input | Class name of the input element | | p-toggleswitch-slider | Class name of the slider element | ### Design Tokens | Token | CSS Variable | Description | |-------|--------------|-------------| | toggleswitch.width | --p-toggleswitch-width | Width of root | | toggleswitch.height | --p-toggleswitch-height | Height of root | | toggleswitch.border.radius | --p-toggleswitch-border-radius | Border radius of root | | toggleswitch.gap | --p-toggleswitch-gap | Gap of root | | toggleswitch.shadow | --p-toggleswitch-shadow | Shadow of root | | toggleswitch.focus.ring.width | --p-toggleswitch-focus-ring-width | Focus ring width of root | | toggleswitch.focus.ring.style | --p-toggleswitch-focus-ring-style | Focus ring style of root | | toggleswitch.focus.ring.color | --p-toggleswitch-focus-ring-color | Focus ring color of root | | toggleswitch.focus.ring.offset | --p-toggleswitch-focus-ring-offset | Focus ring offset of root | | toggleswitch.focus.ring.shadow | --p-toggleswitch-focus-ring-shadow | Focus ring shadow of root | | toggleswitch.border.width | --p-toggleswitch-border-width | Border width of root | | toggleswitch.border.color | --p-toggleswitch-border-color | Border color of root | | toggleswitch.hover.border.color | --p-toggleswitch-hover-border-color | Hover border color of root | | toggleswitch.checked.border.color | --p-toggleswitch-checked-border-color | Checked border color of root | | toggleswitch.checked.hover.border.color | --p-toggleswitch-checked-hover-border-color | Checked hover border color of root | | toggleswitch.invalid.border.color | --p-toggleswitch-invalid-border-color | Invalid border color of root | | toggleswitch.transition.duration | --p-toggleswitch-transition-duration | Transition duration of root | | toggleswitch.slide.duration | --p-toggleswitch-slide-duration | Slide duration of root | | toggleswitch.background | --p-toggleswitch-background | Background of root | | toggleswitch.disabled.background | --p-toggleswitch-disabled-background | Disabled background of root | | toggleswitch.hover.background | --p-toggleswitch-hover-background | Hover background of root | | toggleswitch.checked.background | --p-toggleswitch-checked-background | Checked background of root | | toggleswitch.checked.hover.background | --p-toggleswitch-checked-hover-background | Checked hover background of root | | toggleswitch.handle.border.radius | --p-toggleswitch-handle-border-radius | Border radius of handle | | toggleswitch.handle.size | --p-toggleswitch-handle-size | Size of handle | | toggleswitch.handle.background | --p-toggleswitch-handle-background | Background of handle | | toggleswitch.handle.disabled.background | --p-toggleswitch-handle-disabled-background | Disabled background of handle | | toggleswitch.handle.hover.background | --p-toggleswitch-handle-hover-background | Hover background of handle | | toggleswitch.handle.checked.background | --p-toggleswitch-handle-checked-background | Checked background of handle | | toggleswitch.handle.checked.hover.background | --p-toggleswitch-handle-checked-hover-background | Checked hover background of handle | | toggleswitch.handle.color | --p-toggleswitch-handle-color | Color of handle | | toggleswitch.handle.hover.color | --p-toggleswitch-handle-hover-color | Hover color of handle | | toggleswitch.handle.checked.color | --p-toggleswitch-handle-checked-color | Checked color of handle | | toggleswitch.handle.checked.hover.color | --p-toggleswitch-handle-checked-hover-color | Checked hover color of handle | --- # Angular Toolbar Component Toolbar is a grouping component for buttons and other content. ## Accessibility Screen Reader Toolbar uses toolbar role for the root element, aria-orientation is not included as it defaults to horizontal . Any valid attribute is passed to the root element so you may add additional properties like aria-labelledby and aria-labelled to define the element if required. Keyboard Support Component does not include any interactive elements. Arbitrary content can be placed with templating and elements like buttons inside should follow the page tab sequence. ## Basic Toolbar is a grouping component for buttons and other content. Its content can be placed inside the start , center and end sections. **Example:** ```typescript import { Component, OnInit } from '@angular/core'; import { ButtonModule } from 'primeng/button'; import { IconFieldModule } from 'primeng/iconfield'; import { InputIconModule } from 'primeng/inputicon'; import { SplitButtonModule } from 'primeng/splitbutton'; import { ToolbarModule } from 'primeng/toolbar'; import { InputTextModule } from 'primeng/inputtext'; import { MenuItem } from 'primeng/api'; @Component({ template: ` `, standalone: true, imports: [ButtonModule, IconFieldModule, InputIconModule, SplitButtonModule, ToolbarModule, InputTextModule] }) export class ToolbarBasicDemo implements OnInit { items: MenuItem[] | undefined; ngOnInit() { this.items = [ { label: 'Update', icon: 'pi pi-refresh' }, { label: 'Delete', icon: 'pi pi-times' } ]; } } ``` ## Custom Content can also be placed using the start , center and end templates. **Example:** ```typescript import { Component } from '@angular/core'; import { AvatarModule } from 'primeng/avatar'; import { ButtonModule } from 'primeng/button'; import { ToolbarModule } from 'primeng/toolbar'; @Component({ template: `
`, standalone: true, imports: [AvatarModule, ButtonModule, ToolbarModule] }) export class ToolbarCustomDemo {} ``` ## Toolbar Toolbar is a grouping component for buttons and other content. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | | ariaLabelledBy | string | - | Defines a string value that labels an interactive element. | ### Templates | Name | Type | Description | |------|------|-------------| | start | TemplateRef | Custom start template. | | end | TemplateRef | Custom end template. | | center | TemplateRef | Custom center template. | ## Pass Through Options | Name | Type | Description | |------|------|-------------| | root | PassThroughOption | Used to pass attributes to the root's DOM element. | | start | PassThroughOption | Used to pass attributes to the start's DOM element. | | center | PassThroughOption | Used to pass attributes to the center's DOM element. | | end | PassThroughOption | Used to pass attributes to the right's DOM element. | ## Theming ### CSS Classes | Class | Description | |-------|-------------| | p-toolbar | Class name of the root element | | p-toolbar-start | Class name of the start element | | p-toolbar-center | Class name of the center element | | p-toolbar-end | Class name of the end element | ### Design Tokens | Token | CSS Variable | Description | |-------|--------------|-------------| | toolbar.background | --p-toolbar-background | Background of root | | toolbar.border.color | --p-toolbar-border-color | Border color of root | | toolbar.border.radius | --p-toolbar-border-radius | Border radius of root | | toolbar.color | --p-toolbar-color | Color of root | | toolbar.gap | --p-toolbar-gap | Gap of root | | toolbar.padding | --p-toolbar-padding | Padding of root | --- # Angular Tooltip Component Tooltip directive provides advisory information for a component. Tooltip is integrated within various PrimeNG components. ## Accessibility Screen Reader Tooltip component uses tooltip role and when it becomes visible the generated id of the tooltip is defined as the aria-describedby of the target. Keyboard Support Key Function escape Closes the tooltip when focus is on the target. ## Auto Hide Tooltip is hidden when mouse leaves the target element, in cases where tooltip needs to be interacted with, set autoHide to false to change the default behavior. **Example:** ```typescript import { Component } from '@angular/core'; import { InputTextModule } from 'primeng/inputtext'; import { TooltipModule } from 'primeng/tooltip'; @Component({ template: `
`, standalone: true, imports: [InputTextModule, TooltipModule] }) export class TooltipAutoHideDemo {} ``` ## Custom Tooltip can use either a string or a TemplateRef . **Example:** ```typescript import { Component } from '@angular/core'; import { ButtonModule } from 'primeng/button'; import { TooltipModule } from 'primeng/tooltip'; @Component({ template: `
PrimeNG rocks!
`, standalone: true, imports: [ButtonModule, TooltipModule] }) export class TooltipCustomDemo {} ``` ## Delay Adding delays to the show and hide events are defined with showDelay and hideDelay options respectively. **Example:** ```typescript import { Component } from '@angular/core'; import { ButtonModule } from 'primeng/button'; import { TooltipModule } from 'primeng/tooltip'; @Component({ template: `
`, standalone: true, imports: [ButtonModule, TooltipModule] }) export class TooltipDelayDemo {} ``` ## Event Tooltip gets displayed on hover event of its target by default, other option is the focus event to display and blur to hide. **Example:** ```typescript import { Component } from '@angular/core'; import { InputTextModule } from 'primeng/inputtext'; import { TooltipModule } from 'primeng/tooltip'; @Component({ template: `
`, standalone: true, imports: [InputTextModule, TooltipModule] }) export class TooltipEventDemo {} ``` ## Tooltip Options Tooltip is also configurable by using tooltipOptions property. **Example:** ```typescript import { Component } from '@angular/core'; import { InputTextModule } from 'primeng/inputtext'; import { TooltipModule } from 'primeng/tooltip'; @Component({ template: `
`, standalone: true, imports: [InputTextModule, TooltipModule] }) export class TooltipOptionsDemo { tooltipOptions: any = { showDelay: 150, autoHide: false, tooltipEvent: 'hover', tooltipPosition: 'left' }; } ``` ## Position Position of the tooltip is specified using tooltipPosition attribute. Valid values are top , bottom , right and left . Default position of the tooltip is right . **Example:** ```typescript import { Component } from '@angular/core'; import { InputTextModule } from 'primeng/inputtext'; import { TooltipModule } from 'primeng/tooltip'; @Component({ template: `
`, standalone: true, imports: [InputTextModule, TooltipModule] }) export class TooltipPositionDemo {} ``` ## Tooltip Tooltip directive provides advisory information for a component. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | TooltipPassThroughOptions | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | | tooltipPosition | "right" \| "left" \| "top" \| "bottom" | - | Position of the tooltip. | | tooltipEvent | "hover" \| "focus" \| "both" | - | Event to show the tooltip. | | positionStyle | string | - | Type of CSS position. | | tooltipStyleClass | string | - | Style class of the tooltip. | | tooltipZIndex | string | - | Whether the z-index should be managed automatically to always go on top or have a fixed value. | | escape | boolean | - | By default the tooltip contents are rendered as text. Set to false to support html tags in the content. | | showDelay | number | - | Delay to show the tooltip in milliseconds. | | hideDelay | number | - | Delay to hide the tooltip in milliseconds. | | life | number | - | Time to wait in milliseconds to hide the tooltip even it is active. | | positionTop | number | - | Specifies the additional vertical offset of the tooltip from its default position. | | positionLeft | number | - | Specifies the additional horizontal offset of the tooltip from its default position. | | autoHide | boolean | - | Whether to hide tooltip when hovering over tooltip content. | | fitContent | boolean | - | Automatically adjusts the element position when there is not enough space on the selected position. | | hideOnEscape | boolean | - | Whether to hide tooltip on escape key press. | | showOnEllipsis | boolean | - | Whether to show the tooltip only when the target text overflows (e.g., ellipsis is active). | | content | string \| TemplateRef | - | Content of the tooltip. | | tooltipDisabled | boolean | false | When present, it specifies that the component should be disabled. | | tooltipOptions | TooltipOptions | - | Specifies the tooltip configuration options for the component. | | appendTo | HTMLElement \| ElementRef \| TemplateRef \| "self" \| "body" \| null \| undefined | 'self' | Target element to attach the overlay, valid values are "body" or a local ng-template variable of another element (note: use binding with brackets for template variables, e.g. [appendTo]="mydiv" for a div element having #mydiv as variable name). | | pTooltipPT | PassThrough> | undefined | Used to pass attributes to DOM elements inside the Tooltip component. | | pTooltipUnstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | ## Pass Through Options | Name | Type | Description | |------|------|-------------| | root | PassThroughOption | Used to pass attributes to the root's DOM element. | | arrow | PassThroughOption | Used to pass attributes to the arrow's DOM element. | | text | PassThroughOption | Used to pass attributes to the text's DOM element. | ## Theming ### CSS Classes | Class | Description | |-------|-------------| | p-tooltip | Class name of the root element | | p-tooltip-arrow | Class name of the arrow element | | p-tooltip-text | Class name of the text element | ### Design Tokens | Token | CSS Variable | Description | |-------|--------------|-------------| | tooltip.max.width | --p-tooltip-max-width | Max width of root | | tooltip.gutter | --p-tooltip-gutter | Gutter of root | | tooltip.shadow | --p-tooltip-shadow | Shadow of root | | tooltip.padding | --p-tooltip-padding | Padding of root | | tooltip.border.radius | --p-tooltip-border-radius | Border radius of root | | tooltip.background | --p-tooltip-background | Background of root | | tooltip.color | --p-tooltip-color | Color of root | | tooltip.font.weight | --p-tooltip-font-weight | Font weight of root | | tooltip.font.size | --p-tooltip-font-size | Font size of root | --- # Angular Tree Component Tree is used to display hierarchical data. ## Accessibility Screen Reader Value to describe the component can either be provided with aria-labelledby or aria-label props. The root list element has a tree role whereas each list item has a treeitem role along with aria-label , aria-selected and aria-expanded attributes. In checkbox selection, aria-checked is used instead of aria-selected . The container element of a treenode has the group role. Checkbox and toggle icons are hidden from screen readers as their parent element with treeitem role and attributes are used instead for readers and keyboard support. The aria-setsize , aria-posinset and aria-level attributes are calculated implicitly and added to each treeitem. Keyboard Support Key Function tab Moves focus to the first selected node when focus enters the component, if there is none then first element receives the focus. If focus is already inside the component, moves focus to the next focusable element in the page tab sequence. shift + tab Moves focus to the last selected node when focus enters the component, if there is none then first element receives the focus. If focus is already inside the component, moves focus to the previous focusable element in the page tab sequence. enter Selects the focused treenode. space Selects the focused treenode. down arrow Moves focus to the next treenode. up arrow Moves focus to the previous treenode. right arrow If node is closed, opens the node otherwise moves focus to the first child node. left arrow If node is open, closes the node otherwise moves focus to the parent node. ## Basic Tree component requires an array of TreeNode objects as its value . **Example:** ```typescript import { Component, OnInit, inject, signal } from '@angular/core'; import { TreeModule } from 'primeng/tree'; import { NodeService } from '@/service/nodeservice'; import { TreeNode } from 'primeng/api'; @Component({ template: ` `, standalone: true, imports: [TreeModule], providers: [NodeService] }) export class TreeBasicDemo implements OnInit { private nodeService = inject(NodeService); files = signal(undefined); ngOnInit() { this.nodeService.getFiles().then((data) => { this.files.set(data); }); } } ``` ## Checkbox Selection of multiple nodes via checkboxes is enabled by configuring selectionMode as checkbox . **Example:** ```typescript import { Component, OnInit, inject, signal } from '@angular/core'; import { TreeModule } from 'primeng/tree'; import { NodeService } from '@/service/nodeservice'; import { TreeNode } from 'primeng/api'; @Component({ template: ` `, standalone: true, imports: [TreeModule], providers: [NodeService] }) export class TreeCheckboxDemo implements OnInit { private nodeService = inject(NodeService); files = signal(undefined); selectedFiles!: TreeNode[]; ngOnInit() { this.nodeService.getFiles().then((data) => { this.files.set(data); }); } } ``` ## Context Menu Tree has exclusive integration with ContextMenu using the contextMenu property along with the contextMenuSelection to manage the selection. **Example:** ```typescript import { Component, OnInit, inject, signal } from '@angular/core'; import { ContextMenu, ContextMenuModule } from 'primeng/contextmenu'; import { TreeModule } from 'primeng/tree'; import { NodeService } from '@/service/nodeservice'; import { TreeNode, MenuItem, MessageService } from 'primeng/api'; import { ContextMenu } from 'primeng/contextmenu'; @Component({ template: ` `, standalone: true, imports: [ContextMenuModule, TreeModule], providers: [NodeService, MessageService] }) export class TreeContextMenuDemo implements OnInit { private nodeService = inject(NodeService); private messageService = inject(MessageService); files = signal([]); selectedNode: any = model(null); contextMenuNode: any = model(null); items!: MenuItem[]; ngOnInit() { this.nodeService.getFiles().then((files) => this.files.set(files)); this.items = [ { label: 'View', icon: 'pi pi-search', command: () => this.viewFile(this.contextMenuNode()) }, { label: 'Toggle', icon: 'pi pi-sort', command: () => this.toggleFile(this.contextMenuNode()) } ]; } viewFile(node: TreeNode | null) { if (node) { this.messageService.add({ severity: 'info', summary: 'File Selected', detail: node.label }); } } toggleFile(node: TreeNode | null) { if (node) { this.files.set(this.updateNodeInTree(this.files(), node.key, { ...node, expanded: !node.expanded })); } } updateNodeInTree(nodes: TreeNode[], key: string | undefined, updatedNode: TreeNode): TreeNode[] { return nodes.map((n) => { if (n.key === key) { return updatedNode; } if (n.children) { return { ...n, children: this.updateNodeInTree(n.children, key, updatedNode) }; } return n; }); } } ``` ## Controlled Tree requires a collection of TreeNode instances as a value . **Example:** ```typescript import { Component, OnInit, inject, signal } from '@angular/core'; import { ButtonModule } from 'primeng/button'; import { TreeModule } from 'primeng/tree'; import { NodeService } from '@/service/nodeservice'; import { TreeNode } from 'primeng/api'; @Component({ template: `
`, standalone: true, imports: [ButtonModule, TreeModule], providers: [NodeService] }) export class TreeControlledDemo implements OnInit { private nodeService = inject(NodeService); files = signal(undefined); ngOnInit() { this.nodeService.getFiles().then((data) => { this.files.set(data); }); } expandAll() { const updatedFiles = this.files().map((node) => this.expandRecursive(node, true)); this.files.set(updatedFiles); } collapseAll() { const updatedFiles = this.files().map((node) => this.expandRecursive(node, false)); this.files.set(updatedFiles); } } ``` ## Events An event is provided for each type of user interaction such as expand, collapse and selection. **Example:** ```typescript import { Component, OnInit, inject, signal } from '@angular/core'; import { TreeModule } from 'primeng/tree'; import { NodeService } from '@/service/nodeservice'; import { TreeNode, MessageService } from 'primeng/api'; @Component({ template: ` `, standalone: true, imports: [TreeModule], providers: [NodeService, MessageService] }) export class TreeEventDemo implements OnInit { private nodeService = inject(NodeService); private messageService = inject(MessageService); files = signal(undefined); selectedFile!: TreeNode; ngOnInit() { this.nodeService.getFiles().then((data) => { this.files.set(data); }); } nodeExpand(event: any) { this.messageService.add({ severity: 'success', summary: 'Node Expanded', detail: event.node.label }); } nodeCollapse(event: any) { this.messageService.add({ severity: 'warn', summary: 'Node Collapsed', detail: event.node.label }); } nodeSelect(event: any) { this.messageService.add({ severity: 'info', summary: 'Node Selected', detail: event.node.label }); } nodeUnselect(event: any) { this.messageService.add({ severity: 'info', summary: 'Node Unselected', detail: event.node.label }); } } ``` ## Filter Filtering is enabled by adding the filter property, by default label property of a node is used to compare against the value in the text field, in order to customize which field(s) should be used during search define filterBy property. In addition filterMode specifies the filtering strategy. In lenient mode when the query matches a node, children of the node are not searched further as all descendants of the node are included. On the other hand, in strict mode when the query matches a node, filtering continues on all descendants. **Example:** ```typescript import { Component, OnInit, inject, signal } from '@angular/core'; import { TreeModule } from 'primeng/tree'; import { NodeService } from '@/service/nodeservice'; import { TreeNode } from 'primeng/api'; @Component({ template: `
`, standalone: true, imports: [TreeModule], providers: [NodeService] }) export class TreeFilterDemo implements OnInit { private nodeService = inject(NodeService); files = signal(undefined); files2 = signal(undefined); ngOnInit() { this.nodeService.getFiles().then((data) => { this.files.set(data); this.files2.set(data); }); } } ``` ## Lazy Lazy loading is useful when dealing with huge datasets, in this example nodes are dynamically loaded on demand using loading property and onNodeExpand method. **Example:** ```typescript import { Component, OnInit, signal } from '@angular/core'; import { TreeModule } from 'primeng/tree'; import { TreeNode } from 'primeng/api'; @Component({ template: ` `, standalone: true, imports: [TreeModule] }) export class TreeLazyDemo implements OnInit { nodes = signal(undefined); ngOnInit() { this.nodes.set(this.initiateNodes()); setTimeout(() => { this.nodes.set(this.nodes().map((node) => ({ ...node, loading: false }))); }, 2000); } initiateNodes(): TreeNode[] { return [ { key: '0', label: 'Node 0', leaf: false, loading: true }, { key: '1', label: 'Node 1', leaf: false, loading: true }, { key: '2', label: 'Node 2', leaf: false, loading: true } ]; } onNodeExpand(event: any) { if (!event.node.children) { event.node.loading = true; setTimeout(() => { const _nodes = this.nodes(); let _node = { ...event.node }; _node.children = []; for (let i = 0; i < 3; i++) { _node.children.push({ key: event.node.key + '-' + i, label: 'Lazy ' + event.node.label + '-' + i }); } const key = parseInt(_node.key, 10); _nodes[key] = { ..._node, loading: false }; this.nodes.set([..._nodes]); }, 500); } } } ``` ## Multiple More than one node is selectable by setting selectionMode to multiple . By default in multiple selection mode, metaKey press (e.g. ⌘ ) is necessary to add to existing selections however this can be configured with disabling the metaKeySelection property. Note that in touch enabled devices, Tree always ignores metaKey. In multiple selection mode, value binding should be a key-value pair where key is the node key and value is a boolean to indicate selection. **Example:** ```typescript import { Component, OnInit, inject, signal } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { ToggleSwitchModule } from 'primeng/toggleswitch'; import { Tree, TreeModule } from 'primeng/tree'; import { NodeService } from '@/service/nodeservice'; import { TreeNode } from 'primeng/api'; @Component({ template: `
`, standalone: true, imports: [ToggleSwitchModule, TreeModule, FormsModule], providers: [NodeService] }) export class TreeMultipleDemo implements OnInit { private nodeService = inject(NodeService); metaKeySelection: boolean = false; files = signal(undefined); selectedFiles!: TreeNode[]; ngOnInit() { this.nodeService.getFiles().then((data) => { this.files.set(data); }); } } ``` ## Single Single node selection is configured by setting selectionMode as single along with selection properties to manage the selection value binding. **Example:** ```typescript import { Component, OnInit, inject, signal } from '@angular/core'; import { TreeModule } from 'primeng/tree'; import { NodeService } from '@/service/nodeservice'; import { TreeNode } from 'primeng/api'; @Component({ template: ` `, standalone: true, imports: [TreeModule], providers: [NodeService] }) export class TreeSingleDemo implements OnInit { private nodeService = inject(NodeService); files = signal(undefined); selectedFile!: TreeNode; ngOnInit() { this.nodeService.getFiles().then((data) => { this.files.set(data); }); } } ``` ## Template Custom node content instead of a node label is defined with the #node template reference. **Example:** ```typescript import { Component, OnInit, signal } from '@angular/core'; import { TreeModule } from 'primeng/tree'; import { TreeNode } from 'primeng/api'; @Component({ template: ` @if (node.type === 'url') { {{ node.label }} } @else { {{ node.label }} } `, standalone: true, imports: [TreeModule] }) export class TreeTemplateDemo implements OnInit { nodes = signal(undefined); ngOnInit() { this.nodes.set([ { key: '0', label: 'Introduction', children: [ { key: '0-0', label: 'What is Angular', data: 'https://angular.io', type: 'url' }, { key: '0-1', label: 'Getting Started', data: 'https://angular.io/guide/setup-local', type: 'url' }, { key: '0-2', label: 'Learn and Explore', data: 'https://angular.io/guide/architecture', type: 'url' }, { key: '0-3', label: 'Take a Look', data: 'https://angular.io/start', type: 'url' } ] }, { key: '1', label: 'Components In-Depth', children: [ { key: '1-0', label: 'Component Registration', data: 'https://angular.io/guide/component-interaction', type: 'url' }, { key: '1-1', label: 'User Input', data: 'https://angular.io/guide/user-input', type: 'url' }, { key: '1-2', label: 'Hooks', data: 'https://angular.io/guide/lifecycle-hooks', type: 'url' }, { key: '1-3', label: 'Attribute Directives', data: 'https://angular.io/guide/attribute-directives', type: 'url' } ] } ]); } } ``` ## Virtual Scroll VirtualScroller is a performance-approach to handle huge data efficiently. Setting virtualScroll property as true and providing a virtualScrollItemSize in pixels would be enough to enable this functionality. **Example:** ```typescript import { Component, OnInit, inject, signal } from '@angular/core'; import { TreeModule } from 'primeng/tree'; import { NodeService } from '@/service/nodeservice'; import { TreeNode } from 'primeng/api'; @Component({ template: ` `, standalone: true, imports: [TreeModule], providers: [NodeService] }) export class TreeVirtualScrollDemo implements OnInit { private nodeService = inject(NodeService); nodes = signal(undefined); ngOnInit() { this.nodes.set(this.nodeService.generateNodes(150)); } } ``` ## virtualscrolllazy-doc VirtualScroller is a performance-approach to handle huge data efficiently. Setting virtualScroll property as true and providing a virtualScrollItemSize in pixels would be enough to enable this functionality. **Example:** ```typescript import { Component, OnInit, inject, signal } from '@angular/core'; import { TreeModule } from 'primeng/tree'; import { NodeService } from '@/service/nodeservice'; import { TreeNode } from 'primeng/api'; @Component({ template: ` `, standalone: true, imports: [TreeModule], providers: [NodeService] }) export class TreeVirtualScrollLazyDemo implements OnInit { private nodeService = inject(NodeService); loading = signal(false); nodes = signal(undefined); ngOnInit() { this.loading.set(true); setTimeout(() => { this.nodes.set(this.nodeService.generateNodes(150)); this.loading.set(false); }, 1000); } nodeExpand(event: any) { if (event.node) { this.loading.set(true); setTimeout(() => { event.node.children = this.nodeService.createNodes(5, event.node.key); this.loading.set(false); this.nodes.set([...this.nodes()]); }, 200); } } } ``` ## Tree Tree is used to display hierarchical data. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | | value | any | - | An array of treenodes. | | selectionMode | "single" \| "multiple" \| "checkbox" \| null \| undefined | - | Defines the selection mode. | | loadingMode | "mask" \| "icon" | - | Loading mode display. | | selection | TreeNode \| TreeNode[] | - | A single treenode instance or an array to refer to the selections. | | contextMenu | any | - | Context menu instance. | | contextMenuSelection | TreeNode | - | Selected node with a context menu. | | draggableScope | any | - | Scope of the draggable nodes to match a droppableScope. | | droppableScope | any | - | Scope of the droppable nodes to match a draggableScope. | | draggableNodes | boolean | - | Whether the nodes are draggable. | | droppableNodes | boolean | - | Whether the nodes are droppable. | | metaKeySelection | boolean | - | Defines how multiple items can be selected, when true metaKey needs to be pressed to select or unselect an item and when set to false selection of each item can be toggled individually. On touch enabled devices, metaKeySelection is turned off automatically. | | propagateSelectionUp | boolean | - | Whether checkbox selections propagate to ancestor nodes. | | propagateSelectionDown | boolean | - | Whether checkbox selections propagate to descendant nodes. | | loading | boolean | - | Displays a loader to indicate data load is in progress. | | loadingIcon | string | - | The icon to show while indicating data load is in progress. | | emptyMessage | string | - | Text to display when there is no data. | | ariaLabel | string | - | Used to define a string that labels the tree. | | togglerAriaLabel | string | - | Defines a string that labels the toggler icon for accessibility. | | ariaLabelledBy | string | - | Establishes relationships between the component and label(s) where its value should be one or more element IDs. | | validateDrop | boolean | - | When enabled, drop can be accepted or rejected based on condition defined at onNodeDrop. | | filter | boolean | - | When specified, displays an input field to filter the items. | | filterInputAutoFocus | boolean | - | Determines whether the filter input should be automatically focused when the component is rendered. | | filterBy | string | - | When filtering is enabled, filterBy decides which field or fields (comma separated) to search against. | | filterMode | string | - | Mode for filtering valid values are "lenient" and "strict". Default is lenient. | | filterOptions | any | - | Mode for filtering valid values are "lenient" and "strict". Default is lenient. | | filterPlaceholder | string | - | Placeholder text to show when filter input is empty. | | filteredNodes | TreeNode[] | - | Values after the tree nodes are filtered. | | filterLocale | string | - | Locale to use in filtering. The default locale is the host environment's current locale. | | scrollHeight | string | - | Height of the scrollable viewport. | | lazy | boolean | - | Defines if data is loaded and interacted with in lazy manner. | | virtualScroll | boolean | - | Whether the data should be loaded on demand during scroll. | | virtualScrollItemSize | number | - | Height of an item in the list for VirtualScrolling. | | virtualScrollOptions | ScrollerOptions | - | Whether to use the scroller feature. The properties of scroller component can be used like an object in it. | | indentation | number | - | Indentation factor for spacing of the nested node when virtual scrolling is enabled. | | trackBy | Function | - | Function to optimize the node list rendering, default algorithm checks for object identity. | | highlightOnSelect | boolean | - | Highlights the node on select. | ### Emits | Name | Parameters | Description | |------|------------|-------------| | onNodeSelect | event: TreeNodeSelectEvent | Callback to invoke when a node is selected. | | onNodeUnselect | event: TreeNodeUnSelectEvent | Callback to invoke when a node is unselected. | | onNodeExpand | event: TreeNodeExpandEvent | Callback to invoke when a node is expanded. | | onNodeCollapse | event: TreeNodeCollapseEvent | Callback to invoke when a node is collapsed. | | onNodeContextMenuSelect | event: TreeNodeContextMenuSelectEvent | Callback to invoke when a node is selected with right click. | | onNodeDoubleClick | event: TreeNodeDoubleClickEvent | Callback to invoke when a node is double clicked. | | onNodeDrop | event: TreeNodeDropEvent | Callback to invoke when a node is dropped. | | onLazyLoad | event: TreeLazyLoadEvent | Callback to invoke in lazy mode to load new data. | | onScroll | event: TreeScrollEvent | Callback to invoke in virtual scroll mode when scroll position changes. | | onScrollIndexChange | event: TreeScrollIndexChangeEvent | Callback to invoke in virtual scroll mode when scroll position and item's range in view changes. | | onFilter | event: TreeFilterEvent | Callback to invoke when data is filtered. | ### Templates | Name | Type | Description | |------|------|-------------| | filter | TemplateRef | Custom filter template. | | node | TemplateRef | Custom node template. | | header | TemplateRef | Custom header template. | | footer | TemplateRef | Custom footer template. | | loader | TemplateRef | Custom loader template. | | empty | TemplateRef | Custom empty message template. | | togglericon | TemplateRef | Custom toggler icon template. | | checkboxicon | TemplateRef | Custom checkbox icon template. | | loadingicon | TemplateRef | Custom loading icon template. | | filtericon | TemplateRef | Custom filter icon template. | ### Methods | Name | Parameters | Return Type | Description | |------|------------|-------------|-------------| | resetFilter | | void | Resets filter. | | scrollToVirtualIndex | index: number | void | Scrolls to virtual index. | | scrollTo | options: any | void | Scrolls to virtual index. | ## Pass Through Options | Name | Type | Description | |------|------|-------------| | host | PassThroughOption | Used to pass attributes to the host's DOM element. | | root | PassThroughOption | Used to pass attributes to the root's DOM element. | | mask | PassThroughOption | Used to pass attributes to the loading mask's DOM element. | | loadingIcon | PassThroughOption | Used to pass attributes to the loading icon's DOM element. | | pcFilterContainer | IconFieldPassThrough | Used to pass attributes to the filter container's DOM element. | | pcFilterIconContainer | InputIconPassThrough | Used to pass attributes to the filter icon container's DOM element. | | pcFilterInput | InputTextPassThrough | Used to pass attributes to the filter input's DOM element. | | filterIcon | PassThroughOption | Used to pass attributes to the filter icon's DOM element. | | pcScroller | VirtualScrollerPassThrough | Used to pass attributes to the Scroller component. | | wrapper | PassThroughOption | Used to pass attributes to the wrapper's DOM element. | | rootChildren | PassThroughOption | Used to pass attributes to the root children's DOM element. | | node | PassThroughOption | Used to pass attributes to the node's DOM element. | | dropPoint | PassThroughOption | Used to pass attributes to the drop point's DOM element. | | nodeContent | PassThroughOption | Used to pass attributes to the node content's DOM element. | | nodeToggleButton | PassThroughOption | Used to pass attributes to the node toggle button's DOM element. | | nodeTogglerIcon | PassThroughOption | Used to pass attributes to the node toggle icon's DOM element. | | pcNodeCheckbox | CheckboxPassThrough | Used to pass attributes to the node checkbox's DOM element. | | nodeIcon | PassThroughOption | Used to pass attributes to the node icon's DOM element. | | nodeLabel | PassThroughOption | Used to pass attributes to the node label's DOM element. | | nodeChildren | PassThroughOption | Used to pass attributes to the node children's DOM element. | | emptyMessage | PassThroughOption | Used to pass attributes to the empty message's DOM element. | ## Theming ### CSS Classes | Class | Description | |-------|-------------| | p-tree | Class name of the root element | | p-tree-mask | Class name of the mask element | | p-tree-loading-icon | Class name of the loading icon element | | p-tree-filter-input | Class name of the filter input element | | p-tree-root | Class name of the wrapper element | | p-tree-root-children | Class name of the root children element | | p-tree-node | Class name of the node element | | p-tree-node-content | Class name of the node content element | | p-tree-node-toggle-button | Class name of the node toggle button element | | p-tree-node-toggle-icon | Class name of the node toggle icon element | | p-tree-node-checkbox | Class name of the node checkbox element | | p-tree-node-icon | Class name of the node icon element | | p-tree-node-label | Class name of the node label element | | p-tree-node-children | Class name of the node children element | | p-tree-empty-message | Class name of the empty message element | | p-tree-node-droppoint | Class name of the drop point element | ### Design Tokens | Token | CSS Variable | Description | |-------|--------------|-------------| | tree.background | --p-tree-background | Background of root | | tree.color | --p-tree-color | Color of root | | tree.padding | --p-tree-padding | Padding of root | | tree.gap | --p-tree-gap | Gap of root | | tree.indent | --p-tree-indent | Indent of root | | tree.transition.duration | --p-tree-transition-duration | Transition duration of root | | tree.node.padding | --p-tree-node-padding | Padding of node | | tree.node.border.radius | --p-tree-node-border-radius | Border radius of node | | tree.node.hover.background | --p-tree-node-hover-background | Hover background of node | | tree.node.selected.background | --p-tree-node-selected-background | Selected background of node | | tree.node.color | --p-tree-node-color | Color of node | | tree.node.hover.color | --p-tree-node-hover-color | Hover color of node | | tree.node.selected.color | --p-tree-node-selected-color | Selected color of node | | tree.node.focus.ring.width | --p-tree-node-focus-ring-width | Focus ring width of node | | tree.node.focus.ring.style | --p-tree-node-focus-ring-style | Focus ring style of node | | tree.node.focus.ring.color | --p-tree-node-focus-ring-color | Focus ring color of node | | tree.node.focus.ring.offset | --p-tree-node-focus-ring-offset | Focus ring offset of node | | tree.node.focus.ring.shadow | --p-tree-node-focus-ring-shadow | Focus ring shadow of node | | tree.node.gap | --p-tree-node-gap | Gap of node | | tree.node.icon.color | --p-tree-node-icon-color | Color of node icon | | tree.node.icon.hover.color | --p-tree-node-icon-hover-color | Hover color of node icon | | tree.node.icon.selected.color | --p-tree-node-icon-selected-color | Selected color of node icon | | tree.node.label.font.weight | --p-tree-node-label-font-weight | Font weight of node label | | tree.node.label.font.size | --p-tree-node-label-font-size | Font size of node label | | tree.node.label.selected.font.weight | --p-tree-node-label-selected-font-weight | Font weight of a selected node label | | tree.node.toggle.button.border.radius | --p-tree-node-toggle-button-border-radius | Border radius of node toggle button | | tree.node.toggle.button.size | --p-tree-node-toggle-button-size | Size of node toggle button | | tree.node.toggle.button.hover.background | --p-tree-node-toggle-button-hover-background | Hover background of node toggle button | | tree.node.toggle.button.selected.hover.background | --p-tree-node-toggle-button-selected-hover-background | Selected hover background of node toggle button | | tree.node.toggle.button.color | --p-tree-node-toggle-button-color | Color of node toggle button | | tree.node.toggle.button.hover.color | --p-tree-node-toggle-button-hover-color | Hover color of node toggle button | | tree.node.toggle.button.selected.hover.color | --p-tree-node-toggle-button-selected-hover-color | Selected hover color of node toggle button | | tree.node.toggle.button.focus.ring.width | --p-tree-node-toggle-button-focus-ring-width | Focus ring width of node toggle button | | tree.node.toggle.button.focus.ring.style | --p-tree-node-toggle-button-focus-ring-style | Focus ring style of node toggle button | | tree.node.toggle.button.focus.ring.color | --p-tree-node-toggle-button-focus-ring-color | Focus ring color of node toggle button | | tree.node.toggle.button.focus.ring.offset | --p-tree-node-toggle-button-focus-ring-offset | Focus ring offset of node toggle button | | tree.node.toggle.button.focus.ring.shadow | --p-tree-node-toggle-button-focus-ring-shadow | Focus ring shadow of node toggle button | | tree.loading.icon.size | --p-tree-loading-icon-size | Size of loading icon | | tree.filter.margin | --p-tree-filter-margin | Margin of filter | --- # Angular TreeSelect Component TreeSelect is a form component to choose from hierarchical data. ## Accessibility Screen Reader Value to describe the component can either be provided with ariaLabelledby or ariaLabel props. The treeselect element has a combobox role in addition to aria-haspopup and aria-expanded attributes. The relation between the combobox and the popup is created with aria-controls that refers to the id of the popup. The popup list has an id that refers to the aria-controls attribute of the combobox element and uses tree as the role. Each list item has a treeitem role along with aria-label , aria-selected and aria-expanded attributes. In checkbox selection, aria-checked is used instead of aria-selected . Checkbox and toggle icons are hidden from screen readers as their parent element with treeitem role and attributes are used instead for readers and keyboard support. The container element of a treenode has the group role. The aria-setsize , aria-posinset and aria-level attributes are calculated implicitly and added to each treeitem. If filtering is enabled, filterInputProps can be defined to give aria-* props to the filter input element. ## Basic TreeSelect is used as a controlled component with ng-model directive along with an options collection. Internally Tree component is used so the options model is based on TreeNode API. In single selection mode, value binding should be the key value of a node. **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { TreeSelectModule } from 'primeng/treeselect'; import { NodeService } from '@/service/nodeservice'; import { TreeNode } from 'primeng/api'; @Component({ template: `
`, standalone: true, imports: [TreeSelectModule, FormsModule], providers: [NodeService] }) export class TreeSelectBasicDemo implements OnInit { private nodeService = inject(NodeService); nodes!: any[]; selectedNodes: any; constructor() { this.nodeService.getFiles().then((files) => (this.nodes = files)); } ngOnInit() { } } ``` ## Checkbox Selection of multiple nodes via checkboxes is enabled by configuring selectionMode as checkbox . **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { TreeSelectModule } from 'primeng/treeselect'; import { NodeService } from '@/service/nodeservice'; @Component({ template: `
`, standalone: true, imports: [TreeSelectModule, FormsModule], providers: [NodeService] }) export class TreeSelectCheckboxDemo implements OnInit { private nodeService = inject(NodeService); nodes!: any[]; selectedNodes: any; constructor() { this.nodeService.getFiles().then((files) => (this.nodes = files)); } ngOnInit() { } } ``` ## Clear Icon When showClear is enabled, a clear icon is displayed to clear the value. **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { TreeSelectModule } from 'primeng/treeselect'; import { NodeService } from '@/service/nodeservice'; @Component({ template: `
`, standalone: true, imports: [TreeSelectModule, FormsModule], providers: [NodeService] }) export class TreeSelectClearIconDemo implements OnInit { private nodeService = inject(NodeService); nodes!: any[]; selectedNodes: any; constructor() { this.nodeService.getFiles().then((files) => (this.nodes = files)); } ngOnInit() { } } ``` ## Disabled When disabled is present, the element cannot be edited and focused. **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { TreeSelectModule } from 'primeng/treeselect'; import { NodeService } from '@/service/nodeservice'; @Component({ template: `
`, standalone: true, imports: [TreeSelectModule, FormsModule], providers: [NodeService] }) export class TreeSelectDisabledDemo implements OnInit { private nodeService = inject(NodeService); nodes!: any[]; selectedNodes: any; constructor() { this.nodeService.getFiles().then((files) => (this.nodes = files)); } ngOnInit() { } } ``` ## Filled Specify the variant property as filled to display the component with a higher visual emphasis than the default outlined style. **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { TreeSelectModule } from 'primeng/treeselect'; import { NodeService } from '@/service/nodeservice'; @Component({ template: `
`, standalone: true, imports: [TreeSelectModule, FormsModule], providers: [NodeService] }) export class TreeSelectFilledDemo implements OnInit { private nodeService = inject(NodeService); nodes!: any[]; selectedNodes: any; constructor() { this.nodeService.getFiles().then((files) => (this.nodes = files)); } ngOnInit() { } } ``` ## Filter Filtering is enabled by adding the filter property, by default label property of a node is used to compare against the value in the text field, in order to customize which field(s) should be used during search define filterBy property. In addition filterMode specifies the filtering strategy. In lenient mode when the query matches a node, children of the node are not searched further as all descendants of the node are included. On the other hand, in strict mode when the query matches a node, filtering continues on all descendants. **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { TreeSelectModule } from 'primeng/treeselect'; import { NodeService } from '@/service/nodeservice'; @Component({ template: `
`, standalone: true, imports: [TreeSelectModule, FormsModule], providers: [NodeService] }) export class TreeSelectFilterDemo implements OnInit { private nodeService = inject(NodeService); nodes!: any[]; selectedNodes: any; constructor() { this.nodeService.getFiles().then((files) => (this.nodes = files)); } ngOnInit() { } } ``` ## Float Label A floating label appears on top of the input field when focused. Visit FloatLabel documentation for more information. **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { FloatLabelModule } from 'primeng/floatlabel'; import { TreeSelectModule } from 'primeng/treeselect'; import { NodeService } from '@/service/nodeservice'; @Component({ template: `
`, standalone: true, imports: [FloatLabelModule, TreeSelectModule, FormsModule], providers: [NodeService] }) export class TreeSelectFloatLabelDemo implements OnInit { private nodeService = inject(NodeService); nodes!: any[]; value1: any; value2: any; value3: any; constructor() { this.nodeService.getFiles().then((files) => (this.nodes = files)); } ngOnInit() { } } ``` ## Fluid The fluid prop makes the component take up the full width of its container when set to true. **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { TreeSelectModule } from 'primeng/treeselect'; import { NodeService } from '@/service/nodeservice'; @Component({ template: ` `, standalone: true, imports: [TreeSelectModule, FormsModule], providers: [NodeService] }) export class TreeSelectFluidDemo implements OnInit { private nodeService = inject(NodeService); nodes!: any[]; selectedNodes: any; constructor() { this.nodeService.getFiles().then((files) => (this.nodes = files)); } ngOnInit() { } } ``` ## Ifta Label IftaLabel is used to create infield top aligned labels. Visit IftaLabel documentation for more information. **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { IftaLabelModule } from 'primeng/iftalabel'; import { TreeSelectModule } from 'primeng/treeselect'; import { NodeService } from '@/service/nodeservice'; @Component({ template: `
`, standalone: true, imports: [IftaLabelModule, TreeSelectModule, FormsModule], providers: [NodeService] }) export class TreeSelectIftaLabelDemo implements OnInit { private nodeService = inject(NodeService); nodes!: any[]; selectedValue: any; constructor() { this.nodeService.getFiles().then((files) => (this.nodes = files)); } ngOnInit() { } } ``` ## Invalid The invalid state is applied using the ⁠invalid property to indicate failed validation, which can be integrated with Angular Forms. **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { TreeSelectModule } from 'primeng/treeselect'; import { NodeService } from '@/service/nodeservice'; @Component({ template: `
`, standalone: true, imports: [TreeSelectModule, FormsModule], providers: [NodeService] }) export class TreeSelectInvalidDemo implements OnInit { private nodeService = inject(NodeService); nodes!: any[]; selectedValue1: any; selectedValue2: any; constructor() { this.nodeService.getFiles().then((files) => (this.nodes = files)); } ngOnInit() { } } ``` ## Lazy Lazy loading is useful when dealing with huge datasets, in this example nodes are dynamically loaded on demand using loading property and onNodeExpand method. **Example:** ```typescript import { Component, OnInit, signal } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { TreeSelectModule } from 'primeng/treeselect'; import { TreeNode } from 'primeng/api'; @Component({ template: `
`, standalone: true, imports: [TreeSelectModule, FormsModule] }) export class TreeSelectLazyDemo implements OnInit { selectedNodes: TreeNode[] = []; nodes = signal(undefined); loading = signal(false); ngOnInit() { this.loading.set(true); this.nodes.set(this.initiateNodes()); } initiateNodes(): TreeNode[] { return [ { key: '0', label: 'Node 0', leaf: false, loading: false }, { key: '1', label: 'Node 1', leaf: false, loading: false }, { key: '2', label: 'Node 2', leaf: false, loading: false } ]; } onNodeExpand(event: any) { if (!event.node.children) { event.node.loading = true; setTimeout(() => { const _nodes = this.nodes(); let _node = { ...event.node }; _node.children = []; for (let i = 0; i < 3; i++) { _node.children.push({ key: event.node.key + '-' + i, label: 'Lazy ' + event.node.label + '-' + i }); } const key = parseInt(_node.key, 10); _nodes[key] = { ..._node, loading: false }; this.nodes.set([..._nodes]); }, 500); } } } ``` ## Multiple More than one node is selectable by setting selectionMode to multiple . By default in multiple selection mode, metaKey press (e.g. ⌘ ) is necessary to add to existing selections however this can be configured with disabling the metaKeySelection property. Note that in touch enabled devices, TreeSelect always ignores metaKey. In multiple selection mode, value binding should be a key-value pair where key is the node key and value is a boolean to indicate selection. **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { TreeSelectModule } from 'primeng/treeselect'; import { NodeService } from '@/service/nodeservice'; @Component({ template: `
`, standalone: true, imports: [TreeSelectModule, FormsModule], providers: [NodeService] }) export class TreeSelectMultipleDemo implements OnInit { private nodeService = inject(NodeService); nodes!: any[]; selectedNodes: any; constructor() { this.nodeService.getFiles().then((files) => (this.nodes = files)); } ngOnInit() { } } ``` ## reactiveforms-doc TreeSelect can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control. **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { ReactiveFormsModule } from '@angular/forms'; import { MessageModule } from 'primeng/message'; import { TreeSelectModule } from 'primeng/treeselect'; import { ButtonModule } from 'primeng/button'; import { NodeService } from '@/service/nodeservice'; import { MessageService } from 'primeng/api'; @Component({ template: `
@if (isInvalid('selectedNodes')) { Selection is required. }
`, standalone: true, imports: [MessageModule, TreeSelectModule, ButtonModule, ReactiveFormsModule], providers: [NodeService] }) export class TreeSelectReactiveFormsDemo implements OnInit { private nodeService = inject(NodeService); messageService = inject(MessageService); nodes!: any[]; exampleForm: FormGroup | undefined; formSubmitted: boolean = false; constructor() { this.nodeService.getFiles().then((files) => (this.nodes = files)); this.exampleForm = this.fb.group({ selectedNodes: ['', Validators.required] }); } ngOnInit() { } onSubmit() { this.formSubmitted = true; if (this.exampleForm.valid) { this.messageService.add({ severity: 'success', summary: 'Success', detail: 'Form is submitted', life: 3000 }); this.exampleForm.reset(); this.formSubmitted = false; } } isInvalid(controlName: string) { const control = this.exampleForm.get(controlName); return control?.invalid && this.formSubmitted; } } ``` ## Sizes TreeSelect provides small and large sizes as alternatives to the base. **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { TreeSelectModule } from 'primeng/treeselect'; import { NodeService } from '@/service/nodeservice'; @Component({ template: `
`, standalone: true, imports: [TreeSelectModule, FormsModule], providers: [NodeService] }) export class TreeSelectSizesDemo implements OnInit { private nodeService = inject(NodeService); nodes!: any[]; value1: any; value2: any; value3: any; constructor() { this.nodeService.getFiles().then((files) => (this.nodes = files)); } ngOnInit() { } } ``` ## Template TreeSelect offers multiple templates for customization through templating. **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { ButtonModule } from 'primeng/button'; import { TreeSelectModule } from 'primeng/treeselect'; import { NodeService } from '@/service/nodeservice'; @Component({ template: `
Available Files
`, standalone: true, imports: [ButtonModule, TreeSelectModule, FormsModule], providers: [NodeService] }) export class TreeSelectTemplateDemo implements OnInit { private nodeService = inject(NodeService); nodes!: any[]; selectedNodes: any; constructor() { this.nodeService.getFiles().then((files) => (this.nodes = files)); } ngOnInit() { } } ``` ## templatedrivenforms-doc **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { MessageModule } from 'primeng/message'; import { TreeSelectModule } from 'primeng/treeselect'; import { ButtonModule } from 'primeng/button'; import { NodeService } from '@/service/nodeservice'; import { MessageService } from 'primeng/api'; @Component({ template: `
@if (node.invalid && exampleForm.submitted) { Selection is required. }
`, standalone: true, imports: [MessageModule, TreeSelectModule, ButtonModule, FormsModule], providers: [NodeService] }) export class TreeSelectTemplateDrivenFormsDemo implements OnInit { private nodeService = inject(NodeService); messageService = inject(MessageService); selectedNodes: any; nodes!: any[]; constructor() { this.nodeService.getFiles().then((files) => (this.nodes = files)); } ngOnInit() { } onSubmit(form: any) { if (form.valid) { this.messageService.add({ severity: 'success', summary: 'Success', detail: 'Form Submitted', life: 3000 }); form.resetForm(); } } } ``` ## virtualscroll-doc VirtualScrolling is an efficient way of rendering the options by displaying a small subset of data in the viewport at any time. When dealing with huge number of options, it is suggested to enable VirtualScrolling to avoid performance issues. Usage is simple as setting virtualScroll property to true and defining virtualScrollItemSize to specify the height of an item. **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { TreeSelectModule } from 'primeng/treeselect'; import { NodeService } from '@/service/nodeservice'; @Component({ template: `
`, standalone: true, imports: [TreeSelectModule, FormsModule], providers: [NodeService] }) export class TreeSelectVirtualScrollDemo implements OnInit { private nodeService = inject(NodeService); nodes!: any[]; selectedNodes: any; constructor() { this.nodeService.getLargeTreeNodes().then((files) => (this.nodes = files)); } ngOnInit() { } } ``` ## Tree Select TreeSelect is a form component to choose from hierarchical data. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | | required | boolean | false | There must be a value (if set). | | invalid | boolean | false | When present, it specifies that the component should have invalid state style. | | disabled | boolean | false | When present, it specifies that the component should have disabled state style. | | name | string | undefined | When present, it specifies that the name of the input. | | inputId | string | - | Identifier of the underlying input element. | | scrollHeight | string | - | Height of the viewport, a scrollbar is defined if height of list exceeds this value. | | metaKeySelection | boolean | - | Defines how multiple items can be selected, when true metaKey needs to be pressed to select or unselect an item and when set to false selection of each item can be toggled individually. On touch enabled devices, metaKeySelection is turned off automatically. | | display | "comma" \| "chip" | - | Defines how the selected items are displayed. | | selectionMode | "single" \| "multiple" \| "checkbox" | - | Defines the selection mode. | | tabindex | string | - | Index of the element in tabbing order. | | ariaLabel | string | - | Defines a string that labels the input for accessibility. | | ariaLabelledBy | string | - | Establishes relationships between the component and label(s) where its value should be one or more element IDs. | | placeholder | string | - | Label to display when there are no selections. | | panelClass | string \| string[] \| Set \| { [klass: string]: any } | - | Style class of the overlay panel. | | panelStyle | Partial | - | Inline style of the panel element. | | panelStyleClass | string | - | Style class of the panel element. | | labelStyle | Partial | - | Inline style of the label element. | | labelStyleClass | string | - | Style class of the label element. | | overlayOptions | OverlayOptions | - | Specifies the options for the overlay. | | emptyMessage | string | - | Text to display when there are no options available. Defaults to value from PrimeNG locale configuration. | | filter | boolean | - | When specified, displays an input field to filter the items. | | filterBy | string | - | When filtering is enabled, filterBy decides which field or fields (comma separated) to search against. | | filterMode | string | - | Mode for filtering valid values are "lenient" and "strict". Default is lenient. | | filterPlaceholder | string | - | Placeholder text to show when filter input is empty. | | filterLocale | string | - | Locale to use in filtering. The default locale is the host environment's current locale. | | filterInputAutoFocus | boolean | - | Determines whether the filter input should be automatically focused when the component is rendered. | | propagateSelectionDown | boolean | - | Whether checkbox selections propagate to descendant nodes. | | propagateSelectionUp | boolean | - | Whether checkbox selections propagate to ancestor nodes. | | showClear | boolean | - | When enabled, a clear icon is displayed to clear the value. | | resetFilterOnHide | boolean | - | Clears the filter value when hiding the dropdown. | | virtualScroll | boolean | - | Whether the data should be loaded on demand during scroll. | | virtualScrollItemSize | number | - | Height of an item in the list for VirtualScrolling. | | virtualScrollOptions | ScrollerOptions | - | Whether to use the scroller feature. The properties of scroller component can be used like an object in it. | | autofocus | boolean | - | When present, it specifies that the component should automatically get focus on load. | | options | TreeNode[] | undefined | An array of treenodes. | | loading | boolean | - | Displays a loader to indicate data load is in progress. | | loadingMode | "mask" \| "icon" | - | Loading mode display. | | size | "small" \| "large" | undefined | Specifies the size of the component. | | variant | "filled" \| "outlined" | undefined | Specifies the input variant of the component. | | fluid | boolean | undefined | Spans 100% width of the container when enabled. | | appendTo | HTMLElement \| ElementRef \| TemplateRef \| "self" \| "body" \| null \| undefined | 'self' | Target element to attach the overlay, valid values are "body" or a local ng-template variable of another element (note: use binding with brackets for template variables, e.g. [appendTo]="mydiv" for a div element having #mydiv as variable name). | | motionOptions | MotionOptions | - | The motion options. | ### Emits | Name | Parameters | Description | |------|------------|-------------| | onNodeExpand | event: TreeSelectNodeExpandEvent | Callback to invoke when a node is expanded. | | onNodeCollapse | event: TreeSelectNodeCollapseEvent | Callback to invoke when a node is collapsed. | | onShow | value: any | Callback to invoke when the overlay is shown. | | onHide | event: Event | Callback to invoke when the overlay is hidden. | | onClear | value: any | Callback to invoke when input field is cleared. | | onFilter | event: TreeFilterEvent | Callback to invoke when data is filtered. | | onFocus | event: Event | Callback to invoke when treeselect gets focus. | | onBlur | event: Event | Callback to invoke when treeselect loses focus. | | onNodeUnselect | event: TreeNodeUnSelectEvent | Callback to invoke when a node is unselected. | | onNodeSelect | event: TreeNodeSelectEvent | Callback to invoke when a node is selected. | ### Templates | Name | Type | Description | |------|------|-------------| | value | TemplateRef | Custom value template. | | header | TemplateRef | Custom header template. | | empty | TemplateRef | Custom empty message template. | | footer | TemplateRef | Custom footer template. | | clearicon | TemplateRef | Custom clear icon template. | | triggericon | TemplateRef | Custom trigger icon template. | | dropdownicon | TemplateRef | Custom dropdown icon template. | | filtericon | TemplateRef | Custom filter icon template. | | closeicon | TemplateRef | Custom close icon template. | | itemtogglericon | TemplateRef | Custom item toggler icon template. | | itemcheckboxicon | TemplateRef | Custom item checkbox icon template. | | itemloadingicon | TemplateRef | Custom item loading icon template. | ## Pass Through Options | Name | Type | Description | |------|------|-------------| | host | PassThroughOption | Used to pass attributes to the host's DOM element. | | root | PassThroughOption | Used to pass attributes to the root's DOM element. | | hiddenInputContainer | PassThroughOption | Used to pass attributes to the hidden input container's DOM element. | | hiddenInput | PassThroughOption | Used to pass attributes to the hidden input's DOM element. | | labelContainer | PassThroughOption | Used to pass attributes to the label container's DOM element. | | label | PassThroughOption | Used to pass attributes to the label's DOM element. | | chipItem | PassThroughOption | Used to pass attributes to the chip item's DOM element. | | pcChip | ChipPassThrough | Used to pass attributes to the Chip component. | | clearIcon | PassThroughOption | Used to pass attributes to the clear icon's DOM element. | | dropdown | PassThroughOption | Used to pass attributes to the dropdown's DOM element. | | dropdownIcon | PassThroughOption | Used to pass attributes to the dropdown icon's DOM element. | | panel | PassThroughOption | Used to pass attributes to the panel's DOM element. | | hiddenFirstFocusableEl | PassThroughOption | Used to pass attributes to the first hidden focusable element's DOM element. | | treeContainer | PassThroughOption | Used to pass attributes to the tree container's DOM element. | | pcTree | TreePassThrough | Used to pass attributes to the Tree component. | | hiddenLastFocusableEl | PassThroughOption | Used to pass attributes to the last hidden focusable element's DOM element. | | pcOverlay | OverlayPassThrough | Used to pass attributes to the Overlay component. | ## Theming ### CSS Classes | Class | Description | |-------|-------------| | p-treeselect | Class name of the root element | | p-treeselect-label-container | Class name of the label container element | | p-treeselect-label | Class name of the label element | | p-treeselect-chip-item | Class name of the chip item element | | p-treeselect-clear-icon | Class name of the clear icon element | | p-treeselect-chip | Class name of the chip element | | p-treeselect-dropdown | Class name of the dropdown element | | p-treeselect-dropdown-icon | Class name of the dropdown icon element | | p-treeselect-overlay | Class name of the panel element | | p-treeselect-tree-container | Class name of the tree container element | | p-treeselect-empty-message | Class name of the empty message element | ### Design Tokens | Token | CSS Variable | Description | |-------|--------------|-------------| | treeselect.background | --p-treeselect-background | Background of root | | treeselect.disabled.background | --p-treeselect-disabled-background | Disabled background of root | | treeselect.filled.background | --p-treeselect-filled-background | Filled background of root | | treeselect.filled.hover.background | --p-treeselect-filled-hover-background | Filled hover background of root | | treeselect.filled.focus.background | --p-treeselect-filled-focus-background | Filled focus background of root | | treeselect.border.color | --p-treeselect-border-color | Border color of root | | treeselect.hover.border.color | --p-treeselect-hover-border-color | Hover border color of root | | treeselect.focus.border.color | --p-treeselect-focus-border-color | Focus border color of root | | treeselect.invalid.border.color | --p-treeselect-invalid-border-color | Invalid border color of root | | treeselect.color | --p-treeselect-color | Color of root | | treeselect.disabled.color | --p-treeselect-disabled-color | Disabled color of root | | treeselect.placeholder.color | --p-treeselect-placeholder-color | Placeholder color of root | | treeselect.invalid.placeholder.color | --p-treeselect-invalid-placeholder-color | Invalid placeholder color of root | | treeselect.shadow | --p-treeselect-shadow | Shadow of root | | treeselect.padding.x | --p-treeselect-padding-x | Padding x of root | | treeselect.padding.y | --p-treeselect-padding-y | Padding y of root | | treeselect.border.radius | --p-treeselect-border-radius | Border radius of root | | treeselect.focus.ring.width | --p-treeselect-focus-ring-width | Focus ring width of root | | treeselect.focus.ring.style | --p-treeselect-focus-ring-style | Focus ring style of root | | treeselect.focus.ring.color | --p-treeselect-focus-ring-color | Focus ring color of root | | treeselect.focus.ring.offset | --p-treeselect-focus-ring-offset | Focus ring offset of root | | treeselect.focus.ring.shadow | --p-treeselect-focus-ring-shadow | Focus ring shadow of root | | treeselect.transition.duration | --p-treeselect-transition-duration | Transition duration of root | | treeselect.sm.font.size | --p-treeselect-sm-font-size | Sm font size of root | | treeselect.sm.padding.x | --p-treeselect-sm-padding-x | Sm padding x of root | | treeselect.sm.padding.y | --p-treeselect-sm-padding-y | Sm padding y of root | | treeselect.lg.font.size | --p-treeselect-lg-font-size | Lg font size of root | | treeselect.lg.padding.x | --p-treeselect-lg-padding-x | Lg padding x of root | | treeselect.lg.padding.y | --p-treeselect-lg-padding-y | Lg padding y of root | | treeselect.font.weight | --p-treeselect-font-weight | Font weight of root | | treeselect.font.size | --p-treeselect-font-size | Font size of root | | treeselect.dropdown.width | --p-treeselect-dropdown-width | Width of dropdown | | treeselect.dropdown.color | --p-treeselect-dropdown-color | Color of dropdown | | treeselect.overlay.background | --p-treeselect-overlay-background | Background of overlay | | treeselect.overlay.border.color | --p-treeselect-overlay-border-color | Border color of overlay | | treeselect.overlay.border.radius | --p-treeselect-overlay-border-radius | Border radius of overlay | | treeselect.overlay.color | --p-treeselect-overlay-color | Color of overlay | | treeselect.overlay.shadow | --p-treeselect-overlay-shadow | Shadow of overlay | | treeselect.tree.padding | --p-treeselect-tree-padding | Padding of tree | | treeselect.clear.icon.color | --p-treeselect-clear-icon-color | Color of clear icon | | treeselect.empty.message.padding | --p-treeselect-empty-message-padding | Padding of empty message | | treeselect.chip.border.radius | --p-treeselect-chip-border-radius | Border radius of chip | --- # Angular TreeTable Component TreeTable is used to display hierarchical data in tabular format. ## Accessibility Screen Reader Default role of the table is table . Header, body and footer elements use rowgroup , rows use row role, header cells have columnheader and body cells use cell roles. Sortable headers utilizer aria-sort attribute either set to "ascending" or "descending". Row elements manage aria-expanded for state and aria-level attribute to define the hierachy by ttRow directive. Table rows and table cells should be specified by users using the aria-posinset , aria-setsize , aria-label , and aria-describedby attributes, as they are determined through templating. When selection is enabled, ttSelectableRow directive sets aria-selected to true on a row. In checkbox mode, the built-in checkbox component use checkbox role with aria-checked state attribute. Editable cells use custom templating so you need to manage aria roles and attributes manually if required. Paginator is a standalone component used inside the TreeTable, refer to the paginator for more information about the accessibility features. Sortable Headers Keyboard Support Key Function tab Moves through the headers. enter Sorts the column. space Sorts the column. Keyboard Support Key Function tab Moves focus to the first selected node when focus enters the component, if there is none then first element receives the focus. If focus is already inside the component, moves focus to the next focusable element in the page tab sequence. shift + tab Moves focus to the last selected node when focus enters the component, if there is none then first element receives the focus. If focus is already inside the component, moves focus to the previous focusable element in the page tab sequence. enter Selects the focused treenode. space Selects the focused treenode. down arrow Moves focus to the next treenode. up arrow Moves focus to the previous treenode. right arrow If node is closed, opens the node otherwise moves focus to the first child node. left arrow If node is open, closes the node otherwise moves focus to the parent node. ## Basic TreeTable requires a collection of TreeNode instances as a value components as children for the representation. **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { TreeTableModule } from 'primeng/treetable'; import { NodeService } from '@/service/nodeservice'; import { TreeNode } from 'primeng/api'; @Component({ template: ` Name Size Type
{{ rowData.name }}
{{ rowData.size }} {{ rowData.type }} `, standalone: true, imports: [TreeTableModule], providers: [NodeService] }) export class TreeTableBasicDemo implements OnInit { private nodeService = inject(NodeService); files!: TreeNode[]; ngOnInit() { this.nodeService.getFilesystem().then((files) => (this.files = files)); } } ``` ## Column Group **Example:** ```typescript import { Component, OnInit } from '@angular/core'; import { TreeTableModule } from 'primeng/treetable'; import { TreeNode } from 'primeng/api'; import { Product } from '@/domain/product'; @Component({ template: ` Brand Sale Rate Sales Profits Last Year This Year Last Year This Year
{{ rowData.brand }}
{{ rowData.lastYearSale }} {{ rowData.thisYearSale }} {{ rowData.lastYearProfit }} {{ rowData.thisYearProfit }} Totals $3,283,772 $2,126,925 `, standalone: true, imports: [TreeTableModule] }) export class TreeTableColumnGroupDemo implements OnInit { sales!: TreeNode[]; ngOnInit() { this.sales = [ { data: { brand: 'Bliss', lastYearSale: '51%', thisYearSale: '40%', lastYearProfit: '$54,406.00', thisYearProfit: '$43,342' }, children: [ { data: { brand: 'Product A', lastYearSale: '25%', thisYearSale: '20%', lastYearProfit: '$34,406.00', thisYearProfit: '$23,342' }, children: [ { data: { brand: 'Product A-1', lastYearSale: '20%', thisYearSale: '10%', lastYearProfit: '$24,406.00', thisYearProfit: '$13,342' } }, { data: { brand: 'Product A-2', lastYearSale: '5%', thisYearSale: '10%', lastYearProfit: '$10,000.00', thisYearProfit: '$10,000' } } ] }, { data: { brand: 'Product B', lastYearSale: '26%', thisYearSale: '20%', lastYearProfit: '$24,000.00', thisYearProfit: '$23,000' } } ] }, { data: { brand: 'Fate', lastYearSale: '83%', thisYearSale: '96%', lastYearProfit: '$423,132', thisYearProfit: '$312,122' }, children: [ { data: { brand: 'Product X', lastYearSale: '50%', thisYearSale: '40%', lastYearProfit: '$223,132', thisYearProfit: '$156,061' } }, { data: { brand: 'Product Y', lastYearSale: '33%', thisYearSale: '56%', lastYearProfit: '$200,000', thisYearProfit: '$156,061' } } ] }, { data: { brand: 'Ruby', lastYearSale: '38%', thisYearSale: '5%', lastYearProfit: '$12,321', thisYearProfit: '$8,500' }, children: [ { data: { brand: 'Product M', lastYearSale: '18%', thisYearSale: '2%', lastYearProfit: '$10,300', thisYearProfit: '$5,500' } }, { data: { brand: 'Product N', lastYearSale: '20%', thisYearSale: '3%', lastYearProfit: '$2,021', thisYearProfit: '$3,000' } } ] }, { data: { brand: 'Sky', lastYearSale: '49%', thisYearSale: '22%', lastYearProfit: '$745,232', thisYearProfit: '$650,323' }, children: [ { data: { brand: 'Product P', lastYearSale: '20%', thisYearSale: '16%', lastYearProfit: '$345,232', thisYearProfit: '$350,000' } }, { data: { brand: 'Product R', lastYearSale: '29%', thisYearSale: '6%', lastYearProfit: '$400,009', thisYearProfit: '$300,323' } } ] }, { data: { brand: 'Comfort', lastYearSale: '17%', thisYearSale: '79%', lastYearProfit: '$643,242', thisYearProfit: '500,332' }, children: [ { data: { brand: 'Product S', lastYearSale: '10%', thisYearSale: '40%', lastYearProfit: '$243,242', thisYearProfit: '$100,000' } }, { data: { brand: 'Product T', lastYearSale: '7%', thisYearSale: '39%', lastYearProfit: '$400,00', thisYearProfit: '$400,332' } } ] }, { data: { brand: 'Merit', lastYearSale: '52%', thisYearSale: ' 65%', lastYearProfit: '$421,132', thisYearProfit: '$150,005' }, children: [ { data: { brand: 'Product L', lastYearSale: '20%', thisYearSale: '40%', lastYearProfit: '$121,132', thisYearProfit: '$100,000' } }, { data: { brand: 'Product G', lastYearSale: '32%', thisYearSale: '25%', lastYearProfit: '$300,000', thisYearProfit: '$50,005' } } ] }, { data: { brand: 'Violet', lastYearSale: '82%', thisYearSale: '12%', lastYearProfit: '$131,211', thisYearProfit: '$100,214' }, children: [ { data: { brand: 'Product SH1', lastYearSale: '30%', thisYearSale: '6%', lastYearProfit: '$101,211', thisYearProfit: '$30,214' } }, { data: { brand: 'Product SH2', lastYearSale: '52%', thisYearSale: '6%', lastYearProfit: '$30,000', thisYearProfit: '$70,000' } } ] }, { data: { brand: 'Dulce', lastYearSale: '44%', thisYearSale: '45%', lastYearProfit: '$66,442', thisYearProfit: '$53,322' }, children: [ { data: { brand: 'Product PN1', lastYearSale: '22%', thisYearSale: '25%', lastYearProfit: '$33,221', thisYearProfit: '$20,000' } }, { data: { brand: 'Product PN2', lastYearSale: '22%', thisYearSale: '25%', lastYearProfit: '$33,221', thisYearProfit: '$33,322' } } ] }, { data: { brand: 'Solace', lastYearSale: '90%', thisYearSale: '56%', lastYearProfit: '$765,442', thisYearProfit: '$296,232' }, children: [ { data: { brand: 'Product HT1', lastYearSale: '60%', thisYearSale: '36%', lastYearProfit: '$465,000', thisYearProfit: '$150,653' } }, { data: { brand: 'Product HT2', lastYearSale: '30%', thisYearSale: '20%', lastYearProfit: '$300,442', thisYearProfit: '$145,579' } } ] }, { data: { brand: 'Essence', lastYearSale: '75%', thisYearSale: '54%', lastYearProfit: '$21,212', thisYearProfit: '$12,533' }, children: [ { data: { brand: 'Product TS1', lastYearSale: '50%', thisYearSale: '34%', lastYearProfit: '$11,000', thisYearProfit: '$8,562' } }, { data: { brand: 'Product TS2', lastYearSale: '25%', thisYearSale: '20%', lastYearProfit: '$11,212', thisYearProfit: '$3,971' } } ] } ]; } } ``` ## columnresizeexpand-doc Setting columnResizeMode as expand changes the table width as well. **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { TreeTableModule } from 'primeng/treetable'; import { NodeService } from '@/service/nodeservice'; import { TreeNode } from 'primeng/api'; interface Column { field: string; header: string; } @Component({ template: ` @for (col of columns; track col) { {{ col.header }} } @for (col of columns; let first = $first; track col) { @if (first) {
{{ rowData[col.field] }}
} @else { {{ rowData[col.field] }} } } `, standalone: true, imports: [TreeTableModule], providers: [NodeService] }) export class TreeTableColumnResizeExpandDemo implements OnInit { private nodeService = inject(NodeService); files!: TreeNode[]; cols!: Column[]; ngOnInit() { this.nodeService.getFilesystem().then((files) => (this.files = files)); this.cols = [ { field: 'name', header: 'Name' }, { field: 'size', header: 'Size' }, { field: 'type', header: 'Type' } ]; } } ``` ## columnresizefit-doc Columns can be resized with drag and drop when resizableColumns is enabled. Default resize mode is fit that does not change the overall table width. **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { TreeTableModule } from 'primeng/treetable'; import { NodeService } from '@/service/nodeservice'; import { TreeNode } from 'primeng/api'; interface Column { field: string; header: string; } @Component({ template: ` @for (col of columns; track col) { {{ col.header }} } @for (col of columns; let first = $first; track col) { @if (first) {
{{ rowData[col.field] }}
} @else { {{ rowData[col.field] }} } } `, standalone: true, imports: [TreeTableModule], providers: [NodeService] }) export class TreeTableColumnResizeFitDemo implements OnInit { private nodeService = inject(NodeService); files!: TreeNode[]; cols!: Column[]; ngOnInit() { this.nodeService.getFilesystem().then((files) => (this.files = files)); this.cols = [ { field: 'name', header: 'Name' }, { field: 'size', header: 'Size' }, { field: 'type', header: 'Type' } ]; } } ``` ## columnresizescrollable-doc To utilize the column resize modes with a scrollable TreeTable, a colgroup template must be defined. The default value of scrollHeight is "flex," it can also be set as a string value. **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { TreeTable, TreeTableModule } from 'primeng/treetable'; import { NodeService } from '@/service/nodeservice'; import { TreeNode } from 'primeng/api'; import { TreeTable } from 'primeng/treetable'; interface Column { field: string; header: string; } @Component({ template: ` @for (col of columns; track col) { } @for (col of columns; track col) { {{ col.header }} } @for (col of columns; let first = $first; track col) { @if (first) {
{{ rowData[col.field] }}
} @else { {{ rowData[col.field] }} } } `, standalone: true, imports: [TreeTableModule], providers: [NodeService] }) export class TreeTableColumnResizeScrollableDemo implements OnInit { private nodeService = inject(NodeService); files!: TreeNode[]; cols!: Column[]; ngOnInit() { this.nodeService.getFilesystem().then((files) => (this.files = files)); this.cols = [ { field: 'name', header: 'Name' }, { field: 'size', header: 'Size' }, { field: 'type', header: 'Type' } ]; } } ``` ## Column Toggle Column visibility based on a condition can be implemented with dynamic columns, in this sample a MultiSelect is used to manage the visible columns. **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { MultiSelectModule } from 'primeng/multiselect'; import { TreeTableModule } from 'primeng/treetable'; import { NodeService } from '@/service/nodeservice'; import { TreeNode } from 'primeng/api'; interface Column { field: string; header: string; } @Component({ template: `
@for (col of columns; track col) { {{ col.header }} } @for (col of columns; let first = $first; track col) { @if (first) {
{{ rowData[col.field] }}
} @else { {{ rowData[col.field] }} } } `, standalone: true, imports: [MultiSelectModule, TreeTableModule, FormsModule], providers: [NodeService] }) export class TreeTableColumnToggleDemo implements OnInit { private nodeService = inject(NodeService); files!: TreeNode[]; cols!: Column[]; selectedColumns!: Column[]; ngOnInit() { this.nodeService.getFilesystem().then((files) => (this.files = files)); this.cols = [ { field: 'name', header: 'Name' }, { field: 'size', header: 'Size' }, { field: 'type', header: 'Type' } ]; this.selectedColumns = this.cols; } } ``` ## Conditional Style Particular rows and cells can be styled based on conditions. The ngClass receives a row data as a parameter to return a style class for a row whereas cells are customized using the body template. **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { TreeTableModule } from 'primeng/treetable'; import { NodeService } from '@/service/nodeservice'; import { TreeNode } from 'primeng/api'; interface Column { field: string; header: string; } @Component({ template: ` @for (col of columns; track col) { {{ col.header }} } @for (col of columns; let first = $first; track col) { @if (first) {
{{ rowData[col.field] }}
} @else { {{ rowData[col.field] }} } } `, standalone: true, imports: [TreeTableModule], providers: [NodeService] }) export class TreeTableConditionalStyleDemo implements OnInit { private nodeService = inject(NodeService); files!: TreeNode[]; cols!: Column[]; ngOnInit() { this.nodeService.getFilesystem().then((files) => (this.files = files)); this.cols = [ { field: 'name', header: 'Name' }, { field: 'size', header: 'Size' }, { field: 'type', header: 'Type' } ]; } } ``` ## Context Menu TreeTable has exclusive integration with contextmenu component. In order to attach a menu to a table, add ttContextMenuRow directive to the rows that can be selected with context menu, define a local template variable for the menu and bind it to the contextMenu property of the table. This enables displaying the menu whenever a row is right clicked. A separate contextMenuSelection property is used to get a hold of the right clicked row. For dynamic columns, setting ttContextMenuRowDisabled property as true disables context menu for that particular row. **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { TreeTable, TreeTableModule } from 'primeng/treetable'; import { NodeService } from '@/service/nodeservice'; import { TreeNode, MenuItem, MessageService } from 'primeng/api'; import { TreeTable } from 'primeng/treetable'; interface Column { field: string; header: string; } @Component({ template: ` @for (col of columns; track col) { {{ col.header }} } @for (col of columns; let first = $first; track col) { @if (first) {
{{ rowData[col.field] }}
} @else { {{ rowData[col.field] }} } } `, standalone: true, imports: [TreeTableModule], providers: [NodeService, MessageService] }) export class TreeTableContextMenuDemo implements OnInit { private nodeService = inject(NodeService); private messageService = inject(MessageService); files!: TreeNode[]; selectedNode!: TreeNode; cols!: Column[]; items!: MenuItem[]; ngOnInit() { this.nodeService.getFilesystem().then((files) => (this.files = files)); this.cols = [ { field: 'name', header: 'Name' }, { field: 'size', header: 'Size' }, { field: 'type', header: 'Type' } ]; this.items = [ { label: 'View', icon: 'pi pi-search', command: (event) => this.viewFile(this.selectedNode) }, { label: 'Toggle', icon: 'pi pi-sort', command: (event) => this.toggleFile(this.selectedNode) } ]; } viewFile(node: any) { this.messageService.add({ severity: 'info', summary: 'File Selected', detail: node.data.name + ' - ' + node.data.size }); } toggleFile(node: any) { node.expanded = !node.expanded; this.files = [...this.files]; } } ``` ## Controlled Expansion state is controlled with expandedKeys property. **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { TreeTableModule } from 'primeng/treetable'; import { NodeService } from '@/service/nodeservice'; import { TreeNode } from 'primeng/api'; @Component({ template: ` Name Size Type
{{ rowData.name }}
{{ rowData.size }} {{ rowData.type }} `, standalone: true, imports: [TreeTableModule], providers: [NodeService] }) export class TreeTableControlledDemo implements OnInit { private nodeService = inject(NodeService); files!: TreeNode[]; ngOnInit() { this.nodeService.getFilesystem().then((files) => { this.files = files.slice(0, 5); }); } toggleApplications() { if (this.files && this.files.length > 0) { const newFiles = [...this.files]; newFiles[0] = { ...newFiles[0], expanded: !newFiles[0].expanded }; this.files = newFiles; } } } ``` ## Dynamic Columns Columns can be created programmatically. **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { TreeTableModule } from 'primeng/treetable'; import { NodeService } from '@/service/nodeservice'; import { TreeNode } from 'primeng/api'; interface Column { field: string; header: string; } @Component({ template: ` @for (col of columns; track col) { {{ col.header }} } @for (col of columns; let first = $first; track col) { @if (first) {
{{ rowData[col.field] }}
} @else { {{ rowData[col.field] }} } } `, standalone: true, imports: [TreeTableModule], providers: [NodeService] }) export class TreeTableDynamicColumnsDemo implements OnInit { private nodeService = inject(NodeService); files!: TreeNode[]; cols!: Column[]; ngOnInit() { this.nodeService.getFilesystem().then((files) => (this.files = files)); this.cols = [ { field: 'name', header: 'Name' }, { field: 'size', header: 'Size' }, { field: 'type', header: 'Type' } ]; } } ``` ## edit-doc Incell editing is enabled by defining input elements with treeTableCellEditor . **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { TreeTableModule } from 'primeng/treetable'; import { InputTextModule } from 'primeng/inputtext'; import { NodeService } from '@/service/nodeservice'; import { TreeNode } from 'primeng/api'; interface Column { field: string; header: string; } @Component({ template: ` @for (col of columns; track col.field) { {{ col.header }} } @for (col of columns; track col.field; let i = $index) { @if (i === 0) { } {{ rowData[col.field] }} } `, standalone: true, imports: [TreeTableModule, InputTextModule, FormsModule], providers: [NodeService] }) export class TreeTableEditDemo implements OnInit { private nodeService = inject(NodeService); files!: TreeNode[]; cols!: Column[]; ngOnInit() { this.nodeService.getFilesystem().then((files) => (this.files = files)); this.cols = [ { field: 'name', header: 'Name' }, { field: 'size', header: 'Size' }, { field: 'type', header: 'Type' } ]; } } ``` ## Filter The filterMode specifies the filtering strategy, in lenient mode when the query matches a node, children of the node are not searched further as all descendants of the node are included. On the other hand, in strict mode when the query matches a node, filtering continues on all descendants. A general filled called filterGlobal is also provided to search all columns that support filtering. **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { IconFieldModule } from 'primeng/iconfield'; import { InputIconModule } from 'primeng/inputicon'; import { TreeTableModule } from 'primeng/treetable'; import { InputTextModule } from 'primeng/inputtext'; import { NodeService } from '@/service/nodeservice'; import { TreeNode } from 'primeng/api'; interface Column { field: string; header: string; } @Component({ template: `
@for (col of columns; track col) { {{ col.header }} } @for (col of columns; track col) { } @for (col of cols; let first = $first; track col) { @if (first) {
{{ rowData[col.field] }}
} @else { {{ rowData[col.field] }} } } No data found. `, standalone: true, imports: [IconFieldModule, InputIconModule, TreeTableModule, InputTextModule], providers: [NodeService] }) export class TreeTableFilterDemo implements OnInit { private nodeService = inject(NodeService); filterMode: string = 'lenient'; filterModes: any[] = [ { label: 'Lenient', value: 'lenient' }, { label: 'Strict', value: 'strict' } ]; files!: TreeNode[]; cols!: Column[]; ngOnInit() { this.nodeService.getFilesystem().then((files) => (this.files = files)); this.cols = [ { field: 'name', header: 'Name' }, { field: 'size', header: 'Size' }, { field: 'type', header: 'Type' } ]; } } ``` ## flexiblescroll-doc Flex scroll feature makes the scrollable viewport section dynamic instead of a fixed value so that it can grow or shrink relative to the parent size of the table. Click the button below to display a maximizable Dialog where data viewport adjusts itself according to the size changes. **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { ButtonModule } from 'primeng/button'; import { Dialog, DialogModule } from 'primeng/dialog'; import { TreeTableModule } from 'primeng/treetable'; import { NodeService } from '@/service/nodeservice'; import { TreeNode } from 'primeng/api'; @Component({ template: ` Name Size Type
{{ rowData.name }}
{{ rowData.size }} {{ rowData.type }} `, standalone: true, imports: [ButtonModule, DialogModule, TreeTableModule], providers: [NodeService] }) export class TreeTableFlexibleScrollDemo implements OnInit { private nodeService = inject(NodeService); files!: TreeNode[]; dialogVisible: boolean = false; ngOnInit() { this.nodeService.getFilesystem().then((files) => { this.files = files; }); } } ``` ## Grid Lines Enabling showGridlines displays grid lines. **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { TreeTableModule } from 'primeng/treetable'; import { NodeService } from '@/service/nodeservice'; import { TreeNode } from 'primeng/api'; @Component({ template: ` Name Size Type
{{ rowData.name }}
{{ rowData.size }} {{ rowData.type }} `, standalone: true, imports: [TreeTableModule], providers: [NodeService] }) export class TreeTableGridLinesDemo implements OnInit { private nodeService = inject(NodeService); files!: TreeNode[]; ngOnInit() { this.nodeService.getFilesystem().then((files) => (this.files = files)); } } ``` ## Lazy Load Lazy mode is handy to deal with large datasets, instead of loading the entire data, small chunks of data is loaded by invoking corresponding callbacks everytime paging , sorting and filtering occurs. Sample below imitates lazy loading data from a remote datasource using an in-memory list and timeouts to mimic network connection. Enabling the lazy property and assigning the logical number of rows to totalRecords by doing a projection query are the key elements of the implementation so that paginator displays the UI assuming there are actually records of totalRecords size although in reality they are not present on page, only the records that are displayed on the current page exist. In addition, only the root elements should be loaded, children can be loaded on demand using onNodeExpand callback. **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { TreeTableModule } from 'primeng/treetable'; import { NodeService } from '@/service/nodeservice'; import { TreeNode } from 'primeng/api'; interface Column { field: string; header: string; } @Component({ template: ` @for (col of columns; track col) { {{ col.header }} } @for (col of columns; let first = $first; track col) { @if (first) {
{{ rowData[col.field] }}
} @else { {{ rowData[col.field] }} } } `, standalone: true, imports: [TreeTableModule], providers: [NodeService] }) export class TreeTableLazyLoadDemo implements OnInit { private nodeService = inject(NodeService); files!: TreeNode[]; cols!: Column[]; totalRecords!: number; loading: boolean = false; ngOnInit() { this.cols = [ { field: 'name', header: 'Name' }, { field: 'size', header: 'Size' }, { field: 'type', header: 'Type' } ]; this.totalRecords = 1000; this.loading = true; } loadNodes(event: any) { this.loading = true; setTimeout(() => { this.files = []; for (let i = 0; i < event.rows; i++) { let node = { data: { name: 'Item ' + (event.first + i), size: Math.floor(Math.random() * 1000) + 1 + 'kb', type: 'Type ' + (event.first + i) }, leaf: false }; this.files.push(node); } this.loading = false; this.cd.markForCheck(); }, 1000); } onNodeExpand(event: any) { this.loading = true; setTimeout(() => { this.loading = false; const node = event.node; node.children = [ { data: { name: node.data.name + ' - 0', size: Math.floor(Math.random() * 1000) + 1 + 'kb', type: 'File' } }, { data: { name: node.data.name + ' - 1', size: Math.floor(Math.random() * 1000) + 1 + 'kb', type: 'File' } } ]; this.files = [...this.files]; this.cd.markForCheck(); }, 250); } } ``` ## loadingmask-doc The loading property displays a mask layer to indicate busy state. Use the paginator to display the mask. **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { TreeTableModule } from 'primeng/treetable'; import { NodeService } from '@/service/nodeservice'; import { TreeNode } from 'primeng/api'; @Component({ template: ` Name Size Type
{{ rowData.name }}
{{ rowData.size }} {{ rowData.type }} `, standalone: true, imports: [TreeTableModule], providers: [NodeService] }) export class TreeTableLoadingMaskDemo implements OnInit { private nodeService = inject(NodeService); files!: TreeNode[]; ngOnInit() { this.nodeService.getFilesystem().then((files) => (this.files = files)); } } ``` ## loadingskeleton-doc Skeleton component can be used as a placeholder during the loading process. **Example:** ```typescript import { Component, OnInit, inject, signal } from '@angular/core'; import { SkeletonModule } from 'primeng/skeleton'; import { TreeTableModule } from 'primeng/treetable'; import { NodeService } from '@/service/nodeservice'; import { TreeNode } from 'primeng/api'; @Component({ template: ` Name Size Type `, standalone: true, imports: [SkeletonModule, TreeTableModule], providers: [NodeService] }) export class TreeTableLoadingSkeletonDemo implements OnInit { private nodeService = inject(NodeService); files = signal([]); ngOnInit() { this.nodeService.getFilesystem().then((files) => this.files.set(files)); } } ``` ## Basic Pagination is enabled by adding paginator property and defining rows per page. **Example:** ```typescript import { Component, OnInit } from '@angular/core'; import { TreeTableModule } from 'primeng/treetable'; import { TreeNode } from 'primeng/api'; interface Column { field: string; header: string; } @Component({ template: ` @for (col of columns; track col) { {{ col.header }} } @for (col of columns; let first = $first; track col) { @if (first) {
{{ rowData[col.field] }}
} @else { {{ rowData[col.field] }} } } `, standalone: true, imports: [TreeTableModule] }) export class TreeTablePaginatorBasicDemo implements OnInit { files!: TreeNode[]; cols!: Column[]; ngOnInit() { this.files = []; for (let i = 0; i < 50; i++) { let node = { data: { name: 'Item ' + i, size: Math.floor(Math.random() * 1000) + 1 + 'kb', type: 'Type ' + i }, children: [ { data: { name: 'Item ' + i + ' - 0', size: Math.floor(Math.random() * 1000) + 1 + 'kb', type: 'Type ' + i } } ] }; this.files.push(node); } this.cols = [ { field: 'name', header: 'Name' }, { field: 'size', header: 'Size' }, { field: 'type', header: 'Type' } ]; } } ``` ## Template Paginator UI is customized using the paginatorleft and paginatorright property. Each element can also be customized further with your own UI to replace the default one, refer to the Paginator component for more information about the advanced customization options. **Example:** ```typescript import { Component, OnInit } from '@angular/core'; import { ButtonModule } from 'primeng/button'; import { TreeTableModule } from 'primeng/treetable'; import { TreeNode } from 'primeng/api'; import { Paginator } from 'primeng/paginator'; interface Column { field: string; header: string; } @Component({ template: ` @for (col of columns; track col) { {{ col.header }} } @for (col of columns; let first = $first; track col) { @if (first) {
{{ rowData[col.field] }}
} @else { {{ rowData[col.field] }} } } `, standalone: true, imports: [ButtonModule, TreeTableModule] }) export class TreeTablePaginatorTemplateDemo implements OnInit { files!: TreeNode[]; cols!: Column[]; ngOnInit() { this.files = []; for (let i = 0; i < 50; i++) { let node = { data: { name: 'Item ' + i, size: Math.floor(Math.random() * 1000) + 1 + 'kb', type: 'Type ' + i }, children: [ { data: { name: 'Item ' + i + ' - 0', size: Math.floor(Math.random() * 1000) + 1 + 'kb', type: 'Type ' + i } } ] }; this.files.push(node); } this.cols = [ { field: 'name', header: 'Name' }, { field: 'size', header: 'Size' }, { field: 'type', header: 'Type' } ]; } } ``` ## Reorder Order of the columns can be changed using drag and drop when reorderableColumns is present. **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { TreeTableModule } from 'primeng/treetable'; import { NodeService } from '@/service/nodeservice'; import { TreeNode } from 'primeng/api'; interface Column { field: string; header: string; } @Component({ template: ` @for (col of columns; track col) { {{ col.header }} } @for (col of columns; let first = $first; track col) { @if (first) {
{{ rowData[col.field] }}
} @else { {{ rowData[col.field] }} } } `, standalone: true, imports: [TreeTableModule], providers: [NodeService] }) export class TreeTableReorderDemo implements OnInit { private nodeService = inject(NodeService); files!: TreeNode[]; cols!: Column[]; ngOnInit() { this.nodeService.getFilesystem().then((files) => (this.files = files)); this.cols = [ { field: 'name', header: 'Name' }, { field: 'size', header: 'Size' }, { field: 'type', header: 'Type' } ]; } } ``` ## scrollfrozencolumns-doc A column can be fixed during horizontal scrolling by enabling the frozenColumns property. **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { TreeTableModule } from 'primeng/treetable'; import { NodeService } from '@/service/nodeservice'; import { TreeNode } from 'primeng/api'; interface Column { field: string; header: string; } @Component({ template: ` @for (col of columns; track col) { } @for (col of columns; track col) { {{ col.header }} } @for (col of columns; track col) { {{ rowData[col.field] }} }
{{ rowData.name }}
`, standalone: true, imports: [TreeTableModule], providers: [NodeService] }) export class TreeTableScrollFrozenColumnsDemo implements OnInit { private nodeService = inject(NodeService); files!: TreeNode[]; cols!: Column[]; frozenCols!: Column[]; scrollableCols!: Column[]; ngOnInit() { this.nodeService.getFilesystem().then((files) => (this.files = files)); this.cols = [ { field: 'name', header: 'Name' }, { field: 'size', header: 'Size' }, { field: 'type', header: 'Type' } ]; this.scrollableCols = [ { field: 'size', header: 'Size' }, { field: 'type', header: 'Type' }, { field: 'size', header: 'Size' }, { field: 'type', header: 'Type' }, { field: 'size', header: 'Size' }, { field: 'type', header: 'Type' } ]; this.frozenCols = [{ field: 'name', header: 'Name' }]; } } ``` ## scrollhorizontal-doc Horizontal scrolling is enabled when the total width of columns exceeds table width. **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { TreeTableModule } from 'primeng/treetable'; import { NodeService } from '@/service/nodeservice'; import { TreeNode } from 'primeng/api'; interface Column { field: string; header: string; } @Component({ template: ` @for (col of columns; track col) { } @for (col of columns; track col) { {{ col.header }} } @for (col of columns; let first = $first; track col) { @if (first) {
{{ rowData[col.field] }}
} @else { {{ rowData[col.field] }} } } `, standalone: true, imports: [TreeTableModule], providers: [NodeService] }) export class TreeTableScrollHorizontalDemo implements OnInit { private nodeService = inject(NodeService); files!: TreeNode[]; cols!: Column[]; ngOnInit() { this.nodeService.getFilesystem().then((files) => (this.files = files)); this.cols = [ { field: 'name', header: 'Name' }, { field: 'size', header: 'Size' }, { field: 'type', header: 'Type' } ]; } } ``` ## scrollvertical-doc Adding scrollable property along with a scrollHeight for the data viewport enables vertical scrolling with fixed headers. **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { TreeTableModule } from 'primeng/treetable'; import { NodeService } from '@/service/nodeservice'; import { TreeNode } from 'primeng/api'; interface Column { field: string; header: string; } @Component({ template: ` @for (col of columns; track col) { {{ col.header }} } @for (col of columns; let first = $first; track col) { @if (first) {
{{ rowData[col.field] }}
} @else { {{ rowData[col.field] }} } } `, standalone: true, imports: [TreeTableModule], providers: [NodeService] }) export class TreeTableScrollVerticalDemo implements OnInit { private nodeService = inject(NodeService); files!: TreeNode[]; cols!: Column[]; ngOnInit() { this.nodeService.getFilesystem().then((files) => (this.files = files)); this.cols = [ { field: 'name', header: 'Name' }, { field: 'size', header: 'Size' }, { field: 'type', header: 'Type' } ]; } } ``` ## selectioncheckbox-doc Selection of multiple nodes via checkboxes is enabled by configuring selectionMode as checkbox . In checkbox selection mode, value binding should be a key-value pair where key (or the dataKey) is the node key and value is an object that has checked and partialChecked properties to represent the checked state of a node. **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { TreeTableModule } from 'primeng/treetable'; import { NodeService } from '@/service/nodeservice'; import { TreeNode } from 'primeng/api'; interface Column { field: string; header: string; } @Component({ template: ` @for (col of columns; track col) { {{ col.header }} } @for (col of columns; let first = $first; track col) { @if (first) {
{{ rowData[col.field] }}
} @else { {{ rowData[col.field] }} } } `, standalone: true, imports: [TreeTableModule], providers: [NodeService] }) export class TreeTableSelectionCheckboxDemo implements OnInit { private nodeService = inject(NodeService); files!: TreeNode[]; selectionKeys: any = {}; cols!: Column[]; ngOnInit() { this.nodeService.getTreeTableNodes().then((files) => { this.files = files; }); this.cols = [ { field: 'name', header: 'Name' }, { field: 'size', header: 'Size' }, { field: 'type', header: 'Type' } ]; this.selectionKeys = { '0': { partialChecked: true }, '0-0': { partialChecked: false, checked: true }, '0-0-0': { checked: true }, '0-0-1': { checked: true }, '0-0-2': { checked: true } }; } } ``` ## selectioneventsc-doc TreeTable provides onNodeSelect and onNodeUnselect events to listen selection events. **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { TreeTableModule } from 'primeng/treetable'; import { NodeService } from '@/service/nodeservice'; import { TreeNode, MessageService } from 'primeng/api'; interface Column { field: string; header: string; } interface NodeEvent { originalEvent: Event; node: TreeNode; } @Component({ template: ` @for (col of columns; track col) { {{ col.header }} } @for (col of columns; let first = $first; track col) { @if (first) {
{{ rowData[col.field] }}
} @else { {{ rowData[col.field] }} } } `, standalone: true, imports: [TreeTableModule], providers: [NodeService, MessageService] }) export class TreeTableSelectionEventsCDemo implements OnInit { private nodeService = inject(NodeService); private messageService = inject(MessageService); files!: TreeNode[]; selectedNode!: TreeNode; cols!: Column[]; ngOnInit() { this.nodeService.getFilesystem().then((files) => (this.files = files)); this.cols = [ { field: 'name', header: 'Name' }, { field: 'size', header: 'Size' }, { field: 'type', header: 'Type' } ]; } nodeSelect(event: NodeEvent) { this.messageService.add({ severity: 'info', summary: 'Node Selected', detail: event.node.data.name }); } nodeUnselect(event: NodeEvent) { this.messageService.add({ severity: 'warn', summary: 'Node Unselected', detail: event.node.data.name }); } } ``` ## Multiple More than one node is selectable by setting selectionMode to multiple . By default in multiple selection mode, metaKey press (e.g. ⌘ ) is necessary to add to existing selections however this can be configured with disabling the metaKeySelection property. Note that in touch enabled devices, TreeTable always ignores metaKey. **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { TreeTable, TreeTableModule } from 'primeng/treetable'; import { NodeService } from '@/service/nodeservice'; import { TreeNode } from 'primeng/api'; import { TreeTable } from 'primeng/treetable'; interface Column { field: string; header: string; } @Component({ template: ` @for (col of columns; track col) { {{ col.header }} } @for (col of columns; let first = $first; track col) { @if (first) {
{{ rowData[col.field] }}
} @else { {{ rowData[col.field] }} } } `, standalone: true, imports: [TreeTableModule], providers: [NodeService] }) export class TreeTableSelectionMultipleDemo implements OnInit { private nodeService = inject(NodeService); metaKeySelection: boolean = true; files!: TreeNode[]; selectedNodes!: TreeNode[]; cols!: Column[]; ngOnInit() { this.nodeService.getFilesystem().then((files) => (this.files = files)); this.cols = [ { field: 'name', header: 'Name' }, { field: 'size', header: 'Size' }, { field: 'type', header: 'Type' } ]; } } ``` ## Single Single node selection is configured by setting selectionMode as single along with selection properties to manage the selection value binding. By default, metaKey press (e.g. ⌘ ) is necessary to unselect a node however this can be configured with disabling the metaKeySelection property. In touch enabled devices this option has no effect and behavior is same as setting it to false **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { TreeTableModule } from 'primeng/treetable'; import { NodeService } from '@/service/nodeservice'; import { TreeNode } from 'primeng/api'; interface Column { field: string; header: string; } @Component({ template: ` @for (col of columns; track col) { {{ col.header }} } @for (col of columns; let first = $first; track col) { @if (first) {
{{ rowData[col.field] }}
} @else { {{ rowData[col.field] }} } } `, standalone: true, imports: [TreeTableModule], providers: [NodeService] }) export class TreeTableSelectionSingleDemo implements OnInit { private nodeService = inject(NodeService); metaKeySelection: boolean = true; files!: TreeNode[]; selectedNode!: TreeNode; cols!: Column[]; ngOnInit() { this.nodeService.getFilesystem().then((files) => (this.files = files)); this.cols = [ { field: 'name', header: 'Name' }, { field: 'size', header: 'Size' }, { field: 'type', header: 'Type' } ]; } } ``` ## Size In addition to a regular treetable, alternatives with alternative sizes are available. Add p-treetable-sm class to reduce the size of treetable or p-treetable-lg to enlarge it. **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { TreeTableModule } from 'primeng/treetable'; import { NodeService } from '@/service/nodeservice'; import { TreeNode } from 'primeng/api'; @Component({ template: ` Name Size Type
{{ rowData.name }}
{{ rowData.size }} {{ rowData.type }} `, standalone: true, imports: [TreeTableModule], providers: [NodeService] }) export class TreeTableSizeDemo implements OnInit { private nodeService = inject(NodeService); files!: TreeNode[]; sizes!: any[]; selectedSize: any = ''; ngOnInit() { this.nodeService.getFilesystem().then((files) => (this.files = files)); this.sizes = [ { name: 'Small', class: 'p-treetable-sm' }, { name: 'Normal', class: '' }, { name: 'Large', class: 'p-treetable-lg' } ]; } } ``` ## Multiple Columns Multiple columns can be sorted by defining sortMode as multiple . This mode requires metaKey (e.g. ⌘ ) to be pressed when clicking a header. **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { TreeTableModule } from 'primeng/treetable'; import { NodeService } from '@/service/nodeservice'; import { TreeNode } from 'primeng/api'; interface Column { field: string; header: string; } @Component({ template: ` @for (col of columns; track col) {
{{ col.header }}
} @for (col of columns; let first = $first; track col) { @if (first) {
{{ rowData[col.field] }}
} @else { {{ rowData[col.field] }} } } `, standalone: true, imports: [TreeTableModule], providers: [NodeService] }) export class TreeTableSortMultipleColumnsDemo implements OnInit { private nodeService = inject(NodeService); files!: TreeNode[]; cols!: Column[]; ngOnInit() { this.nodeService.getFilesystem().then((files) => (this.files = files)); this.cols = [ { field: 'name', header: 'Name' }, { field: 'size', header: 'Size' }, { field: 'type', header: 'Type' } ]; } } ``` ## sortremovable-doc The removable sort can be implemented using the customSort property. **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { TreeTable, TreeTableModule } from 'primeng/treetable'; import { NodeService } from '@/service/nodeservice'; import { TreeNode, SortEvent } from 'primeng/api'; import { TreeTable } from 'primeng/treetable'; interface Column { field: string; header: string; } @Component({ template: ` @for (col of columns; track col.field) { {{ col.header }} } @for (col of columns; track col.field; let i = $index) { @if (i === 0) { } {{ rowData[col.field] }} } `, standalone: true, imports: [TreeTableModule], providers: [NodeService] }) export class TreeTableSortRemovableDemo implements OnInit { private nodeService = inject(NodeService); metaKeySelection: boolean = true; files!: TreeNode[]; initialValue: TreeNode[]; selectedNode!: TreeNode; cols!: Column[]; isSorted: boolean = null; ngOnInit() { this.nodeService.getFilesystem().then((files) => { this.files = files; this.initialValue = [...files]; }); this.cols = [ { field: 'name', header: 'Name' }, { field: 'size', header: 'Size' }, { field: 'type', header: 'Type' } ]; } customSort(event: SortEvent) { if (this.isSorted == null || this.isSorted === undefined) { this.isSorted = true; this.sortTableData(event); } else if (this.isSorted == true) { this.isSorted = false; this.sortTableData(event); } else if (this.isSorted == false) { this.isSorted = null; this.files = [...this.initialValue]; this.tt.reset(); } } sortTableData(event) { event.data.sort((data1, data2) => { let value1 = data1.data[event.field]; let value2 = data2.data[event.field]; let result = null; if (value1 == null && value2 != null) result = -1; else if (value1 != null && value2 == null) result = 1; else if (value1 == null && value2 == null) result = 0; else if (typeof value1 === 'string' && typeof value2 === 'string') result = value1.localeCompare(value2); else result = value1 < value2 ? -1 : value1 > value2 ? 1 : 0; return event.order * result; }); } } ``` ## Single Column Sorting on a column is enabled by adding the ttSortableColumn property. **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { TreeTableModule } from 'primeng/treetable'; import { NodeService } from '@/service/nodeservice'; import { TreeNode } from 'primeng/api'; interface Column { field: string; header: string; } @Component({ template: ` @for (col of columns; track col) {
{{ col.header }}
} @for (col of columns; let first = $first; track col) { @if (first) {
{{ rowData[col.field] }}
} @else { {{ rowData[col.field] }} } } `, standalone: true, imports: [TreeTableModule], providers: [NodeService] }) export class TreeTableSortSingleColumnDemo implements OnInit { private nodeService = inject(NodeService); files!: TreeNode[]; cols!: Column[]; ngOnInit() { this.nodeService.getFilesystem().then((files) => (this.files = files)); this.cols = [ { field: 'name', header: 'Name' }, { field: 'size', header: 'Size' }, { field: 'type', header: 'Type' } ]; } } ``` ## Template Custom content at caption , header , body and summary sections are supported via templating. **Example:** ```typescript import { Component, OnInit, inject } from '@angular/core'; import { ButtonModule } from 'primeng/button'; import { TreeTableModule } from 'primeng/treetable'; import { NodeService } from '@/service/nodeservice'; import { TreeNode } from 'primeng/api'; interface Column { field: string; header: string; } @Component({ template: `
File Viewer
 @for (col of columns; let last = $last; track col) { {{ col.header }} } @for (col of columns; let first = $first; let last = $last; track col) { @if (first) {
{{ rowData[col.field] }}
} @else if (last) {
} @else { {{ rowData[col.field] }} } }
`, standalone: true, imports: [ButtonModule, TreeTableModule], providers: [NodeService] }) export class TreeTableTemplateDemo implements OnInit { private nodeService = inject(NodeService); files!: TreeNode[]; cols!: Column[]; ngOnInit() { this.nodeService.getFilesystem().then((files) => (this.files = files)); this.cols = [ { field: 'name', header: 'Name' }, { field: 'size', header: 'Size' }, { field: 'type', header: 'Type' }, { field: '', header: '' } ]; } } ``` ## Tree Table TreeTable is used to display hierarchical data in tabular format. ### Props | Name | Type | Default | Description | |------|------|---------|-------------| | dt | Object | undefined | Defines scoped design tokens of the component. | | unstyled | boolean | undefined | Indicates whether the component should be rendered without styles. | | pt | PassThrough> | undefined | Used to pass attributes to DOM elements inside the component. | | ptOptions | PassThroughOptions | undefined | Used to configure passthrough(pt) options of the component. | | columns | any[] | - | An array of objects to represent dynamic columns. | | tableStyle | Partial | - | Inline style of the table. | | tableStyleClass | string | - | Style class of the table. | | autoLayout | boolean | - | Whether the cell widths scale according to their content or not. | | lazy | boolean | - | Defines if data is loaded and interacted with in lazy manner. | | lazyLoadOnInit | boolean | - | Whether to call lazy loading on initialization. | | paginator | boolean | - | When specified as true, enables the pagination. | | rows | number | - | Number of rows to display per page. | | firstInput | number | - | Index of the first row to be displayed. | | pageLinks | number | - | Number of page links to display in paginator. | | rowsPerPageOptions | any[] | - | Array of integer/object values to display inside rows per page dropdown of paginator | | alwaysShowPaginator | boolean | - | Whether to show it even there is only one page. | | paginatorPosition | "top" \| "bottom" \| "both" | - | Position of the paginator. | | paginatorStyleClass | string | - | Custom style class for paginator | | paginatorDropdownAppendTo | any | - | Target element to attach the paginator dropdown overlay, valid values are "body" or a local ng-template variable of another element (note: use binding with brackets for template variables, e.g. [appendTo]="mydiv" for a div element having #mydiv as variable name). | | currentPageReportTemplate | string | - | Template of the current page report element. Available placeholders are {currentPage},{totalPages},{rows},{first},{last} and {totalRecords} | | showCurrentPageReport | boolean | - | Whether to display current page report. | | showJumpToPageDropdown | boolean | - | Whether to display a dropdown to navigate to any page. | | showFirstLastIcon | boolean | - | When enabled, icons are displayed on paginator to go first and last page. | | showPageLinks | boolean | - | Whether to show page links. | | defaultSortOrder | number | - | Sort order to use when an unsorted column gets sorted by user interaction. | | sortMode | "single" \| "multiple" | - | Defines whether sorting works on single column or on multiple columns. | | resetPageOnSort | boolean | - | When true, resets paginator to first page after sorting. | | customSort | boolean | - | Whether to use the default sorting or a custom one using sortFunction. | | selectionMode | "single" \| "multiple" \| "checkbox" | - | Specifies the selection mode, valid values are "single" and "multiple". | | contextMenuSelection | any | - | Selected row with a context menu. | | dataKey | string | - | A property to uniquely identify a record in data. | | metaKeySelection | boolean | - | Defines whether metaKey is should be considered for the selection. On touch enabled devices, metaKeySelection is turned off automatically. | | compareSelectionBy | "equals" \| "deepEquals" | - | Algorithm to define if a row is selected, valid values are "equals" that compares by reference and "deepEquals" that compares all fields. | | rowHover | boolean | - | Adds hover effect to rows without the need for selectionMode. | | loading | boolean | - | Displays a loader to indicate data load is in progress. | | loadingIcon | string | - | The icon to show while indicating data load is in progress. | | showLoader | boolean | - | Whether to show the loading mask when loading property is true. | | scrollable | boolean | - | When specified, enables horizontal and/or vertical scrolling. | | scrollHeight | string | - | Height of the scroll viewport in fixed pixels or the "flex" keyword for a dynamic size. | | virtualScroll | boolean | - | Whether the data should be loaded on demand during scroll. | | virtualScrollItemSize | number | - | Height of a row to use in calculations of virtual scrolling. | | virtualScrollOptions | ScrollerOptions | - | Whether to use the scroller feature. The properties of scroller component can be used like an object in it. | | virtualScrollDelay | number | - | The delay (in milliseconds) before triggering the virtual scroll. This determines the time gap between the user's scroll action and the actual rendering of the next set of items in the virtual scroll. | | frozenWidth | string | - | Width of the frozen columns container. | | frozenColumns | any | - | An array of objects to represent dynamic columns that are frozen. | | resizableColumns | boolean | - | When enabled, columns can be resized using drag and drop. | | columnResizeMode | "fit" \| "expand" | - | Defines whether the overall table width should change on column resize, valid values are "fit" and "expand". | | reorderableColumns | boolean | - | When enabled, columns can be reordered using drag and drop. | | contextMenu | any | - | Local ng-template varilable of a ContextMenu. | | rowTrackBy | Function | - | Function to optimize the dom operations by delegating to ngForTrackBy, default algorithm checks for object identity. | | filtersInput | { [s: string]: FilterMetadata } | - | An array of FilterMetadata objects to provide external filters. | | globalFilterFields | string[] | - | An array of fields as string to use in global filtering. | | filterDelay | number | - | Delay in milliseconds before filtering the data. | | filterMode | "lenient" \| "strict" | - | Mode for filtering valid values are "lenient" and "strict". Default is lenient. | | filterLocale | string | - | Locale to use in filtering. The default locale is the host environment's current locale. | | paginatorLocale | string | - | Locale to be used in paginator formatting. | | totalRecordsInput | number | - | Number of total records, defaults to length of value when not defined. | | sortFieldInput | string | - | Name of the field to sort data by default. | | sortOrderInput | number | 1 | Order to sort when default sorting is enabled. | | multiSortMetaInput | SortMeta[] | null | An array of SortMeta objects to sort the data by default in multiple sort mode. | | selectionInput | any | null | Selected row in single mode or an array of values in multiple mode. | | valueInput | TreeNode[] | null | An array of objects to display. | | selectionKeysInput | any | - | A map of keys to control the selection state. | | showGridlines | boolean | false | Whether to show grid lines between cells. | ### Emits | Name | Parameters | Description | |------|------------|-------------| | selectionChange | value: TreeTableNode | | | caption | TemplateRef | | | header | TemplateRef | | | body | TemplateRef | | | footer | TemplateRef | | | summary | TemplateRef | | | emptymessage | TemplateRef | | | paginatorleft | TemplateRef | | | paginatorright | TemplateRef | | | paginatordropdownitem | TemplateRef | | | frozenheader | TemplateRef | | | frozenbody | TemplateRef | | | frozenfooter | TemplateRef | | | frozencolgroup | TemplateRef | | | loadingicon | TemplateRef | | | reorderindicatorupicon | TemplateRef | | | reorderindicatordownicon | TemplateRef | | | sorticon | TemplateRef | | | checkboxicon | TemplateRef | | | headercheckboxicon | TemplateRef | | | togglericon | TemplateRef | | | paginatorfirstpagelinkicon | TemplateRef | | | paginatorlastpagelinkicon | TemplateRef | | | paginatorpreviouspagelinkicon | TemplateRef | | | paginatornextpagelinkicon | TemplateRef | | | loader | TemplateRef | | ### Methods | Name | Parameters | Return Type | Description | |------|------------|-------------|-------------| | resetScrollTop | | void | Resets scroll to top. | | scrollToVirtualIndex | index: number | void | Scrolls to given index when using virtual scroll. | | scrollTo | options: ScrollToOptions | void | Scrolls to given index. | | reset | | void | Clears the sort and paginator state. | ## Pass Through Options | Name | Type | Description | |------|------|-------------| | host | PassThroughOption | Used to pass attributes to the host's DOM element. | | root | PassThroughOption | Used to pass attributes to the root's DOM element. | | loading | PassThroughOption | Used to pass attributes to the loading's DOM element. | | mask | PassThroughOption | Used to pass attributes to the mask's DOM element. | | loadingIcon | PassThroughOption | Used to pass attributes to the loading icon's DOM element. | | header | PassThroughOption | Used to pass attributes to the header's DOM element. | | pcPaginator | PaginatorPassThrough | Used to pass attributes to the Paginator component. | | wrapper | PassThroughOption | Used to pass attributes to the wrapper's DOM element. | | table | PassThroughOption | Used to pass attributes to the table's DOM element. | | thead | PassThroughOption | Used to pass attributes to the thead's DOM element. | | tbody | PassThroughOption | Used to pass attributes to the tbody's DOM element. | | tfoot | PassThroughOption | Used to pass attributes to the tfoot's DOM element. | | footer | PassThroughOption | Used to pass attributes to the footer's DOM element. | | scrollableWrapper | PassThroughOption | Used to pass attributes to the scrollable wrapper's DOM element. | | scrollableView | PassThroughOption | Used to pass attributes to the scrollable container's DOM element. | | scrollableHeader | PassThroughOption | Used to pass attributes to the scrollable header's DOM element. | | scrollableHeaderBox | PassThroughOption | Used to pass attributes to the scrollable header box's DOM element. | | scrollableHeaderTable | PassThroughOption | Used to pass attributes to the scrollable header table's DOM element. | | virtualScroller | VirtualScrollerPassThrough | Used to pass attributes to the Scroller component. | | scrollableBody | PassThroughOption | Used to pass attributes to the scrollable body's DOM element. | | scrollableFooter | PassThroughOption | Used to pass attributes to the scrollable footer's DOM element. | | scrollableFooterBox | PassThroughOption | Used to pass attributes to the scrollable footer box's DOM element. | | scrollableFooterTable | PassThroughOption | Used to pass attributes to the scrollable footer table's DOM element. | | columnResizerHelper | PassThroughOption | Used to pass attributes to the column resizer helper's DOM element. | | reorderIndicatorUp | PassThroughOption | Used to pass attributes to the reorder indicator up's DOM element. | | reorderIndicatorDown | PassThroughOption | Used to pass attributes to the reorder indicator down's DOM element. | | sortableColumn | PassThroughOption | Used to pass attributes to the sortable column's DOM element. | | sortableColumnIcon | PassThroughOption | Used to pass attributes to the sortable column icon's DOM element. | | pcSortableColumnBadge | BadgePassThrough | Used to pass attributes to the Badge component for sortable column. | | row | PassThroughOption | Used to pass attributes to the row's DOM element. | | pcRowCheckbox | CheckboxPassThrough | Used to pass attributes to the Checkbox component for row. | | pcHeaderCheckbox | CheckboxPassThrough | Used to pass attributes to the Checkbox component for header. | | cellEditor | PassThroughOption | Used to pass attributes to the cell editor's DOM element. | | rowToggleButton | PassThroughOption | Used to pass attributes to the row toggle button's DOM element. | | toggler | PassThroughOption | Used to pass attributes to the toggler's DOM element. | ## Theming ### CSS Classes | Class | Description | |-------|-------------| | p-treetable | Class name of the root element | | p-treetable-loading | Class name of the loading element | | p-treetable-mask | Class name of the mask element | | p-treetable-loading-icon | Class name of the loading icon element | | p-treetable-header | Class name of the header element | | p-treetable-paginator-[position] | Class name of the paginator element | | p-treetable-table-container | Class name of the table container element | | p-treetable-table | Class name of the table element | | p-treetable-thead | Class name of the thead element | | p-treetable-column-resizer | Class name of the column resizer element | | p-treetable-column-title | Class name of the column title element | | p-treetable-sort-icon | Class name of the sort icon element | | p-treetable-sort-badge | Class name of the sort badge element | | p-treetable-tbody | Class name of the tbody element | | p-treetable-node-toggle-button | Class name of the node toggle button element | | p-treetable-node-toggle-icon | Class name of the node toggle icon element | | p-treetable-node-checkbox | Class name of the node checkbox element | | p-treetable-empty-message | Class name of the empty message element | | p-treetable-tfoot | Class name of the tfoot element | | p-treetable-footer | Class name of the footer element | | p-treetable-column-resize-indicator | Class name of the column resize indicator element | | p-treetable-wrapper | Class name of the wrapper element | | p-treetable-scrollable-wrapper | Class name of the scrollable wrapper element | | p-treetable-scrollable-view | Class name of the scrollable view element | | p-treetable-frozen-view | Class name of the frozen view element | | p-treetable-column-resizer-helper | Class name of the column resizer helper element | | p-treetable-reorder-indicator-up | Class name of the reorder indicator up element | | p-treetable-reorder-indicator-down | Class name of the reorder indicator down element | | p-treetable-scrollable-header | Class name of the scrollable header element | | p-treetable-scrollable-header-box | Class name of the scrollable header box element | | p-treetable-scrollable-header-table | Class name of the scrollable header table element | | p-treetable-scrollable-body | Class name of the scrollable body element | | p-treetable-scrollable-footer | Class name of the scrollable footer element | | p-treetable-scrollable-footer-box | Class name of the scrollable footer box element | | p-treetable-scrollable-footer-table | Class name of the scrollable footer table element | | p-sortable-column-icon | Class name of the sortable column icon element | ### Design Tokens | Token | CSS Variable | Description | |-------|--------------|-------------| | treetable.transition.duration | --p-treetable-transition-duration | Transition duration of root | | treetable.border.color | --p-treetable-border-color | Border color of root | | treetable.header.background | --p-treetable-header-background | Background of header | | treetable.header.border.color | --p-treetable-header-border-color | Border color of header | | treetable.header.color | --p-treetable-header-color | Color of header | | treetable.header.border.width | --p-treetable-header-border-width | Border width of header | | treetable.header.padding | --p-treetable-header-padding | Padding of header | | treetable.header.cell.background | --p-treetable-header-cell-background | Background of header cell | | treetable.header.cell.hover.background | --p-treetable-header-cell-hover-background | Hover background of header cell | | treetable.header.cell.selected.background | --p-treetable-header-cell-selected-background | Selected background of header cell | | treetable.header.cell.border.color | --p-treetable-header-cell-border-color | Border color of header cell | | treetable.header.cell.color | --p-treetable-header-cell-color | Color of header cell | | treetable.header.cell.hover.color | --p-treetable-header-cell-hover-color | Hover color of header cell | | treetable.header.cell.selected.color | --p-treetable-header-cell-selected-color | Selected color of header cell | | treetable.header.cell.gap | --p-treetable-header-cell-gap | Gap of header cell | | treetable.header.cell.padding | --p-treetable-header-cell-padding | Padding of header cell | | treetable.header.cell.focus.ring.width | --p-treetable-header-cell-focus-ring-width | Focus ring width of header cell | | treetable.header.cell.focus.ring.style | --p-treetable-header-cell-focus-ring-style | Focus ring style of header cell | | treetable.header.cell.focus.ring.color | --p-treetable-header-cell-focus-ring-color | Focus ring color of header cell | | treetable.header.cell.focus.ring.offset | --p-treetable-header-cell-focus-ring-offset | Focus ring offset of header cell | | treetable.header.cell.focus.ring.shadow | --p-treetable-header-cell-focus-ring-shadow | Focus ring shadow of header cell | | treetable.column.title.font.weight | --p-treetable-column-title-font-weight | Font weight of column title | | treetable.column.title.font.size | --p-treetable-column-title-font-size | Font size of column title | | treetable.row.background | --p-treetable-row-background | Background of row | | treetable.row.hover.background | --p-treetable-row-hover-background | Hover background of row | | treetable.row.selected.background | --p-treetable-row-selected-background | Selected background of row | | treetable.row.color | --p-treetable-row-color | Color of row | | treetable.row.hover.color | --p-treetable-row-hover-color | Hover color of row | | treetable.row.selected.color | --p-treetable-row-selected-color | Selected color of row | | treetable.row.focus.ring.width | --p-treetable-row-focus-ring-width | Focus ring width of row | | treetable.row.focus.ring.style | --p-treetable-row-focus-ring-style | Focus ring style of row | | treetable.row.focus.ring.color | --p-treetable-row-focus-ring-color | Focus ring color of row | | treetable.row.focus.ring.offset | --p-treetable-row-focus-ring-offset | Focus ring offset of row | | treetable.row.focus.ring.shadow | --p-treetable-row-focus-ring-shadow | Focus ring shadow of row | | treetable.body.cell.border.color | --p-treetable-body-cell-border-color | Border color of body cell | | treetable.body.cell.padding | --p-treetable-body-cell-padding | Padding of body cell | | treetable.body.cell.gap | --p-treetable-body-cell-gap | Gap of body cell | | treetable.body.cell.selected.border.color | --p-treetable-body-cell-selected-border-color | Selected border color of body cell | | treetable.body.cell.font.weight | --p-treetable-body-cell-font-weight | Font weight of body cell | | treetable.body.cell.font.size | --p-treetable-body-cell-font-size | Font size of body cell | | treetable.footer.cell.background | --p-treetable-footer-cell-background | Background of footer cell | | treetable.footer.cell.border.color | --p-treetable-footer-cell-border-color | Border color of footer cell | | treetable.footer.cell.color | --p-treetable-footer-cell-color | Color of footer cell | | treetable.footer.cell.padding | --p-treetable-footer-cell-padding | Padding of footer cell | | treetable.column.footer.font.weight | --p-treetable-column-footer-font-weight | Font weight of column footer | | treetable.column.footer.font.size | --p-treetable-column-footer-font-size | Font size of column footer | | treetable.footer.background | --p-treetable-footer-background | Background of footer | | treetable.footer.border.color | --p-treetable-footer-border-color | Border color of footer | | treetable.footer.color | --p-treetable-footer-color | Color of footer | | treetable.footer.border.width | --p-treetable-footer-border-width | Border width of footer | | treetable.footer.padding | --p-treetable-footer-padding | Padding of footer | | treetable.column.resizer.width | --p-treetable-column-resizer-width | Width of column resizer | | treetable.resize.indicator.width | --p-treetable-resize-indicator-width | Width of resize indicator | | treetable.resize.indicator.color | --p-treetable-resize-indicator-color | Color of resize indicator | | treetable.sort.icon.color | --p-treetable-sort-icon-color | Color of sort icon | | treetable.sort.icon.hover.color | --p-treetable-sort-icon-hover-color | Hover color of sort icon | | treetable.sort.icon.size | --p-treetable-sort-icon-size | Size of sort icon | | treetable.loading.icon.size | --p-treetable-loading-icon-size | Size of loading icon | | treetable.node.toggle.button.hover.background | --p-treetable-node-toggle-button-hover-background | Hover background of node toggle button | | treetable.node.toggle.button.selected.hover.background | --p-treetable-node-toggle-button-selected-hover-background | Selected hover background of node toggle button | | treetable.node.toggle.button.color | --p-treetable-node-toggle-button-color | Color of node toggle button | | treetable.node.toggle.button.hover.color | --p-treetable-node-toggle-button-hover-color | Hover color of node toggle button | | treetable.node.toggle.button.selected.hover.color | --p-treetable-node-toggle-button-selected-hover-color | Selected hover color of node toggle button | | treetable.node.toggle.button.size | --p-treetable-node-toggle-button-size | Size of node toggle button | | treetable.node.toggle.button.border.radius | --p-treetable-node-toggle-button-border-radius | Border radius of node toggle button | | treetable.node.toggle.button.focus.ring.width | --p-treetable-node-toggle-button-focus-ring-width | Focus ring width of node toggle button | | treetable.node.toggle.button.focus.ring.style | --p-treetable-node-toggle-button-focus-ring-style | Focus ring style of node toggle button | | treetable.node.toggle.button.focus.ring.color | --p-treetable-node-toggle-button-focus-ring-color | Focus ring color of node toggle button | | treetable.node.toggle.button.focus.ring.offset | --p-treetable-node-toggle-button-focus-ring-offset | Focus ring offset of node toggle button | | treetable.node.toggle.button.focus.ring.shadow | --p-treetable-node-toggle-button-focus-ring-shadow | Focus ring shadow of node toggle button | | treetable.paginator.top.border.color | --p-treetable-paginator-top-border-color | Border color of paginator top | | treetable.paginator.top.border.width | --p-treetable-paginator-top-border-width | Border width of paginator top | | treetable.paginator.bottom.border.color | --p-treetable-paginator-bottom-border-color | Border color of paginator bottom | | treetable.paginator.bottom.border.width | --p-treetable-paginator-bottom-border-width | Border width of paginator bottom | ---