Skip to content

Migration Guide

Jump to bottom
Cagatay Civici edited this page Nov 18, 2020 · 22 revisions

11.0.0

Breaking Changes

  • PrimeIcons should be upgraded to 4.1.0 as components like table utilize new icons in the library.
  • VirtualScroller implementation of Table is reimplemented and clearCache function is removed as caching is left to the page author instead.
  • locale property functionality of Calendar is removed in favor of the new global i18n API.
  • filterMode of Listbox is renamed to filterMatchMode for consistency.
  • Pass the option as a template variable in Select Components without wrapping to SelectItem.

Before

<p-dropdown [options]="options" [(ngModel)]="modelValue">
    <ng-template let-option pTemplate="item">
          {{option.value.propName}}
    </ng-template>
</p-dropdown>

After

<p-dropdown [options]="options" [(ngModel)]="modelValue">
    <ng-template let-option pTemplate="item">
          {{option.propName}}
    </ng-template>
</p-dropdown>

Notes

  • yes-no button order in confirm dialog is changed to align it with other Prime UI libraries, it is possible to reverse it with css e.g. flex order.
  • PrimeIcons should be upgraded to 4.1.0 as components like table utilize new icons in the library.

10.0.0

"PrimeNG 10 Migration Guide"

PrimeNG 10 is the most important version in the history of the project. A new design system called PrimeOne is integrated, ChangeDetection strategy is changed to OnPush, PrimeIcons have been redesigned for 4.0, PrimeFlex CSS utilities have been updated with new helpers and more. As a result, although prior versions were a drop-in replacement, PrimeNG team has decided to include all major changes to V10 so that future versions can offer seamless updating experience.

Breaking Changes

  • Migration to PrimeOne Design renames style classes, please see the PrimeOne Migration page for details.
  • PrimeIcons 4.0 should be used with PrimeNG 10 themes, older versions of PrimeIcons are not supported as they are redesigned with new canvas sizes.
  • Modal option removed from toast.
  • primeng/primeng were deprecated in v5 and removed in v10.
  • Grid CSS was deprecated in 2018 and removed in v10 in favor of PrimeFlex.
  • Nova themes have been renamed, nova-light to nova, nova-dark to nova-alt and nova-colored to nova-accent.

Deprecations

  • Responsive options deprecated from components like Table in favor of custom implementations.
  • Label of RadioButton and Checkbox is deprecated, provide your own label instead.
  • MultiSelect defaultLabel is deprecated in favor of placeholder
  • Slide Menu is deprecated
  • Lightbox is deprecated in favor of Galleria
  • Spinner is deprecated in favor of InputNumber
  • p-header and p-footer are deprecated in favor or ng-template pTemplate="header or footer."

9.0.0

  • Drop-in replacement.

8.0.0

  • Drop-in replacement.

7.0.0

  • Drop-in replacement.

6.0.1

  • Schedule is updated to FullCalendar 4.0.0 as a result jQuery is no longer required for p-schedule.

6.0

Major changes include the new TreeTable and PrimeIcons to replace font-awesome.

  • TreeTable is reimplemented from scratch and it is not backward compatible. Refer to the TreeTable on getting started with the new API. If you have worked with p-table before, it is almost identical.
  • utc property functionality is removed from Calendar component, instead to work with utc or other timezones, use onValueChange property to convert the provided date to your preferred timezone.
  • autoAlign property of Dialog is removed, visit the dynamic content section at dialog documentation for details.

PrimeIcons

PrimeNG components now internally use PrimeIcons library, the official icons suite from PrimeTek. Previous releases depend on font-awesome, with 6.0 there is no such dependency. Visit PrimeIcons documentation for more information.

PrimeIcons is available at npm, run the following command to download it to your project.

npm install primeicons --save

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.

<i class="pi pi-check"></i>
<i class="pi pi-times"></i>

Using an icon on a button is simple as;

<button pButton class="pi pi-check"></button>

Using Font-Awesome

Prior to 6.0, font-awesome icons were provided only with the icon name without the .fa addon such as;

<button pButton class="fa-check"></button>

In 6.0, add .fa prefix to keep continue using font-awesome.

<button pButton class="fa fa-check"></button>

This change also allows using any other icon library, you may also mix different libraries like PrimeIcons, FontAwesome and more.

Icons of Button and Menu components in your application need to be updated to include .fa prefix when migrating to 6.0.

Clone this wiki locally