Getting Started With PrimeNG in Angular

We’ve covered how to get started with the UI components from the popular Angular Material 2component library, so it’s only fitting that we explore other options for when it comes to UI components. PrimeNG from PrimeFaces is one such option. It offers a selection of pre-built themes and UI components for data presentation, form inputs, menus, charts, overlays and more.

Let’s quickly go over how to setup PrimeNG in an Angular 4+ project and explore some of the main components.

Installation & Setup

To get stated, install the required packages: primeng and font-awesome into your project:

$ yarn add primeng font-awesome

# or, using npm:
$ npm install primeng font-awesome

Styles

Then, assuming your project was started using the Angular CLI, add the required CSS files as part of the styles loaded by the Angular CLI:

.angular-cli.json (partial)

...
"styles": [
  "styles.css",
  "../node_modules/font-awesome/css/font-awesome.min.css",
  "../node_modules/primeng/resources/primeng.min.css",
  "../node_modules/primeng/resources/themes/darkness/theme.css"
],
...

Here we’re using the darkness theme, but you can choose between 17 available themes like kasper, voclain or cruze, just to give you a few examples.

You’ll need to restart your local server after adding to the .angular-cli.json configuration file.

App Module Setup

Now let’s setup our app module to include the UI components we want:

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AccordionModule } from 'primeng/primeng';
import { PanelModule } from 'primeng/primeng';
import { ButtonModule } from 'primeng/primeng';
import { RadioButtonModule } from 'primeng/primeng';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    AccordionModule,
    PanelModule,
    ButtonModule,
    RadioButtonModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

Notice how we also imported Angular’s BrowserAnimationsModule and FormsModule. The animation module is required by many PrimeNG’s components and the form module will be needed to use form input components like the radio button component.

There’s one caveat however with the above Angular module setup: all PrimeNG’s components will be imported. This can bloat your bundle size unnecessarily. The solution is to import each module using the full path instead:

app.module.ts (partial)

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AccordionModule } from 'primeng/components/accordion/accordion';
import { PanelModule } from 'primeng/components/panel/panel';
import { ButtonModule } from 'primeng/components/button/button';
import { RadioButtonModule } from 'primeng/components/radioButton/radioButton';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    AccordionModule,
    PanelModule,
    ButtonModule,
    RadioButtonModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

You can browse through your node_modules directory under /primeng/components if you need to find a component name.

Sampling the Components

Here’s a simple example that uses PrimeNG’s accordion, panel, radio buttonand button components. Notice how the components use the p prefix:

<p-accordion>
  <p-accordionTab header="Salads">
    Salads...
  </p-accordionTab>
  <p-accordionTab header="Pasta">
    Pasta...
  </p-accordionTab>
  <p-accordionTab header="Pizza" [selected]="true">
    <p-radioButton
      label="Double cheese 🧀🧀"
      name="pizza"
      value="double-cheese"
      [(ngModel)]="pizzaSelection">
    </p-radioButton><br>

    <p-radioButton
      label="Anchovy"
      name="pizza"
      value="anchovy"
      [(ngModel)]="pizzaSelection">
    </p-radioButton><br>

    <p-radioButton
      label="Meat lover's 🍖"
      name="pizza"
      value="meat-lover"
      [(ngModel)]="pizzaSelection">
    </p-radioButton>
  </p-accordionTab>
</p-accordion>

<br>

<p-panel header="Extras" *ngIf="pizzaSelection && pizzaSelection.length">
  🍕 Would you like extra cheese on your pizza?
  <button pButton type="button" label="Ok, yeah!"></button>
</p-panel>

And here’s what our template looks like…

Further Reading

With a total of over 70 components, and with an array of more complex components that accept structured data, covering everything in a short post would be impossible, so the easiest is to refer to the official website for a showcase and documentation of all the available components.