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.


<h2 style="color: green">

<h4>Angular PrimeNG</h4>

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

    <p-tabPanel header="Web Technology" closable="true">
            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.
        <a href="">
            Click Here
    <p-tabPanel header="Algorithm" closable="true">
            The word Algorithm means “a process or set of
            rules to be followed in calculations or other
            problem-solving operations”.
        <a href=
            Click Here


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

      selector: "app-root",
      templateUrl: "./app.component.html",
      styleUrls: ["./app.component.scss"],

export class AppComponent {}


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";

      imports: [BrowserModule, 
      declarations: [AppComponent],
      bootstrap: [AppComponent],

export class AppModule{}



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