{{announcement.body}}
{{announcement.title}}

Angular 8 + PrimeNG Hello World Example - Getting Started With PrimeNG

DZone 's Guide to

Angular 8 + PrimeNG Hello World Example - Getting Started With PrimeNG

In this article, we provide a Hello World tutorial on how to get started working with PrimeNG and Angular.

· Web Dev Zone ·
Free Resource

Overview

In this tutorial, we will be developing an Angular 8 application and make use of PrimeNG Components. We will learn how to set up PrimeNG for an Angular application. In the next tutorial, we will implement Angular 8 + PrimeNG Tutorial - Implement DataTable Component.

Technology Stack

We will be making use of:

  • Angular 8.
  • PrimeNG.

Video Tutorial

Implementation

For this tutorial, we will make use of Visual Studio Code. The Angular project will be developed as follows:


PrimeNG Project

PrimeNG Project

Develop Angular Application

Install NodeJS. Go to NodeJS downloads page and download the installer. Start the installer and install Node.js.

Install Angular CLI using the command:

Shell
 




xxxxxxxxxx
1


 
1
npm install -g @angular/cli



Create a new Angular Project, named library-management.

Shell
 




xxxxxxxxxx
1


 
1
ng new library-management --skip-git



New Angular CLI

New Angular CLI

Go inside the new project and start it:

Shell
 




x


 
1
ng serve



Go to the home page:
Angular Home Page

Angular Home Page

Use PrimeNG Components

Install PrimeNG

Shell
 




xxxxxxxxxx
1


1
npm install primeng --save



Install Prime Icons

Shell
 




xxxxxxxxxx
1


 
1
npm install primeicons --save



Install Font Awesome

Shell
 




xxxxxxxxxx
1


1
npm install font-awesome --save



Install Angular CDK

Shell
 




xxxxxxxxxx
1


1
npm install @angular/cdk --save



If we now go to package.json, we will see the following primeng dependencies:

PrimeNG package dependencies

PrimeNG package dependencies

Open the angular.json file and add the following in the styles section:

Java
 




xxxxxxxxxx
1


 
1
"./node_modules/primeicons/primeicons.css", 
2
"./node_modules/primeng/resources/themes/nova-light/theme.css", 
3
"./node_modules/primeng/resources/primeng.min.css",


PrimeNG style sheet

PrimeNG style sheet

Create a new Component, named Helloworld as follows:

Shell
 




xxxxxxxxxx
1


1
ng generate component helloworld



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

TypeScript
 




xxxxxxxxxx
1
11


 
1
 
          
2
import { NgModule } from '@angular/core';
3
import { Routes, RouterModule } from '@angular/router';
4
import { HelloworldComponent } from './helloworld/helloworld.component';
5
 
          
6
const routes: Routes = [  { path: 'hello', component: HelloworldComponent }
7
];
8
 
          
9
@NgModule({  imports: [RouterModule.forRoot(routes)],  exports: [RouterModule]
10
})
11
export class AppRoutingModule { }



Also, in app.component.html, only keep the following code and remove the remaining:

HTML
 




xxxxxxxxxx
1


1
<router-outlet></router-outlet>



Start the application using:

Shell
 




xxxxxxxxxx
1


1
ng serve



Adding the PrimeNG Component in Angular Application

For adding any PrimeNG Component in Angular, we will follow the steps below.
Add PrimeNG Component

Add PrimeNG Component


Add the PrimeNG Drowpdown module to the app.module.ts file.

TypeScript
 




xxxxxxxxxx
1
14


1
import { BrowserModule } from '@angular/platform-browser';
2
import { NgModule } from '@angular/core';
3
 
          
4
import { AppRoutingModule } from './app-routing.module';
5
import { AppComponent } from './app.component';
6
import { HelloworldComponent } from './helloworld/helloworld.component';
7
import {DropdownModule} from 'primeng/dropdown';
8
import { FormsModule } from '@angular/forms';
9
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
10
 
11
@NgModule({  declarations: [    AppComponent,    HelloworldComponent  ],  imports: [    BrowserModule,    AppRoutingModule,    DropdownModule,    FormsModule,    BrowserAnimationsModule  ],  providers: [],  bootstrap: [AppComponent]
12
})
13
export class AppModule { }



Create Backing Data for the dropdown in the helloworld.component.ts.

TypeScript
 




xxxxxxxxxx
1
15


 
1
import { Component, OnInit } from '@angular/core';
2
 
          
3
interface Book {  name: string;  author: string;
4
}
5
 
          
6
@Component({  selector: 'app-helloworld',  templateUrl: './helloworld.component.html',  styleUrls: ['./helloworld.component.css']
7
})
8
export class HelloworldComponent implements OnInit {
9
  books: Book[];  selectedBook: string;
10
  constructor() {
11
   this.books = [      {name: 'Book1', author: 'Author1'},      {name: 'Book2', author: 'Author2'},      {name: 'Book3', author: 'Author3'},      {name: 'Book4', author: 'Author4'},      {name: 'Book5', author: 'Author5'}  ];   }
12
  ngOnInit() {     }
13
 
          
14
}



Use the PrimeNG Dropdown tag in the helloworld.component.html file.

HTML
 




xxxxxxxxxx
1


1
<p-dropdown [options]="books" [(ngModel)]="selectedBook" optionLabel="name"></p-dropdown>



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


Add PrimeNG

Final ouput


Further Reading

Topics:
angular 8 ,hello world example

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}