Angular8 + PrimeNG Tutorial — Implement a Data Table Component
·
Join the DZone community and get the full member experience.
Join For FreeOverview
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:
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:
xxxxxxxxxx
npm install -g @angular/cli
Then, create a new Angular project named "library-data".
xxxxxxxxxx
ng new library-data
Go inside the created Angular project and start the project:
xxxxxxxxxx
ng serve
Go to the home page and check that everything's initially working.
Use PrimeNG Components
First, install PrimeNG.
xxxxxxxxxx
npm install primeng --save
You should see something like this as an output in your terminal:
Next, install Prime Icons with the following command:
xxxxxxxxxx
npm install primeicons --save
Then, install Font Awesome
xxxxxxxxxx
npm install font-awesome --save
Now, you can install the Angular CDK:
xxxxxxxxxx
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:
xxxxxxxxxx
"./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:
xxxxxxxxxx
ng generate component book-data
In the app-routing.module.ts, add the route as books for our new Books component.
xxxxxxxxxx
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 file, keep only the below code and remove anything remaining:
xxxxxxxxxx
<router-outlet></router-outlet>
Start the application using:
xxxxxxxxxx
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 these steps:
We will be creating the component and service modules as follows-
Add the PrimeNG Table module to the app.module.ts file.
xxxxxxxxxx
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 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:
xxxxxxxxxx
{
"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:
xxxxxxxxxx
ng generate service book
Add the following to BookService:
xxxxxxxxxx
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 HttpClientModule to the app-module.ts file.
xxxxxxxxxx
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 service:
xxxxxxxxxx
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:
xxxxxxxxxx
<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:
Opinions expressed by DZone contributors are their own.
Comments