Migration to v22
Migration guide to PrimeNG v22.
Overview #
PrimeNG v22 is the first release under the PrimeUI umbrella. Licensing moves to a dual Community/Commercial model. Read the full story for the background and road ahead.
PRO Suite
PrimeUI PRO is the new enterprise tier from PrimeTek, expanding the suite with production-ready components. At launch, PrimeUI PRO components are available for Vue. Angular, React, Lit, and Blazor versions will follow as the product line expands.
- Scheduler
- Charts
- Text Editor
- Task Board
- Diagram, on the roadmap
- DataGrid, on the roadmap
- Gantt Chart, on the roadmap
- PDF Viewer, on the roadmap
New Components
v22 introduces a fresh set of components:
Enhancements
Several existing parts have also been reworked:
- Modernized the codebase with new Angular APIs.
- Updated test suite with increased coverage.
- Carousel rebuilt around a compound API.
- Menu now supports multi-level navigation.
- Toast ships with new entry and exit animations.
- InputMask is now a directive rather than a component.
- Wide-ranging defect fixes across the suite.
- New documentation and demos.
16px Base
PrimeNG sizes its components in rem units relative to the document root font size, now assumed to be 16px to match the browser default. Earlier versions assumed 14px, so every preset also ships a compat variant calibrated for a 14px root to keep existing layouts intact. See Base Font Size for technical details.
Deprecations #
The following items are marked as deprecated in v22 and will be removed in a future version.
| API | Deprecated Since | Replacement | Removal | Status |
|---|---|---|---|---|
| MultiSelect | v22 | Select component with multiple property | v24 | |
| PanelMenu | v22 | Menu component with toggleable option | v24 | |
| pButtonIcon and pButtonLabel directives | v21 | Place the icon and label directly inside the [pButton] host element. Use iconOnly prop for icon-only buttons. | v24 | |
| Password component | v22 | pInputPassword directive | v24 | |
| Galleria | v22 | Gallery component | v24 | |
| ColorPicker | v22 | InputColor component | v24 | |
| InputMask component | v22 | pInputMask directive | v24 | |
| Chart | v22 | PrimeUI PRO Charts | v24 | |
| Image | v22 | Gallery component | v24 | |
| Editor | v22 | PrimeUI PRO Editor | v24 | |
| AutoComplete multiple property | v22 | InputTags component | v24 | |
| primeng/icons package | v22 | SVG icons via PrimeIcons | v24 | |
| ScrollPanel | v22 | ScrollArea component | v24 | |
| ImageCompare | v22 | Compare component | v24 | |
| Slider animate property | v22 | No longer functional | v24 | |
| Tabs scrollable property | v22 | Scrolling is now the default behavior | v24 | |
| Carousel data-driven (model) usage | v22 | Compound API with p-carousel-content, p-carousel-item and p-carousel-indicators. | v24 |
Removals #
The following APIs that were deprecated in v20 and v21 are now removed in v22.
| API | Deprecated Since | Replacement | Status |
|---|---|---|---|
| @primeng/themes | v20 | @primeuix/themes | |
| pTemplate | v20 | ng-template with a template reference variable | |
| styleClass *(for host enabled components) | v20 | class | |
| Global inputStyle config | v20 | inputVariant | |
| CamelCase Selectors | v20 | Kebab case | |
| pButton iconPos, loadingIcon, icon and label properties | v20 | pButtonIcon and pButtonLabel directives | |
| pButton buttonProps property | v20 | Use button properties directly on the element | |
| p-button badgeClass property | v20 | badgeSeverity property | |
| AutoComplete minLength property | v20 | minQueryLength | |
| OrganizationChart preserveSpace property | v20 | Obsolete property, had no use | |
| Paginator dropdownAppendTo property | v20 | appendTo | |
| Message text and escape properties | v20 | Content projection | |
| Password maxLength property | v20 | maxlength property | |
| TreeSelect containerStyle/containerStyleClass properties | v20 | style and class | |
| Table responsiveLayout property | v20 | Always defaults to scroll, stack mode needs custom implementation | |
| TreeSelect default template | v20 | value template | |
| pBadge directive | v20 | OverlayBadge component | |
| clearFilterIcon template of Table | v20 | Obsolete, not utilized | |
| Inplace closable property | v20 | Use templating with closeCallback | |
| showTransitionOptions | v21 | Native CSS animations | |
| hideTransitionOptions | v21 | Native CSS animations | |
| Directive PT attribute names e.g. ptInputText | v21 | PT suffix at the end e.g. pInputTextPT | |
| contextMenuSelectionMode | v21 | "joint" mode removed in favor of "separate". Applies to Tree, TreeTable and Table. |