Angular 8 PrimeNG DataTable (2024) - PrimeNG Tutorial Example

Angular PrimeNG Tutorial :

Overview

In this article, we begin exploring how to make use of the PrimeNG DataTable component with an example. It is used to display data in tabular format, also we can fetch data from spring boot service and display it.

We will follow below steps to build this example

First we will create an Angular Project
We will Setup PrimeNG
Adding the PrimeNG DataTable Component
Finally we will sample data in DataTable

Lets start

Angular Project Setup :

First prerequisites we need to develop Angular application is Node js.

Node.js :

Node.js is a JavaScript runtime, Node.js is commonly used to simplify the development of Angular applications

Lightweight, efficient environment for running JavaScript code

Vast number of prebuilt modules available, managed via npm

Node package manager(npm) is The Node.js default package manager

Angular applications can be built and hosted using the Angular CLI Node.js module
Once built, the Angular application can be deployed without requiring Node.js, can be deployed into any web server

Angular CLI :

Angular CLI provides a set of utilities to simplify Angular development. Angular CLI is run using the ng command

Create a new project ng new
Create a new Component ng generate
Build and execute ng serve
Run tests ng test
Create a production build ng build --prod

Installtion :

Download and install Node.js from nodejs.org

Update npm, Default version may not correctly install Angular CLI

npm -g install npm

Use npm to install Angular CLI

npm -g install @angular/cli

Your system has been configured now, We can check the angular cli version with command ng version

Creating and Running an Angular Application

As our setup is ready, creating a new Angular application is easy with the Angular CLI,

simply type below command
```
ng new airline-client-web
```
This creates a new project, Within a new folder named "airline-client-web"
Go inside the newly created project, Type cd "airline-client-web"
to start To get the angular project, We must go inside the "airline-client-web" folder and then use the following command.
```
ng serve
```
Wait for the "Compiled successfully" message
Open Chrome and go to http://localhost:4200, You should see the airline-client-web app is running!

Angular CLI creates a standard directory structure and initial Component in app directory for our project, lets look at our project structure

Click here to understand more about Angular.

Flight Model

Since our Angular application will fetch from and persist Flight entities in the database, let's implement a simple domain model flight with TypeScript.

Let's open a terminal console and create a model directory and then and within that directory, issue the following command:

ng generate class flight

Here is code for our my flight Model

export interface Flight{
    flightNumber : string;
    origin : string;
    destination : string;
}

Flight service

ng generate service flight

Here is code for flight service

import { Injectable } from '@angular/core';
import { Flight } from "../model/flight";
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from "rxjs";

@Injectable()
export class FlightsService {

private MYFLIGHTS: Flight[] = [
{"id": 11, "flightNumber" : "FS1298", "origin": "LAX", "destination" : "LHR", "departDay" : "Thursday",
    departTime : "09:00", "arriveDay" : "Monday", arriveTime : "09:00", "price" : 99.99},
{"id": 12, "flightNumber" : "FS1201", "origin": "LAX", "destination" : "LHR", "departDay" : "Friday",
    departTime : "09:00", "arriveDay" : "Monday", arriveTime : "09:00", "price" : 99.99},
];

constructor(private http: HttpClient) { }

// to test with local mock data
public getMyFlights() : Flight[]{
return this.MYFLIGHTS;
}
}

Create My Flights Component

We will be creating My Flights Component which will fetch data from spring boot service and display it later.
Lets begin with the My Flights component Open a command prompt and use the following command-

ng generate component my-flights

Here is code for our my flight template component

<table class="table table-bordered">
<thead>
    <tr>
        <th></th>
        <th>Flight</th>
        <th>From</th>
        <th>To</th>
    </tr>
</thead>
<tbody>
    <tr *ngFor="let flight of flights">
        <td>{{flight.flightNumber}}</td>
        <td>{{flight.origin}}</td>
        <td>{{flight.destination}}</td>
    </tr>
</tbody>
</table>

here is our component source

import { Component, OnInit } from '@angular/core';
            
import {Flight} from '../model/flight';
import {FlightsService} from "../services/flights.service";

@Component({
selector: 'app-my-flights',
templateUrl: './my-flights.component.html',
styleUrls: ['./my-flights.component.css']
})
export class MyFlightsComponent implements OnInit {
private flights : Flight[];

constructor(private flightService: FlightsService) {}

ngOnInit() {
    this.flights = this.flightService.getMyFlights();
}

}

Next in the app-routing.module.ts we will be defining the url for accessing this component-

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { MyFlightsComponent } from './my-flights/my-flights.component';

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

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

In app.component.html we will only keep the single line as below

<router-outlet></router-outlet>

Finally we need to update app.module.ts to declare MyFlightsComponent, import HttpClientModule and update providers for FlightsService as below

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { MyFlightsComponent } from './my-flights/my-flights.component';
import { FlightsService } from 'src/app/service/flights.service';
import { HttpClientModule } from '@angular/common/http';

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

Now If we goto localhost:4200 and we can see the following output with mock data

Now lets start using PrimeNG DataTable now

PrimeNG Setup :

Start by installing Prime NG using npm command below

npm install primeng --save

Install Angular CDK

npm install "@angular/cdk" --save

Then in your main app module, register the TableModule to get access to its components. 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 { MyFlightsComponent } from './my-flights/my-flights.component';
import { FlightsService } from 'src/app/service/flights.service';
import { HttpClientModule } from '@angular/common/http';
import { TableModule } from 'primeng/table';

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

Now that we have imported the module from PrimeNG, we can use the data table component and display a list of data. we will use the p-table tag in the angular component template file to use PrimeNG Table. We will replace our existing html table with PrimeNG data table as below

<p-table [value]="flights">
    <ng-template pTemplate="header">
        <tr>
            <th>Flight</th>
            <th>From</th>
            <th>To</th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-flight>
        <tr>
            <td>{{flight.flightNumber}}</td>
            <td>{{flight.origin}}</td>
            <td>{{flight.destination}}</td>
        </tr>
    </ng-template>
</p-table>