Get StartedPrimeNG 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
npm install primeicons --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 PrimeIcons for icons.

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

<link rel="stylesheet" type="text/css" href="/node_modules/primeicons/primeicons.css" />
<link rel="stylesheet" type="text/css" href="/node_modules/primeng/resources/themes/nova-light/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.

Animations

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
 

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 PrimeIcons as dependencies.

"dependencies": {
  //...
  "primeng": "^7.0.0",
  "primeicons": "^1.0.0"
},
 

Styles Configuration

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

"styles": [
  "node_modules/primeicons/primeicons.css",
  "node_modules/primeng/resources/themes/nova-light/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.