PrimeNG v19 Final is Out Now 🚀

PrimeTek is announce the release of PrimeNG v19 Final, packed with exciting features, enhanced flexibility, and seamless integrations to supercharge your Angular applications. This version is all about empowering developers with robust theming, dark mode capabilities, and better integration options.

Let’s dive into the details!

Installation

Setting up PrimeNG in an Angular CLI project is straightforward. PrimeNG is available for download via npm, yarn, or pnpm.

Download

Use the package manager of your choice to install PrimeNG and its themes

# Using npm
npm install primeng @primeng/themes

# Using yarn
yarn add primeng @primeng/themes

# Using pnpm
pnpm add primeng @primeng/themes

Tailwind CSS Integration

PrimeNG now offers seamless integration with Tailwind CSS via the official tailwindcss-primeui plugin.

Overview

While Tailwind CSS provides a utility-first approach to styling, it lacks a comprehensive UI suite. PrimeNG complements Tailwind CSS with a feature-rich, highly accessible UI component library.

Installation

Install the plugin via npm:

npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init

tailwind.config.js

const primeui = require("tailwindcss-primeui");
module.exports = {
  darkMode: ["selector", '[class="dark-mode"]'],
  content: ["./src/**/*.{html,ts}"],
  plugins: [primeui],
  theme: {
    screens: {
      sm: "576px",
      md: "768px",
      lg: "992px",
      xl: "1200px",
      "2xl": "1920px",
    },
  },
};

Update styles.scss Add the following content to your styles.scss file:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer tailwind-base, primeng, tailwind-utilities;

@layer tailwind-base {
    @tailwind base;
}

@layer primeng {
    /* Add any PrimeNG-specific customizations here, if needed */
}

@layer tailwind-utilities {
    @tailwind components;
    @tailwind utilities;
}

Provider Configuration

To get started, add providePrimeNG and provideAnimationsAsync to the providers in your app.config.ts. Configure the theme by setting the theme property, such as 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: {
                preset: Aura
            }
        })
    ]
};

Theming

PrimeNG v19 introduces a flexible theming system that is completely design-agnostic. Unlike other UI libraries, PrimeNG themes are decoupled from the components, allowing for a custom design approach.

Understanding Themes

Themes in PrimeNG consist of two parts:

1. Base: Style rules with CSS variables as placeholders.
2. Preset: Design tokens that feed the base, mapping tokens to CSS variables.

Built-in Presets

• Aura
• Material
• Lara
• Nora

app.config.ts
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: {
                preset: Aura
            }
        })
    ]
};

Customizing Themes

To customize a theme, use the definePreset utility to override the design tokens.

app.config.ts 
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: nextTheme, ripple: false, inputStyle: 'outlined' }),
    ]
};

nextTheme.ts

import Aura from "@primeng/themes/aura";
import { definePreset } from "@primeng/themes";

const nextTheme = definePreset(Aura,{
      //Your customizations, 
});

export default {
    preset: nextTheme,
    options: {
        darkModeSelector: '.dark-mode'
    }
};

Dark Mode

PrimeNG v19 supports dark mode with flexible options:

• Use the default system setting (prefers-color-scheme: dark).
• Define a custom CSS selector for toggling dark mode.

Implementation Example

Toggle dark mode using a simple button:

index.html
<html class="light-mode">

app.component.html
<p-button label="Toggle Dark Mode" (onClick)="toggleDarkMode()"/>

app.component.ts

@Component({
  selector: 'app-root',
  imports: [RouterOutlet, ButtonModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss',
})
export class AppComponent {
  title = 'onlineCompailer';

  toggleDarkMode() {
    const element = document.querySelector('html') as HTMLElement;
    element.classList.toggle('dark-mode');
    element.classList.toggle('light-mode');
  }
}

Why Choose PrimeNG v19?

1. Design Agnosticism: Complete freedom to choose or create your design system.
2. Dark Mode Support: Easy integration with system preferences or custom toggle.
3. Tailwind Compatibility: The best of both worlds — utility-first styling and a robust UI library.
4. Customizability: Effortlessly define and use custom presets for theming.

Conclusion

PrimeNG v19 Final is a significant leap forward, offering unmatched flexibility and integration capabilities for Angular developers. Whether you’re building with Tailwind or looking for advanced theming options, PrimeNG has you covered.

Explore the full documentation and examples on the PrimeNG Official Website.