Primeng with Angular example from scratch with tutorials | Primeng Angular Tutorial Example

In my previous article, we covered the basics of primeng UI library. In this article, we are going to learn how to set up an angular project with primeng using angular cli.

Learn Angular4/5/6 with primeng components.

Angular Cli is a tool to generate an angular project from scratch. It is a code generator for the folder structure of the angular project. The advantages with cli, saves a lot of time instead of writing code from scratch and error-prone as it generates configuration required files

First, you need to have angular cli installed globally using this command

npm install @angular/cli -g

Once cli is installed, please issue a below command to check the version

B:\angularclidemo>ng --version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|

Angular CLI: 6.1.1
Node: 8.10.0
OS: win32 x64

Package                      Version
@angular-devkit/architect    0.7.1
@angular-devkit/core         0.7.1
@angular-devkit/schematics   0.7.1
@schematics/angular          0.7.1
@schematics/update           0.7.1
rxjs                         6.2.2
typescript                   2.7.2

This shows angular cli is installed with the latest angular 6 version. Next step is to create an Angular project with CLI tool.

ng new myapp

This creates an angular prototype with all initial configuration and main module and initial component. next, go to your project directory, install the dependencies using below command

B:\angularclidemo\myapp\ npm install

Once you installed dependencies, start web server using CLI command as below

ng serve

This starts the server listening to 4200. on accessing this http://localhost:4200/ page, you will get below page as per screenshot Angular cli example

Install primeng with Angular 6

Next step is to install primeng dependencies, Font awesome is required for primeng installation. Go to the project directory and run this below command

npm install primeng --save

npm install font-awesome --save

This installs required dependencies in the project. This command create/modify the following things-  added this entry under dependencies section in package.json

"dependencies": {
  "font-awesome": "^4.7.0",
    "primeng": "^6.0.2",

It creates and installs dependencies in the following folder


Global Styles configuration 

You need to configure primeng styles in the angular application at application using a configuration file. Below angular 6 versions, the configuration file is angular-cli.json For Angular 6 and more versions, the configuration file is angular.json file Angular-cli.json is a project level configuration file which contains global configuration changes. Add this thing under the style section in angular.json file

"styles": [


we added the theme of Omega, there are a lot of themes(Redmond, rocket, darkness ...) available with _primeng installation_. Please see the complete list of themes [![primeng themes configuration](](

You need to restart after modifying angular.json file to reflect changes Add primeng components to angular application Before using components in Angular code, you need to enable animation module

#### Add BrowserAnimationsModule

 A lot of components required to _angular animations module_ to have better experience. Animation modules are located in _@angular/animations module_. You need to install this dependency.

npm install @angular/animations --save

Once the animation module is installed, Import BrowserAnimationModule in primeng.module.ts as like below. primeng.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { PrimengComponent} from './primeng.component';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; // added this

  declarations: [

  imports: [
    BrowserAnimationsModule // added this
  providers: [],
  bootstrap: [PrimengComponent]
export class PrimengAppModule { }

if you are designing input forms, you need to do statement - import { FormsModule } from ‘@angular/forms’ like BrowserAnimationModule Next is adding primeng modules. We are going to add a simple button with displaying the Hello World message. We need to add ButtonModule in our application like below

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { PrimengComponent} from './primeng.component';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import { ButtonModule } from 'primeng/components/button/button';// added this

  declarations: [
  imports: [
    ButtonModule// added this
  providers: [],
  bootstrap: [PrimengComponent]
export class PrimengAppModule { }

And add buttons in primeng.component.html file

<div style="text-align:center">
      Primeng Angular 6 Demo
   <p-button  label="p-button" (onClick)="clickEvent()"></p-button>
   <button pButton type="button" label="Normal Button"  (click)="clickEvent()" ></button>
Clicks Count: {{count}}

added click event method in primeng.component.ts

import { Component } from '@angular/core';

  selector: 'app-root',
  templateUrl: './primeng.component.html',
  styleUrls: ['./primeng.component.css']
export class PrimengComponent {
    count: number = 0;

  clickEvent() {

first button p-button is primeng button which has onClick event handler with brackets surrounded. the second button is a normal HTML button which added pButton as an attribute to make it primeng button here the event is normal click event with surrounded braces Please note that every primeng components are always prefixed with p. And the output of this application is shown as below primeng Angular 6 application from scratch

Primeng Aot production support 

ng serve   This commands creates development bundle, build and deploy with starting the web server. ng build –prod -    This builds bundle for the production code. For production code, debug disabled, static resources minification etc. ng build –prod –aot    This builds bundles code for production with aot flag enabled. aot is an ahead of time compiler for converting HTML and typescript into efficient javascript. primeng added support for aot production deployment too.

Hope you liked my article, Please like and share on facebook/twitter.


Unknown - Jan 1, 2019

This comment has been removed by a blog administrator.

Similar Posts