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>
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
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.