PrimeNG is available at npm, if you have an existing application run the following commands to download the modules to your project.
npm install primeng --save
npm install primeui --save
PrimeNG is distributed in commonjs format, a module manager of your choice is required and this guide provides a sample for SystemJS and Webpack.
Once PrimeNG is downloaded and configured, components and apis can be imported from 'primeng/primeng' in your application code.
import {Accordion} from 'primeng/primeng';
import {Header} from 'primeng/primeng';
import {MenuItem} from 'primeng/primeng';
Importing from primeng/primeng will load all other components as well, to only import a specific component pattern would be;
//import {ComponentName} from 'primeng/components/componentname/componentname';
//import {InterfaceName} from 'primeng/common';
import {Accordion} from 'primeng/components/accordion/accordion';
import {Header} from 'primeng/common';
import {MenuItem} from 'primeng/common';
Majority of PrimeNG components are native and there are some exceptions having 3rd party dependencies. The native components require structural and skinning css files from PrimeUI which are primeui-ng.all.css and a theme of your choice like omega. Components also require font-awesome for icons.
The required css dependencies are as follows;
<link rel="stylesheet" type="text/css" href="node_modules/primeui/themes/omega/theme.css" />
<link rel="stylesheet" type="text/css" href="YOUR_PATH/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="node_modules/primeui/primeui-ng-all.min.css" />
Here is the list of components with 3rd party dependencies. The css for calendar and slider is included in primeui-ng-all.min.css so there is no need to add them separately. For others both javascipt and css dependencies should be added such as css and js of quill. If you prefer a bundle of jquery, calendar and slider use node_modules/primeui/primeui-ng-all.min.js from PrimeUI.
Component | Dependency |
---|---|
Calendar | jQuery, jQuery UI Datepicker, jQuery UI Timepicker |
Slider | jQuery, jQuery UI Slider |
Schedule | FullCalendar and Moment.js |
InputMask | jQuery InputMask plugin |
Editor | Quill Editor |
GMap | Google Maps |
Charts | Charts.js 2.1.x |
An example starter application based on angular2-quickstart is available at GitHub.
{
"name": "primeng-quickstart",
"version": "v1.0.0-SNAPSHOT",
"scripts": {
"postinstall": "npm run typings install",
"tsc": "tsc",
"tsc:w": "tsc -w",
"lite": "lite-server",
"start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
"typings" : "typings"
},
"license": "ISC",
"dependencies": {
"@angular/common": "2.0.0-rc.4",
"@angular/compiler": "2.0.0-rc.4",
"@angular/core": "2.0.0-rc.4",
"@angular/forms": "0.2.0",
"@angular/http": "2.0.0-rc.4",
"@angular/platform-browser": "2.0.0-rc.4",
"@angular/platform-browser-dynamic": "2.0.0-rc.4",
"@angular/router": "3.0.0-beta.2",
"@angular/upgrade": "2.0.0-rc.4",
"systemjs": "0.19.31",
"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.14",
"primeui": "^4.1.14",
"primeng": "v1.0.0-beta.12"
},
"devDependencies": {
"concurrently": "^2.0.0",
"lite-server": "^2.2.0",
"typescript": "^1.8.10",
"typings":"^1.0.4"
}
}
<html>
<head>
<script>document.write('<base href="' + document.location + '" />');</script>
<title>PrimeNG QuickStart with SystemJS</title>
<link rel="stylesheet" type="text/css" href="node_modules/primeui/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/primeui/primeui-ng-all.min.css" />
<script src="node_modules/es6-shim/es6-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>
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
</head>
<body>
<my-app>Loading...</my-app>
</body>
</html>
(function(global) {
// map tells the System loader where to look for things
var map = {
'app': 'app', // 'dist',
'rxjs': 'node_modules/rxjs',
'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
'@angular': 'node_modules/@angular',
'primeng': 'node_modules/primeng'
};
// packages tells the System loader how to load when no filename and/or no extension
var packages = {
'app': { main: 'boot.js', defaultExtension: 'js' },
'rxjs': { defaultExtension: 'js' },
'angular2-in-memory-web-api': { defaultExtension: 'js' },
'primeng': { defaultExtension: 'js' }
};
var packageNames = [
'@angular/common',
'@angular/compiler',
'@angular/core',
'@angular/http',
'@angular/platform-browser',
'@angular/platform-browser-dynamic',
'@angular/router',
'@angular/testing',
'@angular/upgrade',
'@angular/forms'
];
// add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' }
packageNames.forEach(function(pkgName) {
packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
});
var config = {
map: map,
packages: packages
}
// filterSystemConfig - index.html's chance to modify config before we register it.
if (global.filterSystemConfig) { global.filterSystemConfig(config); }
System.config(config);
})(this);
import {bootstrap} from '@angular/platform-browser-dynamic';
import {AppComponent} from './app.component';
bootstrap(AppComponent);
Sample app component uses PrimeNG InputText.
import {Component} from '@angular/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.
An example minimal starter with webpack is available at GitHub.
{
"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.4",
"@angular/compiler": "2.0.0-rc.4",
"@angular/core": "2.0.0-rc.4",
"@angular/forms": "0.2.0",
"@angular/http": "2.0.0-rc.4",
"@angular/platform-browser": "2.0.0-rc.4",
"@angular/platform-browser-dynamic": "2.0.0-rc.4",
"@angular/router": "3.0.0-beta.2",
"@angular/upgrade": "2.0.0-rc.4",
"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.14",
"primeng": "^1.0.0-beta.11",
"primeui": "^4.1.12"
},
"devDependencies": {
"@ngrx/devtools": "^1.4.0",
"source-map-loader": "^0.1.5",
"script-loader": "^0.6.1",
"ts-loader": "^0.8.1",
"typescript": "^1.8.10",
"typings": "^1.3.0",
"webpack": "^1.13.1"
}
}
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.
var webpack = require("webpack");
module.exports = {
entry: {
'polyfills': './app/polyfills.js',
'vendor': './app/vendor.js',
'app': './app/boot.js'
},
output: {
path: __dirname,
filename: "./prod/[name].js"
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: ['app', 'vendor', 'polyfills']
})
]
};
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';
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';
Entry point for application code only bundle.
//library imports: shims, pollyfills, etc
import {bootstrap} from '@angular/platform-browser-dynamic';
import {provide} from '@angular/core';
import {AppComponent} from './app.component';
import {enableProdMode} from '@angular/core';
import {LocationStrategy,HashLocationStrategy} from '@angular/common';
import {disableDeprecatedForms, provideForms} from '@angular/forms';
//enableProdMode();
bootstrap(AppComponent, [
disableDeprecatedForms(),
provideForms(),
provide(LocationStrategy, {useClass: HashLocationStrategy})
]);
<html>
<head>
<title>PrimeNG QuickStart with Webpack</title>
<link rel="stylesheet" type="text/css" href="node_modules/primeui/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/primeui/primeui-ng-all.min.css" />
<script src="node_modules/zone.js/dist/zone.min.js"></script>
<script src="prod/polyfills.js"></script>
<script src="prod/vendor.js"></script>
<script src="prod/app.js"></script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>