Angular PrimeNG Introduction

Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that helps to create an attractive user interface with enhanced functionality. These components can be utilized for great styling & are used to make responsive websites with very much ease. There are different functionalities that are supported by the different components, such as the Ripple effect. It is an animation that is supported by the Button Component, which is optional & by default it is disabled & it can be enabled globally in the main component by injecting PrimeNGConfig. The animation is mainly utilized to enhance the overall user experience with the various components.

The PrimeNG facilitates the various components, panels, overlays, menus, charts, etc, which helps to make a single-page-application, that is a web application, that loads a single HTML page and only a part of the page instead of the entire page gets updated with every click of the mouse. This improves the overall user experience, along with adding the different functions to perform the specific task, based on the used components.

In this article, we will know an overview, its syntax & installation procedures, along with understanding its implementation through the examples.

Installation Syntax:

npm install primeng --save

Steps for installing the Angular PrimeNG: Before we proceed to install the Angular PrimeNG, we must have installed the Angular CLI in the system. Please refer to the Angular CLI Angular Project Setup article for the detailed installation procedure. Make sure the Angular CLI & Node Package Manager is installed properly. To check the version installed, run the below commands:

• For NodeJS version:

node --version

• For the NPM version:

npm -V OR npm --version

• For Angular CLI version:

ng -V or ng --version

After completing the pre-requisite installation, we can now install & create the Angular PrimeNG project in the local system using the command-line interface.

Steps for creating the Angular PrimeNG Application:

Step 1: Create an Angular application using the following command.

ng new appname

Step 2: After creating your project folder i.e. appname, move to the current working directory where the new app just has been created, by using the following command:

cd appname

Step 3: Install PrimeNG in your given directory.

npm install primeng --save
npm install primeicons --save

Project Structure: After successful installation, it will look like the following image:

Project Structure

Example: This example illustrates the implementation of Angular PrimeNG.

app.component.html

<h2>GeeksforGeeks</h2>
<h5>Angular PrimeNG Component</h5>
<p-panelMenu [model]="gfg"></p-panelMenu>

app.component.ts

import { Component } from "@angular/core";
import { MenuItem } from "primeng/api";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
})
export class AppComponent {
  gfg: MenuItem[];

  ngOnInit() {
    this.gfg = [
      {
        label: "Web Technology",
        items: [
          {
            label: "HTML",
          },
          {
            label: "CSS",
            items: [
              {
                label: "Pure CSS",
              },
              {
                label: "Bulma CSS",
              },
              {
                label: "Foundation CSS",
              },
              {
                label: "Semantic UI",
              },
            ],
          },
          {
            label: "Javascript",
            items: [
              {
                label: "Angular",
              },
              {
                label: "React",
              },
              {
                label: "FabricJS",
              },
              {
                label: "VueJS",
              },
            ],
          },
          {
            label: "PHP",
          },
          {
            label: "Database Management System",
          },
        ],
      },
      {
        label: "Data Structures",

        items: [
          {
            label: "Linked List",
            items: [
              {
                label: "Singly Linked List",
              },
              {
                label: "Doubly Linked List",
              },
              {
                label: "Circular Linked List",
              },
            ],
          },
          {
            label: "Stack",
          },
          {
            label: "Queue",
          },
          {
            label: "Tree",
          },
          {
            label: "Graph",
          },
          {
            label: "Heap",
          },
        ],
      },
    ];
  }
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';

import { AppComponent } from './app.component';
import { PanelMenuModule } from 'primeng/panelmenu';

@NgModule({
imports: [BrowserModule,
          BrowserAnimationsModule,
          PanelMenuModule],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule {}

Output:

Example 2: This example describes the dialog Component in Angular PrimeNG.

app.component.html

<h2>GeeksforGeeks</h2>
<h5>Angular PrimeNG Example</h5>
<p-button (click)="gfg()"
          label="Click Here">
</p-button>
<p-dialog header="GeeksforGeeks"
          [(visible)]="geeks">

<p>A Computer Science portal for geeks. </p>

</p-dialog>

app.module.ts

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule }
    from "@angular/platform-browser/animations";

import { AppComponent } from "./app.component";
import { DialogModule } from "primeng/dialog";
import { ButtonModule } from "primeng/button";

@NgModule({
  imports: [BrowserModule,
              BrowserAnimationsModule,
              DialogModule,
              ButtonModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

app.component.ts

import { Component } from "@angular/core";
import { PrimeNGConfig } from "primeng/api";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
})
export class AppComponent {
  constructor(private primengConfig: PrimeNGConfig) {}

  ngOnInit() {
    this.primengConfig.ripple = true;
  }

  geeks: boolean;

  gfg() {
    this.geeks = true;
  }
}

Output: