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. 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

Table Of Contents :

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

Angular 8 + PrimeNG Tutorial - Implement DataTable Component

PrimeNG Tutorial - DataTable Component - Incell Editing

PrimeNG Tutorial - DataTable Component Row Editing Example

PrimeNG Tutorial - DataTable Dynamic Columns Example

PrimeNG Tutorial - DataTable Pagination (Paginator) Example

PrimeNG Tutorial - DataTable Filter Example

Angular 8 + PrimeNG Tutorial - Implement Various Charts

PrimeNG Drag And Drop Example

PrimeNG Tutorial - DataTable Lazy Loading Example

Implementation

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

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
  

  
  
  
  between
• Create new Angular Project named library-management

  
  ng new library-management --skip-git
  

  
  
  
• Go inside the created the created angular project and start Angular Project-

  
  ng serve
  

  
  
  
• Go to Angular home page
  
  
  

Use PrimeNG Components

• Install PrimeNG

  
  npm install primeng --save
  

  
  
  
• Install Prime Icons

  
  npm install primeicons --save
  

  
  
  
  between
• Install Font Awesome

  
  npm install font-awesome --save
  

  
  
  
• Install Angular CDK

  
  npm install @angular/cdk --save
  

  
  
  
• If we now go to package.json, we will see the following primeng dependencies
  
  
  between
• 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",
  

  
  
  

Create a new Component named Helloworld as follows-

ng generate component helloworld

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

If we now go to localhost:4200/hello we see the following-

Adding the PrimeNG Component in Angular Application

For adding any PrimeNG Component in Angular we will be following below steps-

• 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 { }
  

  between
• 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>
  

  between
• If we now go to - localhost:4200/hello we see the following-
  
  

In the next tutorials of this series we will be further exploring other components provided by PrimeNG.

Downloads-

PrimeNG Hello World Example