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

npm install primeng --save

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.

npm install font-awesome --save

1	npm install font-awesome --save

Import css files

@import "~font-awesome/css/font-awesome.css";
@import "~primeng/resources/themes/omega/theme.css";
@import "~primeng/resources/primeng.css";

@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.

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';

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.

BrowserAnimationsModule,
InputTextModule,
ListboxModule,
CheckboxModule,
ButtonModule,

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.

ng generate component employee

1	ng generate component employee

Open employee.component.html file and add below code

<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>

<div class="panel-heading">Employee</div>

</div>

<p-listbox [options]="cities1" [(ngModel)]="selectedCity1"></p-listbox>

</div>

<p-checkbox [(ngModel)]="checked"></p-checkbox>

</div>

</div>

Open employee.component.ts file and add below code

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' } }
    ];
  }

}

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

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”:

Pingback: How to add Material UI components in ASP.Net Core 2 and Angular Web Application – Hive
Pingback: Building a Web App using ASP.Net Core 2 and Angular5 Frameworks – Hive
Pingback: Reactive Forms in ASP.Net Core 2 and Angular Application – Hive

Hive

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

Related

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

Leave a Reply Cancel reply

Share this:

Related

Related posts:

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

ASP.Net Core Angular Multilevel push menu application

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

Leave a Reply Cancel reply