Using PrimeNG themes with angular apps

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.

Latest posts by Prasad Kharkar (see all)

We have used primeNG UI library in previous article. We need to make app beautiful to enhance user experience. Instead of creating our own css we are using primeNG themes with angular apps.


Using PrimeNG themes with Angular Apps:

Please note that it is necessary to have primeng configured for your app. Previous article explains how to do it. Now we are simply going to add the styling to make our previous app beautiful.


Add styles to angular-cli.json:

As soon as you create an angular app using angular cli, a json file named angular-cli.json is created. It has all the configuration information. When we install primeNG, we also get some themes which are located in /node_modules/primeng/resources/themes directory.

Open your angular-cli.json and add below lines to it.

Import styles in index.html:

We are done using primeng themes in angular app. Other files are same as that of previous article hence not mentioned specifically.


Run your app using npm start and hit url http://localhost:4200/bikes. You should be able to view a beautiful list as given below. I hope this article helped understand using primeng themes with angular apps.

Share Button

2 comments for “Using PrimeNG themes with angular apps

Leave a Reply

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