Angular + PrimeNG Tutorial - Implement DataTable Component

Overview

In previous tutorial we had implemented a hello world example using Angular and PrimeNG. We set up the project and made us of PrimeNG DropDown Component. In this tutorial we will make use of the PrimeNG DataTable component. It is used to display data in tabular format.

Technology Stack

We will be making use of-

Angular 8
PrimeNG

Implementation

Develop Angular Application

Install angular cli using the command-
```
npm install -g @angular/cli
```
Create new Angular Project named library-data
```
ng new library-data
```
Go inside the created the created angular project and start Angular Project-
```
ng serve
```
Go to Angular home page

Use PrimeNG Components

Install PrimeNG
```
npm install primeng --save
```
Install Prime Icons
```
npm install primeicons --save
```
Install Font Awesome
```
npm install font-awesome --save
```
Install Angular CDK
```
npm install @angular/cdk --save
```
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


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

Create a new Component named displayBooks as follows-


ng generate component book-data

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


import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { BookDataComponent } from './book-data/book-data.component';

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

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Also in the app.component.html keep only the below code and remove the remaining-


<router-outlet></router-outlet>

Start the application using-


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 below steps-
Add PrimeNG Component

Add the PrimeNG Drowpdown module to the app.module.ts


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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BookDataComponent } from './book-data/book-data.component';
import {TableModule} from 'primeng/table';

@NgModule({
  declarations: [
    AppComponent,
    BookDataComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    TableModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

We will be creating a service named BookService which will be getting the Book data by making HTTP call. Currently we will not make http call to any exposed REST service but instead get it from a JSON file named books.json which we will create in assets folder.
The book.json will be as follows-


{
    "data": [
        {"name": "The Godfather", "price": 10, "author": "Mario Puzo"},
        {"name": "The Fellowship of the Ring", "price": 15, "author": "J.R.R. Tolkien"},
        {"name": "Harry Potter and the Deathly Hallows", "price": 20, "author": "J.K. Rowling  "}        
    ]
}

Create the BookService as follows-


ng generate service book

Add the following to the Book Service-


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

export interface Book {
  name;
  price;
  author;
}

@Injectable({
  providedIn: 'root'
})
export class BookService {

  constructor(private http: HttpClient) {}

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

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


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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BookDataComponent } from './book-data/book-data.component';
import {TableModule} from 'primeng/table';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [
    AppComponent,
    BookDataComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    TableModule,
    FormsModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Modify the book-data component to get the backing data for the primeng datatable by calling the above created service -


import { Component, OnInit } from '@angular/core';
import { BookService, Book } from '../service/book.service';

@Component({
  selector: 'app-book-data',
  templateUrl: './book-data.component.html',
  styleUrls: ['./book-data.component.css']
})
export class BookDataComponent implements OnInit {

  books: Book[];

  constructor(private bookService: BookService) { }

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

}

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


<p-table [value]="books">
  <ng-template pTemplate="header">
      <tr>
          <th>Name</th>
          <th>Author</th>
          <th>Price In Dollars</th>          
      </tr>
  </ng-template>
  <ng-template pTemplate="body" let-book>
      <tr>
          <td>{{book.name}}</td>
          <td>{{book.author}}</td>
          <td>{{book.price}}</td>          
      </tr>
  </ng-template>
</p-table>

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

Downloads-

PrimeNG DataTable Component Example