Post
Ask Question

PrimeNG UI Components For Angular 7 Application

PrimeNG is a free and open source library of UI components. It is developed by PrimeTek Informatics. PrimeNG provides 80+ UI components in a single library, so there would be no need to add any other library for different UIs. It includes all UI components like Datatable, Breadcrumbs, Input, Accordion, Notification message box, Multimedia, and Menu etc.

 PrimeNG UI Components For Angular 7 Application

Note
Make sure that you have Node.js installed. If not, then install the latest version of Node.js by Downloading Node.js from Node.js website.

PrimeNG UI Components For Angular 7 Application
 
After downloading Node.js, install it and check the node and npm versions. To check the version, open command prompt, and type - 
 
node -v

npm -v

Step 1

Create a new Angular project. Use the following command to create a new Angular project.

ng new PrimeUIDemo

PrimeNG UI Components For Angular 7 Application

Step 2 

Open this project in Visual Studio Code and install required packages for PrimeNG.

Open the Terminal by going to View >terminal or by pressing Ctrl + ~.

Use the following commands to install PrimeNG packages in the project.
  1. npm install primeng --save  
  2. npm install primeicons --save  
PrimeNG UI Components For Angular 7 Application
 
PrimeNG UI Components For Angular 7 Application 
 
Step 3
 
Some PrimeNG components use Angular animations to improve the user interface, so we need to install Angular animation.
 
Install the Angular animation module in this project by using the following command.
  1. npm install --save @angular/animations  

PrimeNG UI Components For Angular 7 Application 

Now, open the package.json file and check if PrimeNG is installed.
 
PrimeNG UI Components For Angular 7 Application 
 
Step 4 - Style Configuration
 
Configure required styles at the styles section in angular.json file or style.css.
 
PrimeNG UI Components For Angular 7 Application 
 
Step 5
 
Configure PrimeNG module in the app.module.ts file. Let's import the required module in this file.
 
App.module.ts fille 
  1. import { BrowserModule } from '@angular/platform-browser';  
  2. import { NgModule } from '@angular/core';  
  3. import { BrowserAnimationsModule } from "@angular/platform-browser/animations";  
  4. import { AppRoutingModule } from './app-routing.module';  
  5. import { AppComponent } from './app.component';  
  6. import { AccordionModule } from 'primeng/components/accordion/accordion';  
  7. import {OrderListModule} from 'primeng/orderlist';  
  8. @NgModule({  
  9.   declarations: [  
  10.     AppComponent  
  11.   ],  
  12.   imports: [  
  13.     BrowserModule,  
  14.     AppRoutingModule,BrowserAnimationsModule,AccordionModule,OrderListModule  
  15.   ],  
  16.   providers: [],  
  17.   bootstrap: [AppComponent]  
  18. })  
  19. export class AppModule { }  
Step 7
 
Now, open app.component.html and add PrimeNG accordion, a list. Add the following lines in this file.
  1. <p-accordion>  
  2.   <p-accordionTab header="India">  
  3.     <p-orderList [value]="Indiastate">  
  4.       <ng-template let-state pTemplate="item">  
  5.         <div class="ui-helper-clearfix">  
  6.           <div style="font-size:16px;float:left;margin:5px">{{state}}</div>  
  7.         </div>  
  8.       </ng-template>  
  9.     </p-orderList>  
  10.   </p-accordionTab>  
  11.   <p-accordionTab header="Australia">  
  12.     <p-orderList [value]="Ausstate">  
  13.       <ng-template let-Ausstate pTemplate="item">  
  14.         <div class="ui-helper-clearfix">  
  15.           <div style="font-size:16px;float:left;margin:5px">{{Ausstate}}</div>  
  16.         </div>  
  17.       </ng-template>  
  18.     </p-orderList>  
  19.   </p-accordionTab>  
  20.   <p-accordionTab header="SriLanka">  
  21.     <p-orderList [value]="Slstate">  
  22.       <ng-template let-Slstate pTemplate="item">  
  23.         <div class="ui-helper-clearfix">  
  24.           <div style="font-size:16px;float:center;margin:5px">{{Slstate}}</div>  
  25.         </div>  
  26.       </ng-template>  
  27.     </p-orderList>  
  28.   
  29.   </p-accordionTab>  
  30. </p-accordion>  
  31.    
Step 8
 
Open app.component.ts file and add the following code. 
  1. import { Component } from '@angular/core';  
  2. @Component({  
  3.   selector: 'app-root',  
  4.   templateUrl: './app.component.html',  
  5.   styleUrls: ['./app.component.css']  
  6. })  
  7. export class AppComponent {  
  8.   Indiastate = [  
  9.     "Rajasthan",  
  10.     "UP",  
  11.     "Mp",  
  12.     "Delhi",  
  13.     "Goa",  
  14.     "Gurjat",  
  15.     "Punjab"  
  16.   ];  
  17.   Ausstate = [  
  18.   
  19.     "New South Wales",  
  20.     "Queensland",  
  21.     "South Australia",  
  22.     "Tasmania"  
  23.   ];  
  24.   Slstate = [  
  25.     "Kandy",  
  26.     "Galle",  
  27.     "Kegalle",  
  28.     "Mannar"  
  29.   ];  
  30. }  

Step 9

Run the project and check the result.
 
PrimeNG UI Components For Angular 7 Application 
 Click on the country name and check the list of states.
 
PrimeNG UI Components For Angular 7 Application

Summary

 
In this article, we learned the basics of PrimeNG, a free and open source library of UI components for Angular applications.


Similar Articles