JHipster meets PrimeNG or PrimeNG meets JHipster

JHipster is an open source application generator used to develop modern web applications and microservices using Angular and Spring framework. The tool generates Java stack on the server side(Spring Boot) and responsive front-end(Angular) on the client side. JHipster 4.0 supporting Angular2 and after that JHipster 4.2 supported Angular 4 versions. It can cover more scenarios if it supports any popular Angular component library. Currently PrimeNG is one of the most popular component library in Angular community with 85+ components categorized under 8-9 groups. Also, the components look and feel can be changed with the help of around 20 themes available.

JHipster-PrimeNG module enables PrimeNG support with an easy setup similar to any other JHipster module. Initially it supports interactive theme selection and component groups to generate customized application.

The Github project is available here

Prerequisites

As this is a JHipster module, we expect that you have JHipster and its related tools already installed:

Installing JHipster

Setup and Run:

To install this module using NPM, Use the below command,

npm install -g generator-jhipster-primeng

To update this module, Use the below command,

npm update -g generator-jhipster-primeng

To install this module using Yarn, Use the below command,

yarn global add generator-jhipster-primeng

To update this module, Use the below command,

yarn global upgrade generator-jhipster-primeng
After that, in your JHipster project, launch yo jhipster-primeng and confirm. This will create PrimeNG dropdown with all listed components in your JHipster application.

Getting started

After launching Yeoman command on this module(as mentioned in the previous section), the command line interface prompts with theme selection as below.

You can choose any one of the theme option among 15-20 themes. After that it prompts for component groups with “Inputs” as default option. It allows you to select more than one component groups and even all component groups by pressing keyboard character “A”.

Once the command line interactive session completed, it creates PrimeNG module with the mentioned component groups and the application is up with npm start command as below.

You can select any one of the component listed under any component group. On click of any particular component navigates to the component page with wizard navigation to explore component features.

For example, the tree component displays with checkbox selection feature using wizard option as below,

Now it is time to explore all the PrimeNG components and it’s features as per your application needs.

Conclusion:

The module is not yet published due to few JHipster changes which are going to ported soon. The initial version is going to be available very soon. In future releases, the module is going to be improved with fine-grained control over component selection and feature selection. This module is going to be evolved with community feedback. Cheers !!!

 

    1. I will add this item to the roadmap list. Can you suggest few details and expectations about entity sub-generator features.Thanks.

      1. Of course! It would be nice if all the features of the Bootstrap entities generation were migrated.
        One more thing… if the generator allow generate the client and the entities in a different project, backend decoupled, angular-cli compliant, it would be amazing!

        1. Thank you for the details. I already added this item to the Roadmap wiki page. It will be available in the future releases.

Leave a Reply to sudheer Cancel reply

Your email address will not be published. Required fields are marked *