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

Video Tutorial

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

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

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

Downloads-

PrimeNG Hello World Example