PrimeNG with Angular in a Nutshell

🎯 Why Use PrimeNG?

Ready-made UI components – Why reinvent the wheel when PrimeNG gives you one that spins smoothly?
Theming & Styling – Comes with pre-built themes so your app doesn’t look like a default Bootstrap disaster.
Highly Customizable – Want a pink button with rounded edges and a shadow? No problem.
Active Community & Support – Unlike some abandoned libraries, this one actually gets updates.

🚀 Setting Up PrimeNG in Angular

Step 1: Install PrimeNG and PrimeIcons

Run this command in your Angular project:

1
npm install primeng primeicons

Also, install PrimeFlex for responsive layouts (optional but recommended):

1
npm install primeflex

Step 2: Import PrimeNG Styles

In your angular.json, add the styles:

1
2
3
4
5
"styles": [
"node_modules/primeng/resources/themes/lara-light-blue/theme.css",
"node_modules/primeng/resources/primeng.min.css",
"node_modules/primeicons/primeicons.css"
]

Or, if you’re using SCSS, you can import them directly in styles.scss:

1
2
3
@import "node_modules/primeng/resources/themes/lara-light-blue/theme.css";
@import "node_modules/primeng/resources/primeng.min.css";
@import "node_modules/primeicons/primeicons.css";

🛠️ Using PrimeNG Components

Now for the fun part!

Let’s slap some PrimeNG components into an Angular component.

🏆 Button Component

1
<button pButton type="button" label="Click Me" class="p-button-success"></button>

That single line of HTML gives you a styled button with a success theme!

No need to battle CSS.

📑 Table Component

Want to display data like a pro?

Use the p-table component.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<p-table [value]="users" [paginator]="true" [rows]="5">
<ng-template pTemplate="header">
<tr>
<th>Name</th>
<th>Email</th>
<th>Role</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-user>
<tr>
<td>{{ user.name }}</td>
<td>{{ user.email }}</td>
<td>{{ user.role }}</td>
</tr>
</ng-template>
</p-table>

And in your app.component.ts:

1
2
3
4
5
users = [
{ name: "Alice", email: "alice@example.com", role: "Admin" },
{ name: "Bob", email: "bob@example.com", role: "User" },
{ name: "Charlie", email: "charlie@example.com", role: "Moderator" }
];

🎭 Dialog Component (Modals)

Need a popup dialog to pester users with confirmation messages?

1
2
3
4
5
6
7
8
<p-dialog header="Confirm" [(visible)]="display" [modal]="true">
<p>Are you sure you want to proceed?</p>
<p-footer>
<button pButton type="button" label="Yes" class="p-button-success" (click)="confirm()"></button>
<button pButton type="button" label="No" class="p-button-danger" (click)="display=false"></button>
</p-footer>
</p-dialog>
<button pButton type="button" label="Show Dialog" (click)="display=true"></button>

And in your component:

1
2
3
4
5
display = false;
confirm() {
console.log("User clicked Yes!");
this.display = false;
}

Boom!

You’ve got a dialog box without wrestling with JavaScript modals.

🎨 Theming & Customization

PrimeNG has themes like Lara, Bootstrap, and Fluent.

You can switch themes by changing the CSS import in angular.json.

Want a dark mode?

Just change the theme:

1
2
3
"styles": [
"node_modules/primeng/resources/themes/lara-dark-blue/theme.css"
]

You can also customize themes using CSS variables.

Example:

1
2
3
4
:root {
--surface-card: #222;
--text-color: #fff;
}

Now your app looks sleek and modern. 😍

🔥 Wrapping Up

PrimeNG saves you tons of time when building Angular apps.

It gives you a ton of components, a beautiful UI, and easy customization.

🚀 Want to make your Angular app look amazing? Use PrimeNG!

📌 Key Ideas

Topic	Summary
Why PrimeNG?	Pre-built UI components, theming, and customization
Installation	`npm install primeng primeicons`
Basic Usage	Use components like `p-button`, `p-table`, and `p-dialog`
Theming	Change themes and use CSS variables for custom styles