Setting up PrimeNG with the Angular CLI

I loved hacking on Primefaces when I was working fulltime in JSF2. In fact, the whole component-based development thing is really what attracted me to Angular 2.

But since switching, I’ve really been looking for a solid component library to get work done. I’ve been having great success with Semantic UI for styling, but nothing beats being able to bind a paginated list to an Array and getting all the strong typing!

Enter PrimeNG aka Primefaces for Angular 2! This library brings all the stunning engineering and pragmatism from Primefaces to the Angular 2 domain. And it totally rocks!

Here’s that list of my PocketEntries rendering in a PrimeNG paginated OrderList. In the words of Kanye, “Enjoy the greatness!”

And there are only a few lines of code backing all that magic.

But the $1M question is, “How do you integrate it with the Angular CLI?”

Turns out that it’s a snack…

Integrating PrimeNG with Angular CLI

I’m sure the existing setup page will cover all this at some stage. But until then, here’s the steps you’ll need to use PrimeNG with Angular CLI.

First, install the dependency, and save it to your project…

npm install primeng --save
npm install font-awesome --save

Once that is installed, you’ll have a ./node_modules/primeng/ directory (and a ./node_modules/font-awesome/ directory). Edit the angular-cli.json file in your root directory to include the PrimeNG style tags you’ll need:

"styles": [
    "styles.css",
    "../node_modules/font-awesome/css/font-awesome.css",
    "../node_modules/primeng/resources/themes/omega/theme.css" , // or whatever theme you prefer
    "../node_modules/primeng/resources/primeng.css"
],

You’ll need font-awesome for some of the icon glyphs, so I added it to the styles above.

With the styles in place, it’s time to drag in the modules you’ll need to update your app.module.ts to load the modules of the components you need.

You’ll find the name of the module you need to load on the Documentation tab of the component you want to use on the PrimeNG website. For example, on the OrderList page, the Documentation tab says:

import {OrderListModule} from 'primeng/primeng';

So you’ll need to add that line to the top of your app.module.ts. Then finally, include the component in your imports: section of app.module.ts towards the bottom of the file (which makes sure the p-dataList tag becomes active in your markup. So, your app.module.ts will have something like:

imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    OrderListModule, // this line brings the magic of p-dataList to your markup!  
]

With those bits in play, you can start using the p-dataList tag in your actual markup:

<p-dataList [value]="entries" [paginator]="true" [rows]="5" [paginatorPosition]="both">

In my case entries is an Array<PocketEntry> property on my controller, which I can iterate over to output each Pocket link entry.

To make the iteration happen, inside the p-dataList markup you specify a template directive which gets output for each iteration of my entries (in a very similar style to good ‘ol Primefaces).

I want to call each iteration entry, so the line I need is:

<template let-entry>

Then I’m free to start referencing that entry variable as I choose..

    <div class="content">
        <a class="header">{{entry.resolved_title}}</a>
        <div class="meta">
            <span class="cinema"><a [href]='entry.resolved_url'>{{entry.resolved_url}}</a></span>
        </div>
        <div class="description">
            <p>{{entry.excerpt}}</p>
        </div>
    </div> <!-- etc... -->

Super productive!

It’s been amazing to see the PrimeNG library take shape - there are already dozens of components in place - all with the super high engineering standards that the Prime team deliver (check out their source code and enjoy the greatness!)

Awesome work Prime!