Angular 10 + PrimeNG 10 DataTable (2024) - PrimeNG Tutorial Example

Overview

The new Angular 10 version is available now. The newest release again includes improvements in performance, a smaller bundle size and many more. Moreover, the default is the Ivy renderer. . Check out Angular 10 features.

PrimeNG 10.0.0 release has also recently been available to support Angular 10 and Ivy for first class components and to improve components.

In this article, we begin exploring getting started with latest version of angular 10 and PrimeNg 10 with use of the PrimeNG DataTable component with an example.

We will follow below steps to build this example

1. Node setup for Angular 10
2. First we will create an Angular 10 Hello world Project
3. We will Setup PrimeNG 10
4. Adding the PrimeNG DataTable Component
5. Finally we will sample data in DataTable

Lets start

Angular Project Nodejs 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

Installtion :

Download and install Node.js from nodejs.org. Make sure first that we use Node v10.13 or later. The 12.16.1 LTS version is recommended since it is supported!

Update npm, Default version may not correctly install Angular CLI

npm -g install npm

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 component. You can also use ng generate directive/pipe/service/class/module
• Build and execute ng serve
• Run tests ng test
• Create a production build ng build --prod

Verify current Angular CLI version

First, We will check the angular cli version with command

ng version

Upgraded Angular CLI globally

The global Angular CLI version can be upgraded by removing previous version and installing newer one

    npm uninstall -g angular-cli
    npm install -g @angular/cli@latest -g

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 10 Setup :

• Start by installing Prime NG using npm command below

npm install primeng --save

npm install primeicons --save

• Install Angular CDK

npm install "@angular/cdk" --save

• Styles Configuration
Open the angular.json and add the following in the styles section

"styles": [
             "src/styles.scss",
             "node_modules/primeicons/primeicons.css",
             "node_modules/primeng/resources/themes/nova-light/theme.css",
             "node_modules/primeng/resources/primeng.min.css"
],

• 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 my-flights.component.html 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>

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

Next we will see Angular PrimeNG Datatable Paginator Example.

Download Source Code

The full source code for this article can be found on below.
Download it here - Angular 10 PrimeNG 10 Datatable Example