Angular 8 + PrimeNG Hello World Example - Getting started with PrimeNG | CodeUsingJava

Angular 8 + PrimeNG Hello World Example - Getting started with PrimeNG


In this tutorial we will be developing Angular 8 application and making use of PrimeNG Components. We will learn how to setup PrimeNG for Angular application. In the next tutorial we will be implementing Angular 8 + PrimeNG Tutorial - Implement DataTable Component

Technology Stack

We will be making use of-
  • Angular 8
  • PrimeNG

Video Tutorial

Table Of Contents :


For this tutorial series we make use of Visual Studio Code
The Angular project we will be developing is as follows-
PrimeNG Project

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

    Install Angular CLI
  • Create new Angular Project named library-management
    ng new library-management --skip-git

    New Angular CLI
  • Go inside the created the created angular project and start Angular Project-
    ng serve

    Start Angular CLI
  • Go to Angular home page

    Angular Home Page

Use PrimeNG Components

  • Install PrimeNG
    npm install primeng --save

    PrimeNG Install
  • Install Prime Icons
    npm install primeicons --save

    Prime Icons Install
  • Install Font Awesome
    npm install font-awesome --save

    Font Awesome Install
  • Install Angular CDK
    npm install @angular/cdk --save

    PrimeNG Angular CDK
  • If we now go to package.json, we will see the following primeng dependencies
    PrimeNG package dependencies
  • Open the angular.json and add the following in the styles section

    PrimeNG style sheet
Create a new Component named Helloworld as follows-

ng generate component helloworld

PrimeNG Component
In the app-routing.module.ts add the route as hello for our new HelloworldComponent

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HelloworldComponent } from './helloworld/helloworld.component';

const routes: Routes = [
  { path: 'hello', component: HelloworldComponent }

  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
export class AppRoutingModule { }
Also in the app.component.html keep only the below code and remove the remaining-

Start the application using-

ng serve

PrimeNG serve
If we now go to localhost:4200/hello we see the following-
PrimeNG Hello World

Adding the PrimeNG Component in Angular Application

For adding any PrimeNG Component in Angular we will be following below steps-
Add PrimeNG Component
  • Add the PrimeNG Drowpdown 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 { HelloworldComponent } from './helloworld/helloworld.component';
    import {DropdownModule} from 'primeng/dropdown';
    import { FormsModule } from '@angular/forms';
    import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
      declarations: [
      imports: [
      providers: [],
      bootstrap: [AppComponent]
    export class AppModule { }
  • Create Backing Data for the dropdown in the helloworld.component.ts
    import { Component, OnInit } from '@angular/core';
    interface Book {
      name: string;
      author: string;
      selector: 'app-helloworld',
      templateUrl: './helloworld.component.html',
      styleUrls: ['./helloworld.component.css']
    export class HelloworldComponent implements OnInit {
      books: Book[];
      selectedBook: string;
      constructor() {
       this.books = [
          {name: 'Book1', author: 'Author1'},
          {name: 'Book2', author: 'Author2'},
          {name: 'Book3', author: 'Author3'},
          {name: 'Book4', author: 'Author4'},
          {name: 'Book5', author: 'Author5'}
      ngOnInit() {
  • Use the PrimeNG Dropdown tag in the helloworld.component.html file
    <p-dropdown [options]="books" [(ngModel)]="selectedBook" optionLabel="name"></p-dropdown>
  • If we now go to - localhost:4200/hello we see the following-
    Add PrimeNG
In the next tutorials of this series we will be further exploring other components provided by PrimeNG.


PrimeNG Hello World Example