Angular8 + PrimeNG Tutorial — Implement a Data Table Component
Join the DZone community and get the full member experience.Join For Free
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.
We will be making use of:
- Angular 8.
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
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:
BookService as follows:
Add the following to
For making use of the
httpClient, we will need to add the
HttpClientModule to the app-module.ts file.
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:
Opinions expressed by DZone contributors are their own.