Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Steps to integrate PrimeNG with JHipster

We have been trying to incorporate PrimeNG components into a JHipster (angular 4) generated project with no success. After download and install PrimeNG into our project, we are able to import classes but when we include the corresponding tags into templates nothing is drawn. We have tested several of the PrimeNG components. Also we have done the imports in app.module, etc. I would like to be more concrete, but no error is displayed anywhere. Do you have any hint on how work with PrimeNG and JHipster together? Thanks

like image 989
Andrés Quesada Avatar asked May 24 '17 15:05

Andrés Quesada


People also ask

What are PrimeNG components?

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.

What is PrimeNG?

PrimeNG is a rich set of open source native Angular UI components.


2 Answers

The following steps worked for us.

1- Add dependecies with yarn

yarn add primeng
yarn add @angular/animations

2- Created new component with ng cli, standing on the same folder where you want to create the component run

ng g component new-cmp

This will

  • Create a new-cmp folder with the .html and .ts that you need.
  • Import and declare the component in the closest module, for example home.module.ts

3- Add the imports of the prime components you want to use along with the BrowserAnimationsModule on the module where the new component was declared, in our case home.module.ts for example:

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {AccordionModule, RatingModule, CalendarModule, ButtonModule } from 'primeng/primeng';  

AND add them to the imports array inside the @NgModule

4- Go to src/main/webapp/content/scss/vendor.scss and import the styles, like Marcin Krajewski suggests:

@import '~primeng/resources/primeng.min.css';
@import '~primeng/resources/themes/bootstrap/theme.css';

5- Add a prime component for testing in the html of the created component, for example <button pButton type="button" label="Click"></button>

6- Run yarn run webpack:build so the apps picks up the changes from vendors.scss

7- Run yarn start and test it out!

UPDATE Jhipster version: 4.5.2

like image 67
cjmm Avatar answered Oct 16 '22 16:10

cjmm


Update for PrimeNG 6

Follow top answers here but also need to add primeicons dependency. See my answer here for more info

  • Run cmd yarn add primeicons
  • In vendor.css add @import '~primeicons/primeicons.css'; (not sure if import order matters)
like image 29
slyFox Avatar answered Oct 16 '22 15:10

slyFox