Get Started PrimeNG is a rich set of open source native Angular UI components.

Download

PrimeNG is available at npm, if you have an existing application run the following command to download it to your project.


npm install primeng --save

Load Configuration

PrimeNG is distributed in commonjs format, a module manager of your choice is required and this guide provides samples for SystemJS, WebPack and Angular CLI.

Import

UI components are configured as modules, once PrimeNG is downloaded and configured, modules and apis can be imported from 'primeng/*' shorthand in your application code. Documentation of each component states the import path. 


import {AccordionModule} from 'primeng/accordion';     //accordion and accordion tab
import {MenuItem} from 'primeng/api';                 //api

Dependencies

Majority of PrimeNG components (95%) are native and there are some exceptions having 3rd party dependencies. In addition, components require font-awesome for icons.

The css dependencies are as follows, font awesome, theme of your choice and structural css of components.


<link rel="stylesheet" type="text/css" href="YOUR_PATH/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="/node_modules/primeng/resources/themes/omega/theme.css" />
<link rel="stylesheet" type="text/css" href="/node_modules/primeng/resources/primeng.min.css" />

Here is the list of components with 3rd party dependencies.

Component Dependency
Schedule FullCalendar and Moment.js
Editor Quill Editor
GMap Google Maps
Charts Charts.js 2.7.x
Captcha Google Recaptcha

Animations with Angular 4+

Various components utilize angular animations to improve the user experience, starting with Angular 4 animations have their own module so you need to import BrowserAnimationsModule to your application. If you prefer not to use NoopAnimationsModule instead.


npm install @angular/animations --save



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

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        //...
    ],
    //...
})
export class YourAppModule { }

Angular CLI Integration

Angular CLI is the official CLI tool for Angular. We strongly suggest using Angular CLI when starting an Angular project.

Dependencies

Add PrimeNG and FontAwesome as a dependency


"dependencies": {
  //...
  "primeng": "^4.1.0",
  "font-awesome": "^4.7.0"
},

Styles Configuration

Configure required styles at the styles section, example below uses the Omega theme.


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

That is all, you may now import PrimeNG components, for a working example visit the PrimeNG CLI QuickStart sample at GitHub.

Angular Seed Integration

Angular2 Seed is an alternative modular starter project, there is an official entry at the project wiki describing how to use PrimeNG with seed.

QuickStart with System.js

The official quickstart example of Angular uses System.JS and we have extended it to add PrimeNG. Visit the PrimeNG-Quickstart at GitHub for an example.

QuickStart with Webpack

There is also a webpack version of the The official quickstart example of Angular and we have extended it to add PrimeNG. Visit the PrimeNG-Quickstart-Webpack at GitHub for an example.

External Articles