Top

PrimeNG 10 is here

PrimeNG 10 is here

PrimeTek is thrilled to announce PrimeNG X (v10) that utilizes the brand new PrimeOne Design Architecture, new free Bootstrap, 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 yet, we’ll now start working on updating them to PrimeNG X.

Changelog

View the changelog for more information.

Download

PrimeNG is licensed under MIT and free to download at NPM.

Share
No Comments

Post a Comment