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
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.
PrimeNG is a rich set of open source native Angular UI components.
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
new-cmp
folder with the .html
and .ts
that you need.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
Update for PrimeNG 6
Follow top answers here but also need to add primeicons dependency. See my answer here for more info
yarn add primeicons
vendor.css
add @import '~primeicons/primeicons.css';
(not sure if import order matters)If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With