Setup PrimeNG setup consists of three steps; download, load and import. Various development configurations such as System.js or Webpack are supported.

Download

PrimeNG is available at npm, run the following commands to download the modules to your project. PrimeNG depends on PrimeUI so install it as well.


npm install primeng --save
npm install primeui --save

Load

PrimeNG is distributed in commonjs format and a module loader of your choice is required. Sample configuration with System.js would be as follows;


 System.config({
    defaultJSExtensions: true,
    packages: {
        "/angular2": {"defaultExtension": false}
    },
    map: {
        "/primeng": "node_modules/primeng"
    }
});

If you'd like to use webpack instead, scroll bottom to the webpack section.

Import

Components are imported from 'primeng/primeng' in your application code.


import {Accordion} from 'primeng/primeng';

Dependencies

PrimeUI provides optimized dependencies for PrimeNG via its distribution. These are the primeui-ng-all.js and primeui-ng-all.css files. The js file includes jquery, jquery-ui core, the PrimeUI widgets and the css file contains jquery-ui core along with structural css of PrimeUI widgets. The PrimeUI widgets in these two files are the ones utilized by PrimeNG not all the widgets. If you simply need the widgets and prefer your own jquery, use primeui-ng.js instead. Components also require font-awesome for icons and a theme of your choice for skinning.


<link rel="stylesheet" type="text/css" href="node_modules/primeui/themes/delta/theme.css" />
<link rel="stylesheet" type="text/css" href="PATH/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="node_modules/primeui/primeui-ng-all.min.css" />
<script src="node_modules/primeui/primeui-ng-all.min.js"></script>

jQuery (Optional)

In an Angular2 application, you don't need to use jQuery directly however some of the PrimeNG components are based on existing jQuery plugins (e.g. Schedule) although many others are native components. Dependencies section at the documentation of each component states the origin such as Native, jQuery/PrimeUI or an external library (e.g. charts.js). jQuery based ones in PrimeUI are optimized for PrimeNG integration using a technique called enhanced mode where plugin assumes dom is already created by PrimeNG component. As a result, jQuery plugin does not manipulate dom, only adds lightweight behaviors and low level requirements such as positioning. Changes as a result of one or two way binding are properly reflected between the UI and model. In addition components are destroyed whenever page is navigated away via router. In future as PrimeNG grows, remaining jQuery based ones will be replaced with native implementations where appropriate.

Quickstart with System.js

An example starter application based on angular2-quickstart is available at GitHub.

index.html


<html>

<head>
    <title>PrimeNG QuickStart</title>

    <!-- CSS for PrimeUI -->
    <link rel="stylesheet" type="text/css" href="node_modules/primeui/themes/bootstrap/theme.css" />
    <link rel="stylesheet" type="text/css" href="app/resources/icons/css/font-awesome.min.css" />
    <link rel="stylesheet" type="text/css" href="node_modules/primeui/primeui-ng-all.min.css" />

    <!-- 1. Load libraries -->
    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>

    <!-- JS for PrimeUI -->
    <script src="node_modules/primeui/primeui-ng-all.min.js"></script>

    <!-- 2. Configure SystemJS -->
    <script>
        System.config({
            defaultJSExtensions: true,
            packages: {
                "/angular2": {"defaultExtension": false}
            },
            map: {
                'primeng': 'node_modules/primeng'
            }
        });
        System.import('app/boot').then(null, console.error.bind(console));
    </script>

    <script src="node_modules/rxjs/bundles/Rx.js"></script>
    <script src="node_modules/angular2/bundles/angular2.dev.js"></script>

</head>

<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>

</html>

boot.ts


import {bootstrap}    from 'angular2/platform/browser';
import {AppComponent} from './app.component';

bootstrap(AppComponent);

app.component.ts

Sample app component uses PrimeNG InputText.


import {Component} from 'angular2/core';
import {InputText} from 'primeng/primeng';

@Component({
	selector: 'my-app',
	template: `
        <h1>My First PrimeNG App</h1>
        <input type="text" pInputText/>
    `,
    directives: [InputText]
})
export class AppComponent {

}

Running npm install and then npm start, starts the lite-server, opens up a browser and runs the application.

Quickstart with Webpack

An example starter application with webpack is available at GitHub.

index.html


<html>

  <head>
    <title>PrimeNG QuickStart with Webpack</title>

    <link rel="stylesheet" type="text/css" href="node_modules/primeui/themes/delta/theme.css" />
    <link rel="stylesheet" type="text/css" href="app/resources/icons/css/font-awesome.min.css" />
    <link rel="stylesheet" type="text/css" href="node_modules/primeui/primeui-ng-all.min.css" />
    <link rel="stylesheet" type="text/css" href="app/resources/css/site.css"/>
  </head>

  <!-- 3. Display the application -->
  <body>
    <my-app>Loading...</my-app>
    <script src="dist/bundle.js"></script>
  </body>

</html>

package.json


{
  "name": "primeng-quickstart-webpack",
  "version": "v1.0.0-SNAPSHOT",
  "scripts": {
    "postinstall": "npm run typings install",
    "typings": "typings",
    "build": "webpack",
    "start": "webpack-dev-server --inline"
  },
  "license": "ISC",
  "dependencies": {
      "angular2": "2.0.0-beta.17",
      "systemjs": "0.19.26",
      "es6-shim": "^0.35.0",
      "reflect-metadata": "0.1.2",
      "rxjs": "5.0.0-beta.6",
      "zone.js": "0.6.12",
      "primeng": "1.0.0-beta.4",
      "primeui": "4.1.9"
  },
  "devDependencies": {
    "script-loader": "^0.6.1",
    "ts-loader": "^0.8.1",
    "typescript": "^1.8.10",
    "typings": "^0.8.1",
    "webpack": "^1.3.0",
    "webpack-dev-server": "^1.14.1"
  }
}

webpack.config.js


module.exports = {
  entry: './app/boot.ts',
  output: {
    filename: './dist/bundle.js'
  },
  resolve: {
    modulesDirectories: ['node_modules'],
    root: './app',
    extensions: ['', '.webpack.js', '.web.js', '.ts', '.js'],
  },
  module: {
    loaders: [
      { test: /\.tsx?$/, loader: 'ts-loader' }
    ],
    noParse: [ /zone\.js\/dist\/.+/, /angular2\/bundles\/.+/ ]
  }
};

boot.ts


import 'script!primeui/primeui-ng-all.min.js';
import 'angular2/bundles/angular2-polyfills';
import {bootstrap}    from 'angular2/platform/browser';
import {AppComponent} from './app.component';
import 'rxjs/Rx';

bootstrap(AppComponent);

app.component.ts

Sample app component uses PrimeNG InputText.


import {Component} from 'angular2/core';
import {InputText} from 'primeng/primeng';

@Component({
selector: 'my-app',
template: `
    <h1>My First PrimeNG App</h1>
    <input type="text" pInputText/>
`,
directives: [InputText]
})
export class AppComponent {

}

Running npm install and then npm start, starts the webpack-dev-server, opens up a browser and runs the application.

Angular2-Webpack-Starter

Angular2-Webpack-Start is a starter kit featuring an advanced development setup. We've our own fork that adds PrimeNG for the UI.

Angular2-Seed

Angular2-Seed is a modular seed project to kickstart an Angular2 app fast. Similarly to the webpack-starter, We've our own fork that adds PrimeNG for the UI.