We are going to install primeng UI libraries for our applications with this tutorial onwards. Although the official website explains how to install and use it, I am taking our own apps forwards to use primeng UI component library.

Install primeng:

Go to your project directory and run following command.

npm install primeng –save

Now, we want to use primeng in our bikes app. So include it in package.json in dependencies section.

"dependencies": {
    // other libraries
    "primeng": "^4.1.0",
    "font-awesome": "^4.7.0"   
  }

Now, we need to have primeng libraries included in bikes app to be used.

Configure PrimeNG in app.

app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { BikeInfoComponent } from './bike-info/bike-info.component';
import { BikesComponent } from './bikes/bikes.component';
import { BikeService } from './bike.service';

import { AppRoutingModule } from './app-routing/app-routing.module';
import { MaterialModule, MdList, MdListItem } from '@angular/material'
import { DataListModule }  from 'primeng/primeng';


@NgModule({
  declarations: [
    AppComponent,
    BikeInfoComponent,
    BikesComponent,
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    AppRoutingModule,
    DataListModule,
    MaterialModule.forRoot()
  ],
  providers: [BikeService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Note that we have included import { DataListModule } from ‘primeng/primeng’; and imported DataListModule in imports also.

imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    AppRoutingModule,
    DataListModule,
    MaterialModule.forRoot()
  ],

Note that DataListModule is imported here also. These configurations are required for using primeng with angular 4. We will use the list component to render list of bikes as usual.

bikes.component.html:

<p-dataList [value]="bikes">
  <p-header>
    List of Bikes
  </p-header>
  <ng-template let-bike pTemplate="item">
    <div>{{bike.model}}</div>
  </ng-template>
</p-dataList>

We are using primeng with angular 4 in above template. <p-datalist> is a primeng component responsible for rendering datalist.

These are the only changes required in addition to our previous angular material tutorial. Simply npm start to run the app and you should be able to see list of bikes. Full example is available at https://github.com/theJavaGeek/angular/tree/getting-started-with-primeng You can clone the angular repository and checkout branch getting-started-with-primeng. 

I hope this article helped using primeng with angular 4.