How to dynamically change the PrimeNG preset using provideAppInitializer in Angular?

Question: I'm trying to dynamically set the PrimeNG theme preset in an Angular application using provideAppInitializer. However, I'm encountering issues when trying to change the theme based on a service method. Here's the setup I have:

How can I dynamically set the PrimeNG theme preset at the start of the application using the provideAppInitializer method in Angular? What changes do I need to make to properly inject and update the theme dynamically based on the service’s preset?

Thank you for your help!

themes.ts:

import { definePreset, usePreset } from '@primeng/themes';
import Aura from '@primeng/themes/aura';

const victoriaPreset = definePreset(Aura, {
semantic: {
primary: {
50: '{blue.50}',
100: '{blue.100}',
200: '{blue.200}',
300: '{blue.300}',
400: '{blue.400}',
500: '{blue.500}',
600: '{blue.600}',
700: '{blue.700}',
800: '{blue.800}',
900: '{blue.900}',
950: '{blue.950}'
}
}
});

const nbkPreset = definePreset(Aura, {
semantic: {
primary: {
50: '{green.50}',
100: '{green.100}',
200: '{green.200}',
300: '{green.300}',
400: '{green.400}',
500: '{green.500}',
600: '{green.600}',
700: '{green.700}',
800: '{green.800}',
900: '{green.900}',
950: '{green.950}'
}
}
});

export { victoriaPreset, nbkPreset };



theme.service.ts

import { Injectable, signal } from '@angular/core';
import { nbkPreset, victoriaPreset } from './themes';

@Injectable({
providedIn: 'root',
})
export class ThemeService {
private presetName = signal<'victoria' | 'nbk'>('victoria');
currentPreset = signal(victoriaPreset); // Default preset

initialize() {
const storedPreset = localStorage.getItem('theme') as 'victoria' | 'nbk';
if (storedPreset) {
this.setPreset(storedPreset);
}
}

setPreset(preset: 'victoria' | 'nbk') {
this.presetName.set(preset);
this.currentPreset.set(preset === 'victoria' ? victoriaPreset : nbkPreset);
localStorage.setItem('theme', preset); // Save to localStorage
}
}



app.config.ts:

import { ApplicationConfig, inject, provideAppInitializer, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';
import { providePrimeNG } from 'primeng/config';
import Aura from '@primeng/themes/aura';
import { routes } from './app.routes';
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
import { ThemeService } from './theme.service';

import { victoriaPreset, nbkPreset } from './themes';

export const appConfig: ApplicationConfig = {
providers: [
provideZoneChangeDetection({ eventCoalescing: true }),
provideRouter(routes),
provideAnimationsAsync(),
provideAppInitializer(() => {
const themeService = inject(ThemeService);
themeService.initialize(); // Initialize theme service (loads theme from localStorage or sets default)
}),

providePrimeNG({
theme: {
preset: nbkPreset, // Default theme
}
}),
]
};



Problem: The default theme works fine (nbkPreset), but I want to dynamically load the preset based on a service (ThemeService). I attempted to inject the currentPreset from ThemeService using a function call in providePrimeNG, but this doesn't seem to work: typescript

// Not working

theme: {
preset: () => inject(ThemeService).currentPreset(),
}

Continue reading...