PrimeNG is available at npm, run the following command to download the module to your project.
npm install primeng --save
PrimeNG supports System.JS loader, a configuration is necessary in your application to load PrimeNG.
System.config({ defaultJSExtensions: true, packages: { "/angular2": {"defaultExtension": false} }, map: { "/primeng": "node_modules/primeng" } });
Components are imported from 'primeng/primeng' in your application code.
import {Accordion} from 'primeng/primeng';
PrimeNG is built on top of PrimeUI so you need to install it as a dependency. Visit PrimeUI setup page for details.
In an Angular2 application, you don't need to use jQuery directly however some of the PrimeNG components are based on existing jQuery plugins in PrimeUI and others are native components. jQuery based ones 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.
An example starter application based on angular2-quickstart is available at GitHub.
<html> <head> <title>PrimeNG QuickStart</title> <!-- CSS for PrimeUI --> <link rel="stylesheet" type="text/css" href="app/resources/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="app/resources/primeui.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="app/resources/jquery.js"></script> <script src="app/resources/jquery-ui.js"></script> <script src="app/resources/primeui.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>
import {bootstrap} from 'angular2/platform/browser'; import {AppComponent} from './app.component'; bootstrap(AppComponent);
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 { }