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

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

Overview

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.

Technology Stack

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

Implementation

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 angular cli using the command-
    
    npm install -g @angular/cli
    

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

    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
    
    "./node_modules/primeicons/primeicons.css",
      "./node_modules/primeng/resources/themes/nova-light/theme.css",
      "./node_modules/primeng/resources/primeng.min.css",
    

    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 }
];

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

<router-outlet></router-outlet>
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';
    
    
    @NgModule({
      declarations: [
        AppComponent,
        HelloworldComponent
      ],
      imports: [
        BrowserModule,
        AppRoutingModule,
        DropdownModule,
        FormsModule,
        BrowserAnimationsModule
      ],
      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;
    }
    
    @Component({
      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.

Downloads-

PrimeNG Hello World Example