Search Tutorials


Angular 9 + PrimeNG Tutorial- Hello World Example | JavaInUse

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
    

    create angular project
  • Next start the project
    ng serve
    

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

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
    

    angular install primeng
  • Install Prime Icons as follows-
    npm install primeicons --save
    

    angular install primeicons
  • Install Font awesome as follows -
    npm install font-awesome --save
    

    angular install font-awesome
  • Install Angular CDK as follows-
    npm install @angular/cdk --save
    

    angular install cdk
  • 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
    

    start angular project
  • If we now go to localhost:4200/hello
    start angular  cdk

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
angular primeng button

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