Setup PrimeNG is a rich set of open source native Angular2 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 a sample for SystemJS and Webpack.

Import

UI components are configured as modules, once PrimeNG is downloaded and configured, modules and apis can be imported from 'primeng/primeng' shorthand in your application code.


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

Importing from primeng/primeng will load all other components as well, to only import a specific component pattern would be;


//import {ComponentModule} from 'primeng/components/componentname/componentname';
//import {InterfaceName} from 'primeng/common/api';

import {AccordionModule} from 'primeng/components/accordion/accordion';
import {MenuItem} from 'primeng/common/api';

Dependencies

Majority of PrimeNG components 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, note that you may change the theme with another one of your choice.


<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" />
<link rel="stylesheet" type="text/css" href="YOUR_PATH/font-awesome.min.css" />

Here is the list of components with 3rd party dependencies. The css for calendar and slider is included in primeng.min.css so there is no need to add them separately, as a side note these two components will be reimplemented as native Angular2 components in near future. For others both javascipt and css dependencies should be added such as css and js of quill.

Component Dependency Roadmap
Calendar jQuery, jQuery UI Datepicker, jQuery UI Timepicker Reimplement as native.
Slider jQuery, jQuery UI Slider Reimplement as native.
Schedule FullCalendar and Moment.js Keep.
InputMask jQuery InputMask plugin Reimplement as native.
Editor Quill Editor Keep.
GMap Google Maps Keep.
Charts Charts.js 2.1.x Keep.

Quickstart with System.js

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

package.json


{
  "name": "angular2-quickstart",
  "version": "1.0.0",
  "scripts": {
    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
    "lite": "lite-server",
    "postinstall": "typings install",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "typings": "typings"
  },
  "license": "ISC",
  "dependencies": {
    "@angular/common": "2.0.0-rc.5",
    "@angular/compiler": "2.0.0-rc.5",
    "@angular/core": "2.0.0-rc.5",
    "@angular/forms": "0.3.0",
    "@angular/http": "2.0.0-rc.5",
    "@angular/platform-browser": "2.0.0-rc.5",
    "@angular/platform-browser-dynamic": "2.0.0-rc.5",
    "@angular/router": "3.0.0-rc.1",
    "@angular/router-deprecated": "2.0.0-rc.2",
    "@angular/upgrade": "2.0.0-rc.5",
    "systemjs": "0.19.27",
    "core-js": "^2.4.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.6",
    "zone.js": "^0.6.12",
    "angular2-in-memory-web-api": "0.0.15",
    "primeng": "^1.0.0-beta.14"
  },
  "devDependencies": {
    "concurrently": "^2.0.0",
    "lite-server": "^2.2.0",
    "typescript": "^1.8.10",
    "typings":"^1.0.4"
  }
}

index.html


<html>
  <head>
    <title>PrimeNG QuickStart</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <link rel="stylesheet" type="text/css" href="node_modules/primeng/resources/themes/omega/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/primeng/resources/primeng.min.css" />

    <!-- 1. Load libraries -->
     <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
        
    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
  </head>
  <!-- 3. Display the application -->
  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

systemjs.config.js


/**
 * System configuration for Angular 2 samples
 * Adjust as necessary for your application needs.
 */
(function(global) {
  // map tells the System loader where to look for things
  var map = {
    'app':                        'app', // 'dist',
    '@angular':                   'node_modules/@angular',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    'rxjs':                       'node_modules/rxjs',
    'primeng':                    'node_modules/primeng'
  };
  // packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'app':                        { main: 'main.js',  defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
    'primeng':                    { defaultExtension: 'js' }
  };
  var ngPackageNames = [
    'common',
    'compiler',
    'core',
    'forms',
    'http',
    'platform-browser',
    'platform-browser-dynamic',
    'router',
    'router-deprecated',
    'upgrade',
  ];
  // Individual files (~300 requests):
  function packIndex(pkgName) {
    packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
  }
  // Bundled (~40 requests):
  function packUmd(pkgName) {
    packages['@angular/'+pkgName] = { main: 'bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
  }
  // Most environments should use UMD; some (Karma) need the individual index files
  var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
  // Add package entries for angular packages
  ngPackageNames.forEach(setPackageConfig);
  var config = {
    map: map,
    packages: packages
  };
  System.config(config);
})(this);

