Source: https://primeng.org/installation

• Primary

  Surface

  PresetsAuraMaterialLaraNora

  Ripple

  RTL

• v20

  • v20

  • v19

  • v18

  • v17

Installation

Setting up PrimeNG in an Angular CLI project.

Download #

PrimeNG is available for download on the npm registry .

Using npm

npm install primeng @primeuix/themes

# Using yarn
yarn add primeng @primeuix/themes

# Using pnpm
pnpm add primeng @primeuix/themes

Provider #

Add providePrimeNG and provideAnimationsAsync to the list of providers in your app.config.ts and use the theme property to configure a theme such as Aura.

import { ApplicationConfig } from '@angular/core'; import { provideAnimationsAsync } from '@angular/platform-browser/animations/async'; import { providePrimeNG } from 'primeng/config'; import Aura from '@primeuix/themes/aura';

export const appConfig: ApplicationConfig = {
    providers: [\
        provideAnimationsAsync(),\
        providePrimeNG({\
            theme: {\
                preset: Aura\
            }\
        })\
    ]
};

Verify #

Verify your setup by adding a component such as Button. Each component can be imported and registered individually so that you only include what you use for bundle optimization. Import path is available in the documentation of the corresponding component.

Check

import { Component } from '@angular/core'; import { ButtonModule } from 'primeng/button';

@Component({
    selector: 'button-demo',
    templateUrl: './button-demo.html',
    imports: [ButtonModule]
})
export class ButtonDemo {}

<p-button label="Check" />

Example #

An example starter with Angular CLI is available at GitHub .

Next Steps #

Welcome to the Prime UI Ecosystem! Once you have PrimeNG up and running, we recommend exploring the following resources to gain a deeper understanding of the library.

• Global configuration

• Customization of styles

• Getting support

• Download

• Provider

• Verify

• Example

• Next Steps

Theme Designer

Theme Designer is the ultimate tool to customize and design your own themes featuring a visual editor, figma to theme code, cloud storage, and migration assistant.

PrimeNG 20.3.0 by PrimeTek