Angular PrimeNG

Last Updated : 27 Sep, 2023

Read

Discuss

Courses

Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease.

Angular PrimeNG

Reason to Learn Angular PrimeNG:

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.

Angular PrimeNG

Creating Angular application & module installation:

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 it using the following command.

cd appname

Step 3: Install PrimeNG in your given directory.

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

Please refer to the Angular CLI Angular Project Setup article for the detailed installation procedure.

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 style="color: green">
    GeeksforGeeks
</h2>

<h4>Angular PrimeNG</h4>

<p-tabView>
    <p-tabPanel header="Data Structure" closable="true">
        <p>
            A data structure is a particular way of
            organizing data in a computer so that it
            can be used effectively.
        </p>
        <a href="https://www.geeksforgeeks.org/data-structures/">
            Click Here
        </a>
    </p-tabPanel>

    <p-tabPanel header="Web Technology" closable="true">
        <p>
            Web Technology refers to the various tools
            and techniques that are utilized in the process
            of communication between different types of devices
            over the internet.
        </p>
        <a href="https://www.geeksforgeeks.org/web-technology/">
            Click Here
        </a>
    </p-tabPanel>
    
    <p-tabPanel header="Algorithm" closable="true">
        <p>
            The word Algorithm means “a process or set of
            rules to be followed in calculations or other
            problem-solving operations”.
        </p>
        <a href=
"https://www.geeksforgeeks.org/introduction-to-algorithms/">
            Click Here
        </a>
    </p-tabPanel>
</p-tabView>

app.component.ts

import { Component } from "@angular/core";

@Component({
      selector: "app-root",
      templateUrl: "./app.component.html",
      styleUrls: ["./app.component.scss"],
})

export class AppComponent {}

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 { TabViewModule } from "primeng/tabview";

@NgModule({
      imports: [BrowserModule, 
          BrowserAnimationsModule, 
          TabViewModule
    ],
      declarations: [AppComponent],
      bootstrap: [AppComponent],
})

export class AppModule{}

Output: