PrimeNG is a popular UI component library for Angular applications, providing a rich set of high-quality components to build sophisticated web interfaces. This guide will walk you through the process of integrating PrimeNG into your Angular project.
Step 1: Create A New Angular Project
If you don’t already have an Angular project, you can create one using the Angular CLI. Open your terminal and run:
ng new primeng-app
cd primeng-app
Then remove everything from ‘app.component.html’ except for <router-outlet />
Step 2: Install PrimeNG, PrimeFlex, and PrimeIcons
npm install primeng primeflex primeicons
Step 3: Configure Angular Project to Use PrimeNG, PrimeFlex, and PrimeIcons
In the angular.json file, add PrimeNG, PrimeFlex and PrimeIcons styles to the styles array:
"styles": [
"node_modules/primeng/resources/themes/aura-light-amber/theme.css",
"node_modules/primeng/resources/primeng.min.css",
"node_modules/primeflex/primeflex.css",
"node_modules/primeicons/primeicons.css",
"src/styles.css"
],
Keep in mind that you can change the theme you use for your theme.css. At this point, you are set up.
Step 4: Testing It Out
If you are creating a standalone application which is the new standard after Angular version 17 then you would import your modules in each component you would want to use them in. Otherwise, you would import them into your app.modules file. Let’ test it out in our standalone app by creating a component called homepage.
ng g c homepage
Next, let’s create a route to the homepage show it shows up when we serve our application. In the ‘app.routes.js’ file your code should look like this,
import { Routes } from '@angular/router';
import { HomepageComponent } from './homepage/homepage.component';
export const routes: Routes = [
{path: '', component: HomepageComponent},
];
Now in our ‘homepage.component.html’ file add the following code
<div class="grid grid-nogutter surface-section text-800">
<div class="col-12 md:col-6 p-6 text-center md:text-left flex align-items-center ">
<section>
<span class="block text-6xl font-bold mb-1">Create the screens</span>
<div class="text-6xl text-primary font-bold mb-3">your visitors deserve to see</div>
<p class="mt-0 mb-4 text-700 line-height-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<button pButton pRipple label="Learn More" type="button" class="mr-3 p-button-raised"></button>
<button pButton pRipple label="Live Demo" type="button" class="p-button-outlined"></button>
</section>
</div>
<div class="col-12 md:col-6 overflow-hidden">
<img src="https://images.unsplash.com/photo-1498050108023-c5249f4df085?q=80&w=2072&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Image" class="md:ml-auto block md:h-full"
style="clip-path: polygon(8% 0, 100% 0%, 100% 100%, 0 100%); object-fit: cover; width: 100%; height: 100%;">
</div>
</div>
Let’s serve up our application at this point to see what it looks like.
You’ll notice the buttons do not show up correctly. To fix this we need to go to our ‘homepage.component.ts’ file and import prime button
import { ButtonModule } from 'primeng/button';
So your ‘homepage.comonent.ts’ file should look like this,
import { Component } from '@angular/core';
import { ButtonModule } from 'primeng/button';
@Component({
selector: 'app-homepage',
standalone: true,
imports: [ButtonModule],
templateUrl: './homepage.component.html',
styleUrl: './homepage.component.css'
})
export class HomepageComponent {
}
You see after saving and serving your application it should look like this
At there you go, everything is install and seem to be working correctly.