In previous tutorials, we implemented PrimeNG datatable inplace cell editing and PrimeNG datatable row editing. In this tutorial, we will implement a PrimeNG datatable CRUD example. We will use Spring Boot for the backend to expose REST APIs.

Technology Stack

We will be making use of:

  • Angular 9
  • PrimeNG
  • Spring Boot                     

Video tutorial:                                

Implementation

We will first implement the Spring Boot backend code to expose the REST APIs for the CRUD operations. In real-world application, Spring Boot will store the information using a database like MySQL. However, for this example, we will be storing the data in a temporary array.

The Spring Boot Maven project will be as follows.

pom.xml:

Create the Book model class as follows: 

Create the controller class for exposing the REST APIs. We will be exposing 4 APIs.

Finally, create the Spring Boot bootstrap class for starting the application: 

Develop Angular Application

In a previous tutorial, we implemented a PrimeNG row editing example. We will be modifying this example perform CRUD operations using the PrimeNG datatable. 

Download the example.

Run the following command to build the project: npm install.

Start the project as follows: ng serve.

If we now go to localhost:4200/books, we can see the list of books populated in the PrimeNG datatable. This books data is currently hardcoded and being fetched from the books.json file in the assets folder.

We will first be implementing the GET functionality to get the books list from the Spring Boot backend to populate the datatable.

Modify the book.service.ts to make a GET call to the Spring Boot backend.

Above, the GET call returns an observable of Book array, which we need to subscribe to in the book component file.

Start the Spring Boot application and go to localhost:4200/books to get the list of books from the Spring Boot backend.

Next, we will be implementing the update Book functionality. We previously already added the edit icons in the data table and implemented the row edit functionality. Now, for the successful edit save, we will want to make a call the Spring Boot backend to update the book data. Also, if the edit is cancelled, we will want to revert the edit made, so we will be cloning the book list before the init is initialized to store the original book list and use it if the edit is cancelled.

Modify the book.service.ts to make a PUT call to the spring boot backend with the updated book data.

We will be making this update call when the edit is to be saved successfully, i.e. in the onRowEditSave method. Also, if the edit reverted, we will need the original data to be displayed again. So, we will do: 

Go to localhost:4200 and test the edit Book functionality.

Next, we will add the delete Book functionality.

Modify book.service.ts to make a DELETE call to the Spring Boot backend.

In the Book component file, add the delete function, which should be called when we want to delete a book from the table:

If we now go to localhost:4200/books, we will see the delete icon, which will delete the book upon clicking.

PrimeNG Datatable Spring Boot

We will now implement the add Book functionality.

Modify the book.service.ts to make a POST call to the Spring Boot backend.

We will be adding an Add Button in the HTML page for adding a new book. For this, we will need to get the book information from the user. We will get this information using an Angular form, which we will show in a dialog box.

We will first need to import the required modules in the app.module.ts file:

We are done with the changes. Now, when the user clicks on the Add button, a form will be displayed. When the user clicks on the Save button, the book will be added.



Source link

Write A Comment