PrimeNG – UI components for Angular 2

Angular 2 framework will become a complete platform for developing Web apps when it’ll offer a library of rich UI components. Angular Material 2 currently offers 16 UI components, which is not enough for commercial applications. Based on the current speed of development, it seems that Angular Material 2 will need another year to complete.

Meanwhile there are third-party libraries of UI components that you can use with your Angular 2 apps today. In this blog I’ll show you how to get started with the library called PrimeNG that already includes more than 60 UI components.

Java developers are familiar with the library PrimeFaces that is pretty popular for developing of the UI of JSF-based Web apps. PrimeNG is a port of this library for Angular 2 apps.

This library offers such components as Accordion, Panel, Grid, Dialog, Menu, charts, drag and drop, and many more. To see all PrimeNG components visit

I’ve created a small seed project that can get you started in a minute. In this project I use three PrimeNG components: InputText, Button, and ConfirmDialog. Each PrimeNG component is offered as a module, and you need to add the required components to your @NgModule declaration, for example:

    imports:      [ BrowserModule,
    declarations: [ AppComponent ],
    bootstrap:    [ AppComponent ]

Each component is well documented, and you can see the code snippets, properties, events handled by the component as well as try it in action. For example, check out the description of the ConfirmDialog component.

The library itself can be installed using npm from a command line or by adding the following line to package.json (I’ve used the Beta 17 version):

“primeng”: “^1.0.0-beta.17”,

The Release Candidate of PrimeNG should be available within a month.

To install and run this seed project, perform these steps:

1. Download and install Node.js from
2. Clone the repository into any directory and open it in the command prompt or terminal window.
3. Run npm install
4. Run npm start

The last command will start the app in your browser and you’ll see a window that looks like this:


Enter your name and click on the button Greet me, and if your name is Yakov, you’ll see the following dialog window:

If you like the look of this confirmation dialog click on the button Yes. The dialog window will go away and you’ll see the following:


The entire code of the AppComponent that shows this window looks as follows:

import {Component} from '@angular/core';
import {ConfirmationService, Message} from "primeng/components/common/api";

    selector: 'app',
    template: `<h1>Hello from PrimeNG!</h1>
               <input type="text" pInputText placeholder="Enter your name"
               (change)="onChangeEvent($event)" />
               <button pButton type="text" 
                    (click)="greetMe()" icon="fa-check" label="Greet me"></button>

               <p> {{theUserSaid}}
               <p-confirmDialog width="400"></p-confirmDialog>
    providers:  [ConfirmationService]
export class AppComponent {
    name: string;
    userResponse: Message[]=[];
    theUserSaid: string;

    constructor(private confirmationService: ConfirmationService) {}

    onChangeEvent({target}){ = target.value;


            message: ` Hey ${}, do you like PrimeNG?`,
            header: 'Greeting',
            icon: 'fa fa-question-circle',
            accept: () => {
                this.userResponse = [];
                this.userResponse.push({severity:'info', summary:'Confirmed', 
                                      detail:'I like PrimeNG'});
                this.theUserSaid = + " responded " + 
            reject: () => {
                this.userResponse = [];
                this.userResponse.push({severity:'info', summary:'Rejected', 
                      detail:'I don\'t really like PrimeNG'});
                this.theUserSaid = + " responded " +

By the end of this month I’ll be flying to Romania to run my Angular 2 workshop for a private client, and they asked me to add a unit on PrimeNG. Will do.


13 thoughts on “PrimeNG – UI components for Angular 2

  1. Helpful, practical info as usual Yakov; thanks for sharing.

    Wondering how you think the Wijmo Ang2 components compare to PrimeNG and Angular Material (not necessarily “which is better”, but more what you think the strength/weakness trade-offs are); and if you think there are any other options, beyond these three, that are mature enough to be worth considering right now. Thanks!

  2. Is anybody using webpack and primeng with ViewEncaplulation emulated or enabled? It seems primeng was not designed to support it

    1. I tried using ViewEncapsulated.Native but it removes stylings from PrimeNG components.

      ViewEncapsulation.None and ViewEncapsulation.Emulated work fine. This is behavior is not specific to Webpack.

  3. Yakov,
    First, thanks for the excellent review and seed project.

    Second, I was wondering if you could give any pointers on using primeng in other than the most basic case? I can easily get the trivial cases working of using the PrimeNG components in app.component and its html, but every attempt I’ve made to use primeng components in my own components has met with errors like

    Unhandled Promise rejection: Template parse errors:
    'p-toolbar' is not a known element:
    1. If 'p-toolbar' is an Angular component, then verify that it is part of this module.
    2. If 'p-toolbar' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR ->]

    "): ToolbarComponent@0:0 ; Zone: ; Task: Promise.then ; Value:

    I’m working with the angular-seed and have followed their instructions for integrating primeng but there’s some secret sauce I’m missing, as I’m pretty new to Angular.

    Thanks in advance for any advice you can offer.

    1. Hi! Any luck with this? I am having the same issue with the Gird. Every time I make my own module it comes up with the same error as yours.

  4. I have issue , i can append as template. But i cannot use directly in html page. do we have any way to achieve that.???

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s