Tuesday, February 14, 2017

How to use PrimeNG in AngularJS2 project

Step 1:- Enter into your project folder
i.e we had project name as AddSubDivMultiProject
Open command prompt and enter into
C:\eclipse_workspace_angularjs2\AddSubDivMultiProject>
run following command
npm install primeng --save
This will install primeng folder inside your project node_modules folder
C:\eclipse_workspace_angularjs2\AddSubDivMultiProject>npm install primeng --save
add-sub-div-multi-project@0.0.0 C:\eclipse_workspace_angularjs2\AddSubDivMultiProject
`-- primeng@2.0.0
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.0.17: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN @ngtools/webpack@1.2.4 requires a peer of webpack@2.2.0 but none was installed.
npm WARN extract-text-webpack-plugin@2.0.0-rc.2 requires a peer of webpack@^2.2.0 but none was installed.
PLEASE CONFIRM YOU GET primeng FOLDER INSIDE YOUR PROEJCT NODE_MODULES FOLDER
Step 2:- Lets say we want to use button of PrimeNg in our project i.e. http://www.primefaces.org/primeng/#/button
import the required module in our project using belwo line. This line need to be written in our app.modules.ts
import {ButtonModule} from 'primeng/primeng';
Also add the same in imports in @NgModule
Step 3:- Add following line in our *.HTML files

<! -- button pButton type="button" class="ui-button-info" label="Click ttt"><!--/button>
Step 4:- Add following line in our styles.css files please at the same level of index.html
/* You can add global styles to this file, and also import other style files */
@import '../node_modules/primeng/resources/primeng.min.css';
@import '../node_modules/primeng/resources/themes/omega/theme.css';

No comments: