Angular PrimeNG
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
