Overview

In this tutorial, we will make use of the PrimeNG DataTable component. It is used to display data in tabular format. In the next tutorials, we will be performing implementing in-cell and row editing. 

Technology Stack

     We will be making use of:

• Angular 8.
• PrimeNG.      

Video Tutorial  

Implementation

Here’s the final file structure for our project:

Develop Angular Application

First, install NodeJS. Go to the NodeJS downloads page and download the installer. Start the installer and install NodeJS.

Install the Angular CLI using the following command:

Then, create a new Angular project named “library-data”.

Go inside the created Angular project and start the project: 

Go to the home page and check that everything’s initially working.

Use PrimeNG Components

First, install PrimeNG.

You should see something like this as an output in your terminal: 

Next, install Prime Icons with the following command:

Then, install Font Awesome

Now, you can install the Angular CDK:

If we now go to package.json, we will see the following PrimeNG dependencies:

Open the angular.json and add the following in the styles section:

Create a new component named displayBooks, as follows:

In the app-routing.module.ts, add the route as books for our new Books component.

Also, in the app.component.html file, keep only the below code and remove anything remaining:

Start the application using:

If we now go to localhost:4200/books, we see the following:

Adding the PrimeNG DataTable Component in Angular Application

For adding any PrimeNG Component in Angular, we will be following these steps:

We will be creating the component and service modules as follows-

Add the PrimeNG Table module to the app.module.ts file.

We will be creating a service named, BookService, which will be getting the Book data by making an HTTP call. Currently, we will not make the HTTP call to any exposed REST service. Instead, we’ll get it from a JSON file named books.json, which we will create in the assets folder.

The book.json will contain the following:

Create the BookService as follows:

Add the following to BookService:

For making use of the httpClient, we will need to add the HttpClientModule to the app-module.ts file.

Modify the book-data component to get the backing data for the PrimeNG DataTable by calling the above service:

Use the p-table tag in the book-data.component.html file:

If we now go to localhost:4200/hello, we see the following: