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.
Angular 10
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.
Modern Icons
PrimeIcons 4.0 provides a brand new redesigned icon suite to be the perfect companion for the components.
Animations
Overlay animations have been updated for better UX.
Designer v10
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.
New Demos
All showcase demos have been retouched to be more stylish and present new example data.
Backward Compatibility
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.
Premium Templates
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.
Changelog
View the changelog for more information.
Download
PrimeNG is licensed under MIT and free to download at NPM.
Roadmap
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.