PrimeNG is an open-source library with prebuilt and customizable UI components that speed up the development process for Angular. It comes under the free-to-use MIT license.<\/p>\n
Run the command \u2018ng v\u2019 in your terminal to find the Angular version.<\/p>\n
\n Fig 1: Angular version<\/p>\n
Run the command \u2018npm install primeng @primeng\/themes\u2019 in your terminal to install PrimeNG and its themes.<\/p>\n
You may face an installation error while installing the PrimeNG npm packages.<\/p>\n
\n Fig 2: PrimeNG installation error<\/p>\n
Fix the upstream dependency conflict or retry this command with \u2013force<\/p>\n
Retry the same command with \u2018\u2013force\u2019,<\/p>\n
\u2018npm install primeng @primeng\/themes \u2013save \u2013force\u2019 to install the PrimeNG packages.<\/p>\n
Verify the installation of PrimeNG by checking the package.json file.<\/p>\n
\n Fig 3: PrimeNG verify installation<\/p>\n
Add a reference to PrimeNG animation, ProvidePrimeNG, and the theme (\u2018Aura\u2019) in your app.config.ts to use the PrimeNG UI components across your Angular project. You may not have needed to manually add the CSS references in the angular.json or global styles.css file because it will be taken care of by the PrimeNG themes package in the newer PrimeNG version 19.<\/p>\n
import { ApplicationConfig } from ‘@angular\/core’;
\nimport { provideAnimationsAsync } from ‘@angular\/platform-browser\/animations\/async’;
\nimport { providePrimeNG } from ‘primeng\/config’;
\nimport Aura from ‘@primeng\/themes\/aura’;<\/p>\n
export const appConfig: ApplicationConfig = {
\n providers: [
\n provideAnimationsAsync(),
\n providePrimeNG({
\n theme: {
\n preset: Aura
\n }
\n })
\n ]
\n};<\/p>\n
ButtonDemo.Component.ts,<\/p>\n
import { Component } from ‘@angular\/core’;
\nimport { ButtonModule } from ‘primeng\/button’;<\/p>\n
@Component({
\n selector: ‘button-demo’,
\n templateUrl: ‘.\/button-demo.html’,
\n standalone: true,
\n imports: [ButtonModule]
\n})
\nexport class ButtonDemo {}<\/p>\n
ButtonDemo.Component.html
\n<div class=»card flex justify-center»>
\n <p-button label=»Check» \/>
\n<\/div>\n<\/p><\/div>\n<\/div>\n
import { provideAnimationsAsync } from ‘@angular\/platform-browser\/animations\/async’;
\nimport { providePrimeNG } from ‘primeng\/config’;
\nimport Aura from ‘@primeng\/themes\/aura’;<\/p>\n
import { ButtonModule } from ‘primeng\/button’;<\/p>\n
@NgModule({
\n declarations: [
\n AppComponent
\n ],
\n imports: [
\n BrowserModule,
\n AppRoutingModule,
\n FormsModule,
\n HttpClientModule,
\n ButtonModule
\n ],
\n providers: [provideAnimationsAsync(),
\n providePrimeNG({
\n theme: {
\n preset: Aura
\n }
\n })],
\n bootstrap: [AppComponent]
\n})
\nexport class AppModule { }<\/p>\n
ButtonDemo.Component.html
\n<div class=»card flex justify-center»>
\n <p-button label=»Check» \/>
\n<\/div><\/p>\n<\/div>\n<\/div>\n
\n Fig 4: Output (Button)<\/p>","protected":false},"excerpt":{"rendered":"
1. What is PrimeNG? PrimeNG is an open-source library with prebuilt and customizable UI components that speed up the development process for Angular. It comes under the free-to-use MIT license. 2. Find your Angular version Run the command \u2018ng v\u2019 in your terminal to find the Angular version. Fig 1: … <\/p>\n