Installation

Setting up PrimeNG in an Angular CLI project.

Download #

PrimeNG is available for download on the npm registry.


# Using npm
npm install primeng@18.0.0-rc.1 @primeng/themes@18.0.0-rc.1

# Using yarn
yarn add primeng@18.0.0-rc.1 @primeng/themes@18.0.0-rc.1

# Using pnpm
pnpm add primeng@18.0.0-rc.1 @primeng/themes@18.0.0-rc.1

Provider #

Add providePrimeNG and provideAnimationsAsync to the list of providers in your app.config.ts.


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

export const appConfig: ApplicationConfig = {
    providers: [
        provideAnimationsAsync(),
        providePrimeNG({ /* options */ })
    ]
};

Theme #

Configure PrimeNG to use a theme like Aura.


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

export const appConfig: ApplicationConfig = {
    providers: [
        provideAnimationsAsync(),
        providePrimeNG({
            theme: 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.


import { ButtonModule } from 'primeng/button';

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.