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 http://www.primefaces.org/primeng.

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:

@NgModule({
    imports:      [ BrowserModule,
                    InputTextModule,
                    ButtonModule,
                    ConfirmDialogModule
    ],
    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 https://nodejs.org
2. Clone the repository https://github.com/yfain/primeng_seed 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";

@Component({
    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}){
        this.name = target.value;
    }

    greetMe(){

        this.confirmationService.confirm({
            message: ` Hey ${this.name}, 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 = this.name + " responded " + 
                                     this.userResponse[0].detail;
            },
            reject: () => {
                this.userResponse = [];
                this.userResponse.push({severity:'info', summary:'Rejected', 
                      detail:'I don\'t really like PrimeNG'});
                this.theUserSaid = this.name + " responded " +
                          this.userResponse[0].detail;
            }
        });
    }
}

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.