Angular - PrimeNG

---

---

The chapter will discuss the Angular PrimeNG library, including installation and setups, how to use it, examples, advantages, etc.

What is PrimeNG?

PrimeNG is a cohesiveUI component library specifically designed for Angular applications. It provides a collection of ready-to-use UI components (e.g., themes, icons, and components) such as "input fields," "buttons," "tables," "lists," "cards," etc, for building user interfaces. It allows developers to integrate these into their applications rather than building them from scratch.

However, PrimeNG is not directly compatible with "React", "Vue", or other front-end frameworks, as it is designed for Angular.

Here are a few UI components of the PrimeNG library which code you can directly use in your angular application:

Why to use a PrimeNG in Angular?

Here are several reasons to use the PrimeNG library in your Angular project:

• Easy Integration: PrimeNG is very easy to integrate with your Angular application.
• Responsive and Mobile-friendly: Angular applications developed using PrimeNG UI components are very compatible and responsive across various screen sizes.
• OpenSource & paid version: PrimeNG offers a free version with many useful and powerful components and a premium version (i.e., paid) as well for the advanced features.
• Frequent Updates: The library is actively maintained and regularly updated, which enables the latest features with best practices.

Installations and Setups

The PrimeNG UI Component library is a third-party library. To use its components in your application or project, you need to install it and add all the required dependencies first; only then can you use it.

Here is a step-by-step process for installing the PrimeNG library in your project:

Step 1: Use the following command to install the PrimeNG library in your Angular project:

npm install primeng@<version>

Here, @<version> refers to the version you want to install, which should be compatible with your project. For example: npm install [email protected].

Important! If you do not specify a specific version, it might throw an error because the project version could be different from the version of the library you are installing when using the simple npm install primeNG command without specifying a version.

Step 2: Open the angular.json file and add the code below within the styles section, in both the build and test sections:

"node_modules/primeng/resources/themes/lara-light-indigo/theme.css",
"node_modules/primeng/resources/primeng.min.css",

After completing the above steps, the installation is done, and now we are ready to use the PrimeNG library components in our project.

Use the following command to install PrimeNG icons, which provide different icons such as "social media icons", "trash", "view", "edit" icons, etc., and add the same inside the styles section:

npm install primeng@version primeicons

How to use PrimeNG in our Project?

Follow these steps to use the PrimeNG components in your application as needed:

Step 1: Open the primeNG website and explore all the components:

Adding InputText Component

InputText is an extension to a standard input element with "theming" and "keyfiltering". To add the InputText component to your project template, you need to follow these steps:

Step 2: Open the InputText component documentation on the PrimeNG website that you want to use it in your template:

Step 3: Import and add the InputText component API in your component or module to access and use it in your template:

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';
import { InputTextModule } from 'primeng/inputtext';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet, InputTextModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  title = 'myApp';
}

Step 4: Add the below InputText inbuilt code in your template (e.g., app.component.html):

<h3>Angular with PrimeNG</h3>
<input type="text" pInputText placeholder="Input text....."/>

Step 5: After adding the above code, run the application using the following command:

ng serve

Output

Navigate the URL localhost:4200 to see the output of the above code:

Adding Button Component

Let's see how to add a Button component to your project template:

Step 1: Just like the InputText component, open the Button component on the PrimeNG website and go to the features section:

Step 2: Import and add the API in your component or module that you want to use (e.g., app.component.ts):

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';
import { InputTextModule } from 'primeng/inputtext';
import { ButtonModule } from 'primeng/button';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet, InputTextModule, ButtonModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  title = 'myApp';
}

Step 3: Add the Button Component in your template (e.g., app.component.html):

<h3>Angular with PrimeNG</h3>
<input type="text" pInputText placeholder="Input text....."/>
<p-button label="Submit" />

Output

The output of the above code will be displayed as follows: