Angular8 + 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
Video Tutorial
Table Of Contents :
Implementation
Develop Angular Application
- Install NodeJS. Go to NodeJS downloads page and download installer. Start the installer and install nodejs.
-
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",
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 { }
<router-outlet></router-outlet>
Start the application using-
ng serve
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 below steps-We will be creating the component and service modules as follows-
-
Add the PrimeNG Table 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-
Create the BookService 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 "} ] }
ng generate service book
Add the following to the Book Service-
For making use of the httpClient we will need to add the HttpClientModule to app-module.tsimport { 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; }); } }
Modify the book-data component to get the backing data for the primeng datatable by calling the above created service -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 { }
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/books we see the following-