Angular 12 Hello World + PrimeNG 12 DataTable Example (2024)

Angular 12 features - What's new in Angular 12

"Ivy Everywhere with Angular 12" Ivy is the next-generation compilation and rendering pipeline. It is a substantial update in its core design that will offer considerable efficiency improvements to its compilation and rendering, paving the path for future releases. It results in significant changes in the size of the bundle.

The following are the most recent additions:

1. The Ivy-based Language Service is transitioning from opt-in to on-by-default.
2. Inline Sass - Beginning with v12, Angular components will allow inline Sass in the @Component decorator's styles field.
3. ng build now defaults to production - Strict mode is now enabled by default in the CLI.
4. TypeScript 4.2 version support
5. Dropping IE11 support for in Angular v13 with start of warning message in Angular v12 .
6. Experimental Webpack 5 support.

Angular 12 Tutorial Topics :

In this article, we begin exploring with latest version of angular 12 and then PrimeNg 12 with use of the PrimeNG DataTable component with an code example.

We will follow below steps to build this example

1. Node setup for Angular 12
2. First we will create an Angular 12 Hello world Project
3. Whats new with PrimeNG 12
4. We will Setup PrimeNG 12
5. Adding the PrimeNG DataTable Component
6. 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 v12 or later. The 14.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"
• Install Angular Material :

  ng add @angular/material

  This creates a new project, Within a new folder named "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 12 : Whats new with PrimeNG 12

PrimeNG 12.0.0 is now available, bringing first-class Angular 12 support with a new grey scheme, as well as other changes and responsive updates to the components. PrimeNG v12.0.0 is dependent on and fully compatible with Angular 12. As is generally recommended, utilise the PrimeNG whose major version corresponds to your Angular version, for example, PrimeNG 12 with Angular 12.

PrimeNG 12 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 12 PrimeNG 12 Datatable Example