Using primeng with angular 4

The following two tabs change content below.
Prasad Kharkar is a java enthusiast and always keen to explore and learn java technologies. He is SCJP,OCPWCD, OCEJPAD and aspires to be java architect.

Till now we have seen how we can create some basic angular apps, from now on we will look for great component libraries. primeng provides a rich set of UI components. In this article we will be using primeng with angular 4. It would be great to go through angular material tutorial before this.

 

Using Primeng with Angular 4:

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.

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

Configure PrimeNG in app.

app.module.ts:

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

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:

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.

Share Button

Leave a Reply

Your email address will not be published. Required fields are marked *