Use PrimeNG Components in Angular

Posted By : Ajeet Kumar | 20-Jun-2022

we will be creating Angular 12 + PrimeNG example. We will be looking at how to set up the project using Angular 12 and PrimeNG.

* Create an Angular 12 project

  •  We will be making use of the Microsoft Visual Studio Code as the IDE

  • First, we need to install NodeJS. Go to the NodeJS downloads page and download the installer.

  • Next, we will be installing Angular CLI 

npm install -g @angular/cli

 

  • Next create a new Angular 12 project

ng new primengaddangular

 

  • Next start the project

ng serve

 

* If we now go to localhost:4200 - our angular project will get started.

* Setting up PrimeNG

We will now be installing PrimeNG and related libraries for the Angular 12 project we just created

 

  • Install primeng library

npm install primeng --save

 

  • Install Prime Icons

npm install primeicons --save

 

  • Install Angular CDK

npm install @angular/cdk --save

 

* Next in the angular.json we will be specifying the theme and the CSS in styles section

The css dependencies are as follows, Prime Icons, theme of your choice and structural css of components.

./node_modules/primeicons/primeicons.css”,
./node_modules/primeng/resources/themes/lara-light-blue/theme.css”,
./node_modules/primeng/resources/primeng.min.css”

Using PrimeNG Widgets - Button Widget

For using PrimeNG component we will be following 3 steps -

  • Add the required PrimeNG Component Module to the app.module.ts

  • If required create the backing data for the PrimeNG component in the typescript file. This is optional and may not be required for all the PrimeNG components.

  • Finally add the primeng component in the html file

So let us add the PrimeNG Button Component using the above 3 steps-

  • Add the buttonmodule in the app.module.ts file

import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';

import { ButtonComponent } from './button/button.component';

import {ButtonModule} from 'primeng/button';

 

@NgModule({

declarations: [ AppComponent, ButtonComponent ],

imports: [ BrowserModule, AppRoutingModule, ButtonModule ],

providers: [],

bootstrap: [AppComponent] })

export class AppModule { }

 

*The button component does not need any backing data.

 

  • Add the button component in the html file

<button pButton type="button" class="p-button-info"></button>

<button pButton type="button" label="Primary"></button>

<button pButton type="button" label="Secondary" class="p-button-secondary"></button>

<button pButton type="button" label="Success" class="p-button-success"></button>

<button pButton type="button" label="Info" class="p-button-info"></button>

<button pButton type="button" label="Warning" class="p-button-warning"></button>

<button pButton type="button" label="Help" class="p-button-help"></button>

<button pButton type="button" label="Danger" class="p-button-danger"></button>

 

 

 

About Author

Author Image
Ajeet Kumar

Ajeet is working as a Frontend Developer with years of expertise in the industry. He possesses a strong knowledge and understanding of the latest technologies, and has hands-on experience in Angular, HTML5, CSS3, JavaScript, Bootstrap, PrimeNG (Angular UI Component Library), Nebular (Customizable Angular UI Library), Auth and Security, tailwind CSS, StrAPI, Git, GitHub, Git-Lab, and more. He excels in API integration in Angular, web development, development testing, and deployments. He consistently contributes to the company's value through his deliverables in various client projects, including Pando Mall, Musical School, Crypstarter, Metaverse, Hatrik Marketplace, and many others.

Request for Proposal

Name is required

Comment is required

Sending message..