How to use ng prime p table in angular 8 +

Implementation

Here's the final file structure for our project:

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

1

npm install -g @angular/cli

1

npm install -g @angular/cli

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

Shell

1

ng new library-data

1

ng new my-data

Go inside the created Angular project and start the project: 

Shell

1

ng serve

1

ng serve

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

Use PrimeNG Components

First, install PrimeNG.

Shell

1

npm install primeng --save

1

npm install primeng --save

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

PrimeNG Datatable Install

Next, install Prime Icons with the following command:

Shell

1

npm install primeicons --save

npm install primeicons --save

Prime Datatable Icons Install

Then, install Font Awesome

Shell

1

npm install font-awesome --save

1

npm install font-awesome --save

Font Awesome Install

Now, you can install the Angular CDK:

Shell

1

npm install @angular/cdk --save

npm install @angular/cdk --save

PrimeNG Angular CDK

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

PrimeNG package dependencies

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

JSON

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

Create a new component named displayBooks, as follows:

Shell

1

ng generate component book-data

ng generate component book-data

PrimeNG Component created

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

JavaScript

1

import { NgModule } from '@angular/core';

2

import { Routes, RouterModule } from '@angular/router';

3

import { BookDataComponent } from './book-data/book-data.component';

4

5

const routes: Routes = [  { path: 'books', component: BookDataComponent }

6

];

7

8

@NgModule({  imports: [RouterModule.forRoot(routes)],  exports: [RouterModule]

9

})

10

export class AppRoutingModule { }

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

HTML

1

<router-outlet></router-outlet>

<router-outlet></router-outlet>

Start the application using:

1

ng serve

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

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

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

Datatable Component And Service

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

JavaScript

1

import { BrowserModule } from '@angular/platform-browser';

2

import { NgModule } from '@angular/core';

3

4

import { AppRoutingModule } from './app-routing.module';

5

import { AppComponent } from './app.component';

6

import { BookDataComponent } from './book-data/book-data.component';

7

import {TableModule} from 'primeng/table';

8

9

@NgModule({  declarations: [    AppComponent,    BookDataComponent  ],  imports: [    BrowserModule,    AppRoutingModule,    TableModule  ],  providers: [],  bootstrap: [AppComponent]

10

})

11

export class AppModule { }

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

1

{

2

    "data": [

3

        {"name": "The Godfather", "price": 10, "author": "Mario Puzo"},

4

        {"name": "The Fellowship of the Ring", "price": 15, "author": "J.R.R. Tolkien"},

5

        {"name": "Harry Potter and the Deathly Hallows", "price": 20, "author": "J.K. Rowling  "}        

6

    ]

7

}

Create the BookService as follows:

Shell

1

ng generate service book

ng generate service book

Add the following to BookService:

JavaScript

1

2

import { Injectable } from '@angular/core';

3

import { HttpClient } from '@angular/common/http';

4

 export interface Book {  name;  price;  author;

5

}

6

7

@Injectable({  providedIn: 'root'

8

})

9

export class BookService {

10

  constructor(private http: HttpClient) {}

11

  getBooks() {    return this.http.get<any>('assets/books.json')      .toPromise()      .then(res => <Book[]>res.data)      .then(data => { return data; });    }

12

}

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

JavaScript

1

2

import { BrowserModule } from '@angular/platform-browser';

3

import { NgModule } from '@angular/core';

4

5

import { AppRoutingModule } from './app-routing.module';

6

import { AppComponent } from './app.component';

7

import { BookDataComponent } from './book-data/book-data.component';

8

import {TableModule} from 'primeng/table';

9

import { FormsModule } from '@angular/forms';

10

import { HttpClientModule } from '@angular/common/http';

11

12

@NgModule({  declarations: [    AppComponent,    BookDataComponent  ],  imports: [    BrowserModule,    AppRoutingModule,    TableModule,    FormsModule,    HttpClientModule  ],  providers: [],  bootstrap: [AppComponent]

13

})

14

export class AppModule { }

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

JavaScript

1

import { Component, OnInit } from '@angular/core';

2

import { BookService, Book } from '../service/book.service';

3

4

@Component({  selector: 'app-book-data',  templateUrl: './book-data.component.html',  styleUrls: ['./book-data.component.css']

5

})

6

export class BookDataComponent implements OnInit {

7

  books: Book[];

8

  constructor(private bookService: BookService) { }

9

  ngOnInit() {      this.bookService.getBooks().      then(books => this.books = books);  }

10

11

}

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

HTML

1

<p-table [value]="books">

2

  <ng-template pTemplate="header">

3

      <tr>

4

          <th>Name</th>

5

          <th>Author</th>

6

          <th>Price In Dollars</th>          

7

      </tr>

8

  </ng-template>

9

  <ng-template pTemplate="body" let-book>

10

      <tr>

11

          <td>{{book.name}}</td>

12

          <td>{{book.author}}</td>

13

          <td>{{book.price}}</td>          

14

      </tr>

15

  </ng-template>

16

</p-table>

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

PrimeNG DataTable final output