Integrating PrimeNG with Angular CLI

1.) Install the dependency, and save it to your project:

 npm install primeng --save
 npm install font-awesome --save

Once that is installed, you’ll have a ./node_modules/primeng/ directory (and a ./node_modules/font-awesome/ directory)

2.) In your project folder there is a file called styles.css, add the following lines:

 @import url('../node_modules/primeng/resources/themes/omega/theme.css');
 @import url('../node_modules/primeng/resources/primeng.min.css');
 @import url('../node_modules/font-awesome/css/font-awesome.min.css');

3.) Install the animations

 npm install @angular/animations

With the animation installed, update the app.module.ts to load the module

Replace this line of code: 

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

with

 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

followed by the imports.

 BrowserAnimationsModule

Your app.module.ts will have something like:

 @NgModule({
 imports: [
      BrowserAnimationsModule,
      //...
 ],
      //...
 })

With the styles in place, it’s time to add the modules you’ll need. For this example, we'll just use the basic P-Button

4.) Add the following line to the top of your app.module.ts

 import {ButtonModule} from 'primeng/primeng';

Then finally, include the component in your imports: section of app.module.ts towards the bottom of the file. Your app.module.ts will have something like:

 @NgModule({
 imports: [
      BrowserAnimationsModule,
      //...,
      ButtonModule
 ],
      //...
 })

With everything in place, you can now start using p-Button tag in your actual markup.

5.) Add the following lines to your app.component.html