app.component.ts

Sample app component uses PrimeNG InputText.


import {Component} from '@angular/core';

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

}

app.module.ts


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

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

@NgModule({
  imports:      [BrowserModule,InputTextModule],
  declarations: [AppComponent],
  bootstrap:    [AppComponent]
})
export class AppModule { }

main.ts


import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModule} from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

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

Quickstart with Webpack

An example minimal starter with webpack is available at GitHub.

package.json


{
  "name": "primeng-quickstart-{webpack}",
  "version": "v1.0.0-SNAPSHOT",
  "scripts": {
    "postinstall": "npm run typings install",
    "typings": "typings",
    "tsc": "tsc",
    "build": "webpack",
    "webpack": "webpack",
    "webpack:w": "webpack -w",
    "webpack-dev-server": "webpack-dev-server",
    "start": "npm run tsc && npm run webpack-dev-server"
  },
  "license": "ISC",
  "dependencies": {
    "@angular/common": "2.0.0-rc.5",
    "@angular/compiler": "2.0.0-rc.5",
    "@angular/core": "2.0.0-rc.5",
    "@angular/forms": "0.3.0",
    "@angular/http": "2.0.0-rc.5",
    "@angular/platform-browser": "2.0.0-rc.5",
    "@angular/platform-browser-dynamic": "2.0.0-rc.5",
    "@angular/router": "3.0.0-rc.1",
    "@angular/upgrade": "2.0.0-rc.5",
    "systemjs": "0.19.27",
    "core-js": "^2.4.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.6",
    "zone.js": "^0.6.12",
    "angular2-in-memory-web-api": "0.0.15",
    "primeng": "^1.0.0-beta.14"
  },
  "devDependencies": {
    "typescript": "^1.8.10",
    "typings": "^1.3.0",
    "webpack": "^1.13.1"
  }
}

webpack.config.js

3 bundles are generated, one for polyfills, another one that includes Angular with PrimeNG and last one with application only code. CommonsChunkPlugin is enabled to avoid having duplicated modules. For further optimization like compression for production, visit webpack tutorial.

polyfills.ts

Includes libraries to run Angular2 in older browsers


import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/set';
import 'core-js/es6/weak-map';
import 'core-js/es6/weak-set';
import 'core-js/es6/typed';
import 'core-js/es6/reflect';
import 'core-js/es7/reflect';
import 'zone.js/dist/zone';

vendor.ts

Bundles Angular2 and PrimeNG


import '@angular/platform-browser';
import '@angular/platform-browser-dynamic';
import '@angular/core';
import '@angular/common';
import '@angular/forms';
import '@angular/http';
import '@angular/router';
import 'primeng/primeng';
import 'rxjs/Rx';

app.component.ts

Sample app component uses PrimeNG InputText.


import {Component} from '@angular/core';

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

}

app.module.ts


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

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

@NgModule({
    imports:      [BrowserModule,InputTextModule],
    declarations: [AppComponent],
    bootstrap:    [AppComponent]
})
    export class AppModule { }

main.ts


import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModule} from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

webpack.config.ts


var webpack = require("webpack");

module.exports = {
    entry: {
        'polyfills': './app/polyfills.js',
        'vendor': './app/vendor.js',
        'app': './app/main.js'
    },
    output: {
        path: __dirname,
        filename: "./prod/[name].js"
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name: ['app', 'vendor', 'polyfills']
        })
    ]
};

index.html


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

    <link rel="stylesheet" type="text/css" href="node_modules/primeng/resources/themes/omega/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/primeng/resources/primeng.min.css" />
  </head>

  <!-- 3. Display the application -->
  <body>
    <my-app>Loading...</my-app>
    
    <script src="prod/polyfills.js"></script>
    <script src="prod/vendor.js"></script>        
    <script src="prod/app.js"></script>
  </body>

</html>