{{announcement.body}}
{{announcement.title}}

Angular8 + PrimeNG Tutorial — Implement a Data Table Component

DZone 's Guide to

Angular8 + PrimeNG Tutorial — Implement a Data Table Component

In this article, we discuss how to create a DataTable component with Angular and PrimeNG to better visualize data on a webpage.

· Web Dev Zone ·
Free Resource

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:

PrimeNG DatatableProject file structure

PrimeNG DatatableProject file structure

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:

Shell


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

Shell


Go inside the created Angular project and start the project: 

Shell


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

Use PrimeNG Components

First, install PrimeNG.

Shell


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

PrimeNG Datatable Install

PrimeNG Datatable Install

Next, install Prime Icons with the following command:

Shell


Prime Datatable Icons Install

Prime Datatable Icons Install

Then, install Font Awesome

Shell


Font Datatable Awesome Install

Font Awesome Install

Now, you can install the Angular CDK:

Shell


PrimeNG Datatable Angular CDK

PrimeNG Angular CDK

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

PrimeNG package dependencies

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

JSON
 




xxxxxxxxxx
1


 
1
"./node_modules/primeicons/primeicons.css",
2
  "./node_modules/primeng/resources/themes/nova-light/theme.css",
3
  "./node_modules/primeng/resources/primeng.min.css",



PrimeNG style sheet

PrimeNG style sheet

Create a new component named displayBooks, as follows:

Shell


PrimeNG Component created

PrimeNG Component created

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

JavaScript


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

HTML


Start the application using:

Shell


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

PrimeNG Books Component

PrimeNG Books Component

Adding the PrimeNG DataTable Component in Angular Application

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

Add PrimeNG Component workflow

Add PrimeNG Component

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

Add PrimeNG Datatable Component And Service

Datatable Component And Service

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

JavaScript


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:

JSON


Create the BookService as follows:

Shell


Add the following to BookService:

JavaScript


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

JavaScript


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

JavaScript


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

HTML


If we now go to localhost:4200/hello, we see the following:
PrimeNG DataTable final output

PrimeNG DataTable final output
Topics:
angular 8 ,angular ,datatable with angular 4

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}