PrimeNG 10 Begins
PrimeTek is thrilled to announce PrimeNG X (v10) that utilizes the brand new PrimeOne Design Architecture, new free Boostrap, Material and PrimeOne Themes with Dark mode alternatives, modern icons via PrimeIcons 4.0, PrimeFlex CSS utilities, significantly improved performance thanks to migration to the OnPush ChangeDetectionStrategy, lighter CSS by using the Angular style apis and all-new Demos and Showcase.
PrimeNG X has full support for Angular 10 and it is the suggested version when developing with Angular 10.
Faster with OnPush Change Detection
Majority of the components are now using OnPush change detection by default that significantly increases the performance.
Lighter with Smaller CSS
PrimeOne Design allows PrimeNG to use the Angular style apis instead so instead of adding the css of the whole suite, only the necessary css is added on demand with v10. primeng.css is still required but size of it is tiny compared to previos version.
Stunning with PrimeOne
PrimeOne is a design architecture created by PrimeTek, PrimeVue is the first library that uses this system and PrimeNG is the second that will be followed by PrimeReact. PrimeOne is design agnostic and to show its full potential, PrimeNG X provides free Bootstrap and Material themes in addition to the PrimeOne Core themes such as Saga, Vela and Arya. Dark mode is also now included as a standard option. Older Nova, Luna and Rhea themes are reimplemented with PrimeOne for backward compatibility and marked as legacy.
PrimeIcons 4.0 provides a brand new redesigned icon suite to be the perfect companion for the components.
Overlay animations have been updated for better UX.
PrimeOne SASS API has been documented and later this week we’ll introduce the new visual theme designer just like PrimeVue already has.
PrimeFlex CSS Utilities
PrimeFlex is expanded to a CSS utility library now and offers various utilities including a Grid System, Flexbox, Elevation, Display, Spacing and more. You’ll probably not need another library like bootstrap now with the new PrimeFlex 2.0.
Content Projection vs Templating
Projection with ng-content (e.g. p-header, p-footer) does not run angular lifecycle methods so components have been migrated to ng-template with pTemplate directive instead. Content projection is still supported however in a future release like PrimeNG 12, we’ll consider removing them.
All showcase demos have been retouched to be more stylish and present new example data.
Feature wise, PrimeNG X is backward compatible however due to migration to PrimeOne, styling cannot be. So if you have overridden PrimeNG Classes, they need to be adjusted for PrimeOne.
Themes of premium templates do not support PrimeNG X and once PrimeNG X goes final in two weeks, we’ll start rolling the updates for v10 support.
View the changelog for more information.
PrimeNG is licensed under MIT and free to download at NPM.
Release candidate stage is planned for 2 weeks and in mid august, we’ll release PrimeNG X final. Until then, we’ll review the community issue tracker and the pull requests. In addition, documentation and stackblitz examples will be updated.
Sol Rodriguez4 August 2020 at 08:14
Hello, I just ordered a template today and didn’t see this announcement until after I ordered. Will I be able to update my order to Prime NG X? Should I wait to begin my project once the new template is available?
Cagatay Civici5 August 2020 at 10:55
You may just use PrimeNG 9 now with the template, develop the functionality with the 9 theme and then when we do the update of the templates, upgrade to PrimeNG X and update the theme css files.
Doug M Weems5 August 2020 at 02:15