Angular Study Resources
About | Features | Theming Approach | Getting Started

About

Questo progetto dimostra come integrare completamente AG Grid (Angular) con il tema Sakai di PrimeNG, ottenendo un aspetto visivo unificato, moderno e coerente in entrambi gli ecosistemi di componenti.

Sebbene AG Grid e PrimeNG siano sviluppati con filosofie di progettazione diverse, questa integrazione utilizza i token di progettazione di PrimeNG (variabili CSS) insieme alla moderna API di tematizzazione di AG Grid per garantire il completo allineamento visivo tra le due librerie di componenti. Il risultato è un'applicazione pulita, professionale e compatibile con i temi, in cui la modalità chiaro/scuro si sincronizza automaticamente su tutti i componenti.

Features

  • AG Grid completamente tematizzata utilizzando le variabili CSS Sakai di PrimeNG
  • Sincronizzazione automatica della modalità chiaro/scuro tramite Angular Signals
  • Nessuna riscrittura CSS personalizzata: mappatura design-token pura
  • Supporta lo scorrimento virtuale, il caricamento differito e set di dati di grandi dimensioni
  • Utilizza le moderne API di AG Grid:
      • themeBalham.withPart(...)
      • withParams({...})
  • Facile da estendere e adattare a qualsiasi tema PrimeNG

Theming Approach

Questa integrazione si basa su:

1. Variabili CSS Sakai di PrimeNG
Esempi:

  • --p-datatable-header-cell-background
  • --p-datatable-row-background
  • --p-primary-color

Queste variabili cambiano automaticamente quando l'utente cambia tema.

2. API del tema moderno di AG Grid
Il sistema di creazione di temi di AG Grid consente una configurazione dinamica in fase di esecuzione: 

									public readonly layoutService = inject(LayoutService);

readonly theme = computed(() => {
  const scheme = this.layoutService.isDarkTheme() ? colorSchemeDarkBlue : colorSchemeLight;
  return themeBalham
	.withPart(scheme)
	.withParams({
	  oddRowBackgroundColor: 'transparent',
	  backgroundColor: 'var(--p-datatable-row-background)',
	  foregroundColor: 'var(--p-datatable-row-color)',
	  borderColor: 'var(--p-datatable-border-color)',
	  headerBackgroundColor: 'var(--p-datatable-header-cell-background)',
	});
});

Getting Started

									npm i
npm start
GitHub Repository