How to add PrimeNG UI components in ASP.Net Core 2 and Angular Web Application

This post explains how to add PrimeNG components in a web application built using ASP.Net Core 2 and Angular. PrimeNG is a collection of rich UI components for Angular. All widgets are open source and free to use under MIT License. PrimeNG is developed by PrimeTek Informatics, a vendor with years of expertise in developing open source UI solutions

The source code of this application is available in GitHub and you can download it from here.

There are other posts which explains more about Routing, Reactive Forms, Adding Material and PrimeNG componets to the application etc. You can find more details in below links.

Building a Web App using ASP.Net Core 2 and Angular5 Frameworks

How to add Material UI components in ASP.Net Core 2 and Angular Web Application

Reactive Forms in ASP.Net Core 2 and Angular Application

Let us start.

Install PrimeNG Package 

Install font-awesome

Majority of PrimeNG components (95%) are native and there are some exceptions having 3rd party dependencies. In addition, components require font-awesome for icons.

Import css files 

We require three css files for PrimeNG components. Font-awesome css file, a theme css file for PrimeNG. There are several themes available for PrimeNG components and location of these theme files is ‘node_modules\primeng\resources\themes’.

Add module imports in app.module.ts file

Open app.module.ts and add below module imports. Here we are going to import four modules from PrimeNG framework for ListBox, Button, Text Box and Checkbox. Also add import for BrowserAnimationsModule.

Add modules in imports section of AppModule

In the same app.module.ts there is an imports array. Add below modules in this array.

Create a component and add PrimeNG UI components

You can create a new component using Angular CLI command. Let’s create an employee component.

Open employee.component.html file and add below code

Open employee.component.ts file and add below code

That’s It !. Now run the application and if you have done everything correctly you should see the PrimeNG components in the page.

The source code of this application is available in GitHub and you can download from here.

There are other posts which explains more about Routing, Reactive Forms, Adding Material and PrimeNG componets to the application etc. You can find more details in below links.

Building a Web App using ASP.Net Core 2 and Angular5 Frameworks

How to add Material UI components in ASP.Net Core 2 and Angular Web Application

Reactive Forms in ASP.Net Core 2 and Angular Application

3 comments on “How to add PrimeNG UI components in ASP.Net Core 2 and Angular Web Application”:

Leave a Reply

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