website·Indexed 34 days ago
https://v18.primeng.orgDocumentation for PrimeNG v18, a comprehensive UI component library for Angular. Includes guides on application-wide configuration, migration, and detailed API references for components such as Drawer, Paginator, Dialog, Menu, and Stepper, as well as theming and styling options.
import { KeyFilterModule } from 'primeng/keyfilter';PrimeNG uses a design-agnostic architecture where styling is decoupled from components via a theme consisting of a base (CSS rules with variables) and a preset (design tokens). Design tokens are organized into three tiers:
blue-50 to blue-900).primary.color), which map to primitive tokens. The colorScheme group allows defining different tokens for light and dark modes.button.background) that map to semantic tokens.Best Practice: Use primitive tokens for core palettes, semantic tokens for common design elements (focus rings, surfaces), and component tokens only for specific component overrides. Avoid using CSS style classes for overrides; use design tokens instead.
theme.css and primeng/resources paths no longer exist. All imports of these assets must be removed. Custom themes created for v17 must be recreated using the new Styled Mode APIs.SelectModule from the primeng/select package.import { SelectModule } from 'primeng/select';The Select component supports comprehensive keyboard navigation across three states:
Closed State:
Tab: Focuses the select element.Space / Down Arrow: Opens popup and focuses the selected option (or first option if none selected).Up Arrow: Opens popup and focuses the selected option (or last option if none selected).Popup State:
Tab / Shift + Tab: Cycles focus through focusable elements in the popup.Enter / Space: Selects the focused option and closes the popup.Escape: Closes the popup and returns focus to the select element.Down Arrow / Up Arrow: Navigates between options.Home / End: Moves focus to the first or last option (unless editable, then moves input cursor).Left Arrow / Right Arrow: (Editable mode only) Moves the input cursor.Printable Characters: (Non-editable mode) Jumps to the option starting with the typed characters.Filter Input State:
Enter / Escape: Closes the popup and returns focus to the select element.close method on the DynamicDialogRef. Any value passed to close() will be emitted via the onClose observable of the reference in the caller component.// In the caller component
this.ref = this.dialogService.open(ProductListDemo, { header: 'Select a Product' });
this.ref.onClose.subscribe((product: Product) => {
if (product) {
console.log('Product Selected:', product.name);
}
});
// Inside the loaded component (ProductListDemo)
// Inject DynamicDialogRef in constructor
constructor(public ref: DynamicDialogRef) {}
selectProduct(product: Product) {
this.ref.close(product); // Pass data back to caller
}TerminalModule from the primeng/terminal package.import { TerminalModule } from 'primeng/terminal';ng-template with pTemplate="input". The template provides access to the current token value, the index of the token, and a set of event handlers (input, keydown, focus, blur, paste) that must be bound to the custom input element to maintain component functionality.<p-inputotp [(ngModel)]="value">
<ng-template pTemplate="input" let-token let-events="events" let-index="index">
<input
class="custom-otp-input"
(input)="events.input($event)"
(keydown)="events.keydown($event)"
type="text"
[attr.value]="token"
[maxLength]="1" />
</ng-template>
</p-inputotp>GalleriaModule from the primeng/galleria package.import { GalleriaModule } from 'primeng/galleria';ng-template. By targeting specific template identifiers (such as #dropdownicon for the Select component), developers can replace default icons with Material Icons, Font Awesome, inline SVGs, or image files.