Search code examples
jhipsterprimengbootstrap-material-design

UI library for jhipster

I want to create an rich UI web-app powered by awesome jhipster. I have been working with default jipster app and I can see it is using ng-bootstrap by default.

I need to use advance components like "chips", "tree" etc which are not available out of box in ng-bootstrap but are available in "prime-ng". So I did a little research, and found that there is a module in jhipster for "primeng" and also for "Bootstrap Material Design". I have tried "prime-ng" but do not like it very much as during installation it ask for theme and I can not change it later.

For "Bootstrap Material Design" the jhipster module is old and I am not sure if it works well with angular 6 and jhipster > 5.x.

My questions are:

  1. Can I use "Bootstrap Material Design" with ng-bootstrap (default of jhipster)? Is there any conflict betwen them??

  2. If I go with "primeng", how can I have a preview of theme I am going to install?? Can I install it without theme?? Is there any conflict between ng-bootstrap and primeng ?? Can I update the theme?

  3. Is there any other UI library officially supported by Jhipster??

Thanks

---- Update -----

This is the error when use jhipster module for bootstrap material

enter image description here

I tried install 

npm install generator-jhipster:modules

but same error

---------------- Update -------------------

This is the error I have with primeng. There is someproblem with css. All buttons look same. why???

enter image description here

This is my vendor.scss file:

enter image description here

Solution

  • Finally added primeng manually by following this answer and worked well.

    Steps to integrate PrimeNG with JHipster