PrimeNG UI Component for Angular
Introduction
In this article, we'll discuss, how to use PrimeNG UI Component in Angular application.PrimeNG is a free open source library of UI components,PrimeNG is developed by PrimeTek Informatics.PrimeNG library include 80 components in a single library,so there would be no need to add any other library for different UI.It include all components for UI like datatable,breadcrumbs,Input ,Multimedia,drag and drops ,menu etc
Note:
Make sure that we have Node.js installed and if not, then download and install the latest version of Node.js from Node.js website.Download Node.js
After downloading Node.js, install it and check the node and npm versions. To check the version, open command prompt, and type -
To check node.js version
node -v
To check npm version
npm -v
Install Angular CLI
We are going to create the project using Angular CLI ,so create this project we need angular cli installed , If you haven't, use the following command to install it
npm install -g @angular/cli
Create a new angular project 'PrimeUIDemo'
Create a new angular project ,Use the following command to create a new Angular project.
ng new PrimeUIDemo
Open this project in Visual studio code and Install required packages for PrimeNG
Open terminal View >terminal (ctrl + ~)
Install PrineNG packages
Use the following commands to install PrimeNG packages in the project
npm install primeng --save
npm install primeicons --save
Install angular animations
Install angular animation module in this project by using following command
npm install --save @angular/animations
Configure PrimeNG in app.module.ts
Open app.module.ts file and import components that we want to add in project.In this demo project we use panel ,button ,accordion components so first import required module for these components
import { PanelModule } from 'primeng/components/panel/panel';
import { ButtonModule } from 'primeng/components/button/button';
import { AccordionModule } from 'primeng/components/accordion/accordion';
Add in import
imports: [BrowserModule,
BrowserAnimationsModule,
FormsModule,
AppRoutingModule,
PanelModule,
ButtonModule,
AccordionModule
App.module.ts file
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { PanelModule } from 'primeng/components/panel/panel';
import { ButtonModule } from 'primeng/components/button/button';
import { AccordionModule } from 'primeng/components/accordion/accordion';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule, FormsModule,
AppRoutingModule,
AccordionModule,
PanelModule,
ButtonModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Open app.component.html file and remove all default html and add primeNG control ,we add two panel and in it add two accordin and a button in another panel
<p-panel>
<p-accordion>
<p-accordionTab header="INDIA">
About INDIA
</p-accordionTab>
<p-accordionTab header="USA">
About USA
</p-accordionTab>
</p-accordion>
</p-panel>
<p-panel>
<button pButton type="button" label="Click"></button>
</p-panel>
<router-outlet></router-outlet>
Future Expansion of this article
In next part we will discuss about some more controls of primeNG and create a project using primeUI components and database.
Reference
https://www.primefaces.org/primeng/#/