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:

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: 

PrimeNG Datatable Install

PrimeNG Datatable Install

Next, install Prime Icons with the following command:

Prime Datatable Icons Install

Prime Datatable Icons Install

Then, install Font Awesome

Font Datatable Awesome Install

Font Awesome Install

Now, you can install the Angular CDK:

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:

PrimeNG style sheet

PrimeNG style sheet

Create a new component named displayBooks, as follows:

PrimeNG Component created

PrimeNG Component created

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:

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.

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:
PrimeNG DataTable final output

PrimeNG DataTable final output



Source link

Write A Comment