

How To Use PrimeNG Components in Angular
source link: https://www.digitalocean.com/community/tutorials/angular-primeng
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

Introduction
PrimeNG from PrimeFaces is an alternative UI component library. It offers a selection of pre-built themes and UI components for data presentation, form inputs, menus, charts, overlays, and more.
In this article, you will set up PrimeNG in an Angular 4+ project and explore some of the main components.
Prerequisites
If you would like to follow along with this article, you will need:
- Node.js installed locally, which you can do by following How to Install Node.js and Create a Local Development Environment.
- This tutorial will also assume you have
@angular/cli
installed globally.
This tutorial was verified with Node v16.6.1, npm
v7.20.3, @angular/core
v12.2.0, and primeng
v12.0.1, and primeicons
v4.1.0.
Setting Up the Project
You can use @angular/cli
to create a new Angular Project.
In your terminal window, use the following command:
ng new AngularPrimeNGExample --style=css --routing=false --skip-tests
This will configure a new Angular project with styles set to “CSS” (as opposed to “Sass”, Less", or “Stylus”), no routing, and skipping tests.
Navigate to the newly created project directory:
cd AngularPrimeNGExample
To get started, install the required packages: primeng
and primeicons
into your project:
npm install [email protected] [email protected]
At this point, you have a new Angular project with primeng
and primeicons
.
Adding PrimeNG Styles
Next, add the required CSS files as part of the styles loaded by the Angular CLI:
...
"styles": [
"styles.css",
"node_modules/font-awesome/css/font-awesome.min.css",
"node_modules/primeng/resources/primeng.min.css",
"node_modules/primeng/resources/themes/saga-blue/theme.css"
],
...
**Note: You will need to restart your local server after adding to the angular.json
configuration file.
Here we’re using the saga-blue
theme, but you can choose between available themes like nova
, rhea
or fluent-light
.
Importing PrimeNG Components
Now let’s setup our app module to include the UI components we want:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule } from '@angular/forms';
import { AccordionModule } from 'primeng/accordion';
import { PanelModule } from 'primeng/panel';
import { ButtonModule } from 'primeng/button';
import { RadioButtonModule } from 'primeng/radioButton';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
FormsModule,
AccordionModule,
PanelModule,
ButtonModule,
RadioButtonModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Notice how we also imported Angular’s BrowserAnimationsModule
and FormsModule
. The animation module is required by PrimeNG’s components and the form module will be needed to use form input components like the radio button component.
At this point, you have a new Angular project with support for AccordionModule
, PanelModule
, ButtonModule
, and RadioButtonModule
.
Building an App with PrimeNG Components
Here’s an example that uses PrimeNG’s accordion
, panel
, radio button
, and button
components.
Add pizzaSelection
:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
pizzaSelection = ''
}
Then add p-accordion
, p-accordionTab
, p-radioButton
, p-panel
, and pButton
:
<p-accordion>
<p-accordionTab header="Salads">
Salads...
</p-accordionTab>
<p-accordionTab header="Pasta">
Pasta...
</p-accordionTab>
<p-accordionTab header="Pizza" [selected]="true">
<div>
<p-radioButton
label="Double cheese"
name="pizza"
value="double-cheese"
[(ngModel)]="pizzaSelection">
</p-radioButton>
</div>
<div>
<p-radioButton
label="Anchovy"
name="pizza"
value="anchovy"
[(ngModel)]="pizzaSelection">
</p-radioButton>
</div>
<div>
<p-radioButton
label="Meatlover's"
name="pizza"
value="meat-lover"
[(ngModel)]="pizzaSelection">
</p-radioButton>
</div>
</p-accordionTab>
</p-accordion>
<p-panel header="Extras" *ngIf="pizzaSelection && pizzaSelection.length">
Would you like extra cheese on your pizza?
<button pButton type="button" label="Ok, yeah!"></button>
</p-panel>
Notice how the components use the p-
prefix.
Save the changes to your file and serve the application.
If you select a pizza, the Extras panel will appear and prompt users to add extra cheese.
Conclusion
In this article, you set up PrimeNG in an Angular 4+ project and explore some of the main components.
Continue your learning by consulting the official documentation for a showcase and documentation of all the available components.
Explore alternative UI component libraries with Angular Material 2.
Recommend
-
41
除非特别声明,此文章内容采用知识共享署名 3.0许可,代码示例采用Apache 2.0许可。更多细节请查看我们的服务条款。
-
83
One of my latest assignments was to develop a custom drop-down component which supports both single and multiple selections. As always, I will share some tips with you in the hope that you will learn new things.
-
43
-
36
What really happens when we use the resolveComponentFactory method in Angular? let’s peek under the hood. ...
-
59
During a typical developer journey, you can often end up stuck in projects filled with old technologies. You start to wonder how to convince PO, managers and even colleagues to switch to something…
-
46
In this post, we are going to look at tips you can use to make your components more reusable. Reusing components allows developers to avoid code duplication, which can introduce errors and bugs and are also hard to troubl...
-
37
Components have been available in Angular since the beginning; however, many people still find themselves using components incorrectly. In my work, I’ve seen people not using them at all, creating components instead of a...
-
48
An Introduction to Bit: Building and sharing Angular components Gianca...
-
7
Files Permalink Latest commit message Commit time
-
12
关于angular2如何正确引入第三方库PrimeNG
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK