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

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.

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

The css dependencies are as follows, Prime Icons, theme of your choice and structural css of components.

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

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 to disable animations globally, import NoopAnimationsModule instead.

npm install @angular/animations --save

Angular CLI Integration

Dependencies

Add PrimeNG and PrimeIcons as dependencies.

  //...
  "primeng": "^7.0.0",
},

Styles Configuration

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

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