PrimeNG

UI Components for Angular

See PrimeNG homepage for live showcase and documentation.

PrimeNG is a collection of rich UI components for Angular. All widgets are open source and free to use under MIT License. PrimeNG is developed by PrimeTek Informatics, a vendor with years of expertise in developing open source UI solutions. For project news and updates, please follow us on twitter and visit our blog.

• 80+ Components: The most complete set of native widgets featuring 80+ easy to use components for all your UI requirements.

• Open Source: Hosted at GitHub, all widgets are open source and free to use under MIT license. Feel the power of open source.

• Productivity: Allocate your valuable time on business logic rather than dealing with the complex user interface requirements.

• Themes: Don't get tied up in just one look&feel. Choose from a variety of options including material and flat design.

• Templates: Professionally designed highly customizable native Angular CLI application templates to get started in no time.

• Mobile: Enhanced mobile user experience with touch optimized responsive design elements.

---

Download

PrimeNG is available at NPM, if you have an existing application run the following command to download it to your project.

npm install primeng --save
npm install primeicons --save

Angular CLI Integration

Add PrimeNG and PrimeIcons as a dependencies.

"dependencies": {
  //...
  "primeng": "^7.0.0",
  "primeicons": "^1.0.0"
},

Configure required styles at the styles section, example below uses the Nova Light theme.

"styles": [
  "node_modules/primeng/resources/themes/nova-light/theme.css",
  "node_modules/primeng/resources/primeng.min.css",
  "node_modules/primeicons/primeicons.css",
  //...
],

That is all, you may now import PrimeNG components, for a working example visit the PrimeNG CLI QuickStart sample at GitHub.

Compilation step:

Reference

• https://forum.primefaces.org/viewtopic.php?t=48722
• https://stackoverflow.com/questions/41310398/primeng-how-to-pack-or-build-the-project-after-making-changes
• Publish package: https://zellwk.com/blog/publish-to-npm/

Add below command in package.json scripts "build-components": "ngc -p tsconfig-release.json", "build-assets": "gulp build-assets", "build-styles": "node-sass src/assets/components -o src/assets/components", "build-exports": "gulp build-exports", "build-redistribute": "npm run build-components && npm run build-assets && npm run build-styles && npm run build-exports"

Compilation: execute below commands:

• npm run build-redistributable or
• npm run build-components
• npm run build-assets
• npm run build-styles
• npm run build-exports

Then copy package.json, components, resources folder into dist folder. in command prompt go to dist folder. execute below command to publish in npm registry

• npm login
• npm publish --access public