Angular PrimeNG (original) (raw)

Last Updated : 18 Jun, 2024

**Angular PrimeNG is a powerful open-source framework by **PrimeTek Informatics, with pre-built, customizable UI components that accelerate development and elevate the user experience. By rich set of Angular UI components that are used to enhance web development by providing a complete library of ready-to-use UI elements. PrimeNG is used to make responsive websites with very much ease. It has a rich collection of components, spanning from basic buttons and forms to complex data tables, charts, and menus. It offers a wide range of customizable and feature-rich components that enable developers to create modern, responsive, and visually appealing user interfaces.

Angular PrimeNG

**What is PrimeNG?

PrimeNG is a complete UI component library that seamlessly integrates with Angular. It has a rich collection of components, spanning from basic buttons and forms to complex data tables, charts, and menus. PrimeNG components are carefully crafted to stick to the Material Design principles, ensuring a smart and modern look that aligns with contemporary web design trends.

Key Features of PrimeNG

Common PrimeNG Components

**Building a Sample Angular Application with PrimeNG

**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 Project Setup article for the detailed Angular Installation procedure.

**Project Structure

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

PrimeNG Project Structure

Example: This example illustrates the basic use of Angular PrimeNG in a project.

app.component.html `

GeeksforGeeks

Angular PrimeNG

A data structure is a particular way of organizing data in a computer so that it can be used effectively.

Click Here 
<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=

"" title="undefined" rel="noopener noreferrer">https://www.geeksforgeeks.org/introduction-to-algorithms/"> Click Here

app.component.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{}

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:

PrimeNG First Program Output

**Running the Application: