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 Project Setup article for the detailed Angular Installation procedure.
Project Structure
After successful installation, it will look like the following image:
Example: This example illustrates the basic use of Angular PrimeNG in a project.
<h2 style="color: green">
w3wiki
</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.w3wiki.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.w3wiki.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.w3wiki.org/introduction-to-algorithms/">
Click Here
</a>
</p-tabPanel>
</p-tabView>
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{}
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:
Angular PrimeNG
Angular PrimeNG is an open-source framework with a rich set of Angular UI components that are used to enhance web development by providing a comprehensive library of ready-to-use UI elements. PrimeNG is used to make responsive websites with very much ease. It is Developed by PrimeTek Informatics. It offers a wide range of customizable and feature-rich components that enable developers to create modern, responsive, and visually appealing user interfaces.