2

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

Jose Loor
  • 189
  • 1
  • 15
  • Forget about "Bootstrap Material Design" jhipster module, it's too old (Bootstrap 3 and JHipster 3). Now for your questions: 1. yes but it does not offer real components with behavior only styling, 2. I used only their bootstrap theme, 3. There's no UI lib supported by JHipster, PrimeNG is just one that is often used by the community. – Gaël Marziou Sep 26 '18 at 21:32
  • 1
    For your CSS problem with primeng, did you import CSS in vendor.css? See https://github.com/gmarziou/jhipster-ui-libs/commit/d27f480aedb4733563c04588c4fef4a04dcf8813 – Gaël Marziou Sep 26 '18 at 21:40
  • Hi Gaël Marziou, Thanks for quick response. I have made up my mind to use "primeng". I have used thr jhipster module to add in my jhipster project. Yes, the theme file is there in "vender.scss". Do I need any more steps?? Also some components are not working as expected but I will ask a seperate question for that. Updating the question with screen shot of vendor.scss – Jose Loor Sep 26 '18 at 22:27
  • Did you look at my commit? it shows all files I had to change, though it was for JHipster 4. – Gaël Marziou Sep 26 '18 at 23:01
  • Yeah I checked it carefully and all files are more or less same as your commit. i changed the theme name in vendor,scss from "@import "~primeng/resources/themes/bootstrap/theme.css"; " to @import "~primeng/resources/themes/nova-light/theme.css"; and yeeeee colors are there.. though some components are not working as expected but that theme problem is solved. looks like some problem with there "bootstrap" theme – Jose Loor Sep 26 '18 at 23:07
  • I updated my sample project for JHipster 6.6 and PrimeNG 8 , https://github.com/gmarziou/jhipster-ui-libs – Gaël Marziou Dec 29 '19 at 22:47

1 Answers1

3

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

Steps to integrate PrimeNG with JHipster

Jose Loor
  • 189
  • 1
  • 15