Angular 9 + PrimeNG Tutorial- Hello World Example

In this tutorial we will be creating Angular 9 + PrimeNG example. We will be looking at how to setup the project using Angular 9 and PrimeNG.

Let's Begin

Create an Angular 9 Project

• We will be making use of the Microsoft Visual Studio Code as the IDE
• First we need to install NodeJS. Go to the NodeJS downloads page and download the installer.
• Next we will be installing Angular CLI

  npm install -g @angular/cli
  

• Next create a new Angular 9 project

  ng new primehelloworld
  

  
  
  
• Next start the project

  ng serve
  

  
  
  

If we now go to localhost:4200 - our angular project will get started.

Setting up PrimeNG

We will now be installing PrimeNG and related libraries for the Angular 9 project we just created

• Install primeng library as follows-

  npm install primeng --save
  

  
  
  
• Install Prime Icons as follows-

  npm install primeicons --save
  

  
  
  
• Install Font awesome as follows -

  npm install font-awesome --save
  

  
  
  
• Install Angular CDK as follows-

  npm install @angular/cdk --save
  

  
  
  
• Next in the angular.json we will be specifying the theme and the CSS in styles section

  "./node_modules/primeicons/primeicons.css",
  "./node_modules/primeng/resources/themes/arya-purple/theme.css",
  "./node_modules/primeng/resources/primeng.min.css",
  

  We have selected the arya-purple theme. You can select some other theme like nova as needed.

So we are done with the PrimeNG setup. Next we will be adding the Helloworld component to our angular project.

Create Helloworld Component

• Create a component named helloworld

  ng generate component helloworld
  

• Next we will be adding the routing for the helloworld component

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

• In the app.component.html remove everything and just keep the router-outlet tags

  <router-outlet></router-outlet>
  

• Start the angular project

  ng serve
  

  
  
  
• If we now go to localhost:4200/hello
  
  

Using PrimeNG Widgets - Button Widget

For using PrimeNG component we will be following 3 steps -

• Add the required PrimeNG Component Module to the app.module.ts
• If required create the backing data for the PrimeNG component in the typescript file. This is optional and may not be required for all the PrimeNG components.
• Finally add the primeng component in the html file

So let us add the PrimeNG Button Component using the above 3 steps-

• Add the buttonmodule in the app.module.ts file

  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 {ButtonModule} from 'primeng/button';
  
  
  @NgModule({
    declarations: [
      AppComponent,
      HelloworldComponent
    ],
    imports: [
      BrowserModule,
      AppRoutingModule,
      ButtonModule
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  

• The button component does not need any backing data.
• Add the button component in the html file

  <button pButton type="button" class="p-button-info"></button>
  <button pButton type="button" label="Primary"></button>
  <button pButton type="button" label="Secondary" class="p-button-secondary"></button>
  <button pButton type="button" label="Success" class="p-button-success"></button>
  <button pButton type="button" label="Info" class="p-button-info"></button>
  <button pButton type="button" label="Warning" class="p-button-warning"></button>
  <button pButton type="button" label="Help" class="p-button-help"></button>
  <button pButton type="button" label="Danger" class="p-button-danger"></button>				
  

If we now go to localhost:4200/hello

Download Source Code

Download it -
Angular 9 + PrimeNG Helloworld Example

See Also
PrimeNG-UI Components for AngularJS 2 Basic Example 
Creating a Simple AngularJS Application with ngRoute and Partials
Removing the # from the AngularJS URL
Use Google reCaptcha with AngularJS
Use AngularJS NgCloak directives Example