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 ComponentTechnology Stack
We will be making use of-- Angular 8
- PrimeNG
Video Tutorial
Table Of Contents :
Implementation
For this tutorial series we make use of Visual Studio CodeThe 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
-
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",
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
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 { }
-
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-