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 loader of your choice is required and this guide provides a sample for SystemJS whereas a Webpack starter is in progress.
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 |
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.1",
"@angular/compiler": "2.0.0-rc.1",
"@angular/core": "2.0.0-rc.1",
"@angular/http": "2.0.0-rc.1",
"@angular/platform-browser": "2.0.0-rc.1",
"@angular/platform-browser-dynamic": "2.0.0-rc.1",
"@angular/router": "2.0.0-rc.1",
"@angular/router-deprecated": "2.0.0-rc.1",
"@angular/upgrade": "2.0.0-rc.1",
"systemjs": "0.19.27",
"es6-shim": "^0.35.0",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.6",
"zone.js": "^0.6.12",
"angular2-in-memory-web-api": "0.0.7",
"primeng": "1.0.0-beta.7",
"primeui": "4.1.12"
},
"devDependencies": {
"concurrently": "^2.0.0",
"lite-server": "^2.2.0",
"typescript": "^1.8.10",
"typings": "^0.8.1"
}
}
<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" />
<link rel="stylesheet" type="text/css" href="app/resources/css/site.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/router-deprecated',
'@angular/testing',
'@angular/upgrade',
];
// 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.