PrimeNG full stack CRUD application

The following two tabs change content below.
Prasad Kharkar is a java enthusiast and always keen to explore and learn java technologies. He is SCJP,OCPWCD, OCEJPAD and aspires to be java architect.

Latest posts by Prasad Kharkar (see all)

We have seen how to use primeNG and themes in angular apps in previous article. However, let us put these components to some real use. In this article we will create primeNG full stack CRUD application.

PrimeNG full stack CRUD application:

Our objective is to create a full end to end application using primeNG. We are building a simple bike app which can add, update and delete bikes.  For that we need to do following.

  • Create a simple angular app using angular CLI.
  • Create a server side application using spring REST and spring data jpa.
  • Connecting angular app and server side app.

Good thing is, we already have done everything. I implore you to go through this article first.  It is needed because it explains everything about creating a full stack application using angular. So please go through this before starting with primeNG in this article.

The scope of this article is to learn about only primeNG as we already have everything else covered  in angular spring CRUD app.

PrimeNG full stack CRUD application has below components:

  • app routing module
  • bikes component which will be add and display bikes in primeng datatable
  • bike info component which will be able to update component.
  • bike services which communicate to server.

app-routing.module.ts:

bike-info.component.html:

bike-info.component.ts:

bikes.component.html:

Please note here we are using primeNG dataTable and using templates for showing icons and buttons in column for each row displayed.

bikes.component.ts:

app.component.html:

Yes only line in this file. This simply initialises routing in angular app.

app.component.ts:

app.module.ts:

Please note that I am omitting the services and server side related stuff in this article. our aim is to create primeng full stack crud application. Full code is available on gitHub. Branch name is primeng-spring-crud-app. 

index.html:

These are the only changes needed for a primeNG CRUD application. Server side code remains the same. Again I would like to iterate that it is necessary to implement angular CRUD application first.

Once you are done with application, start the server and hit localhost:4200/bikes. You should be able to see below.

 

I hope this article helped create a primeng full stack crud application.

 

 

 

Share Button

Leave a Reply

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