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
1 |
npm install primeng --save |
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.
1 |
npm install font-awesome --save |
Import css files
1 2 3 |
@import "~font-awesome/css/font-awesome.css"; @import "~primeng/resources/themes/omega/theme.css"; @import "~primeng/resources/primeng.css"; |
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.
1 2 3 4 5 |
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import {InputTextModule} from 'primeng/inputtext'; import {ListboxModule} from 'primeng/listbox'; import {CheckboxModule} from 'primeng/checkbox'; import {ButtonModule} from 'primeng/button'; |
Add modules in imports section of AppModule
In the same app.module.ts there is an imports array. Add below modules in this array.
1 2 3 4 5 |
BrowserAnimationsModule, InputTextModule, ListboxModule, CheckboxModule, ButtonModule, |
Create a component and add PrimeNG UI components
You can create a new component using Angular CLI command. Let’s create an employee component.
1 |
ng generate component employee |
Open employee.component.html file and add below code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<div class="panel panel-info"> <div class="panel-heading">Employee</div> <div class="panel-body"> <div class="row"> <div class="col-md-3"> <input type="text" pInputText placeholder="First Name"/> </div> <div class="col-md-3"> <p-listbox [options]="cities1" [(ngModel)]="selectedCity1"></p-listbox> </div> <div class="col-md-3" style="margin-top:15px"> <p-checkbox [(ngModel)]="checked"></p-checkbox> </div> </div> <div class="row"> <div class="col-md-3"> <button pButton type="button" label="Click"></button> </div> </div> </div> </div> |
Open employee.component.ts file and add below code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
import { Component, OnInit } from '@angular/core'; import { SelectItem } from 'primeng/api'; @Component({ selector: 'app-employee', templateUrl: './employee.component.html', styleUrls: ['./employee.component.css'] }) export class EmployeeComponent implements OnInit { cities1: SelectItem[]; constructor() { } ngOnInit() { this.cities1 = [ { label: 'New York', value: { id: 1, name: 'New York', code: 'NY' } }, { label: 'Rome', value: { id: 2, name: 'Rome', code: 'RM' } }, { label: 'London', value: { id: 3, name: 'London', code: 'LDN' } }, { label: 'Istanbul', value: { id: 4, name: 'Istanbul', code: 'IST' } }, { label: 'Paris', value: { id: 5, name: 'Paris', code: 'PRS' } } ]; } } |
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
3 comments on “How to add PrimeNG UI components in ASP.Net Core 2 and Angular Web Application”: