Angular PrimeNG

  • Last Updated : 02 May, 2022

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.

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:

 

Please write comments if you find anything incorrect, or you want to share more information about the topic discussed above

My Personal Notes arrow_drop_up