How to change the language in primeng version 19?

Question

I'm using the p-datepicker component but I would like to translate it into French and Spanish. How can I do this in Angular/Primeng 19?

Answer 1

After researching I found this:

1. Install primelocale npm i primelocale (https://github.com/primefaces/primelocale)
2. import the language you want from primelocale (ex : import { fr } from "primelocale/fr.json" ) ;
3. Set default language of your choice inside providePrimeNG function (if English is not the default): providePrimeNG({ translation: fr })
4. To change the current language, simply inject the PrimeNG config service primeNGConfig = inject(PrimeNG); and use the "setTranslation" method by giving it the new translation file

example of code config translation:

import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';
import { provideHttpClient, withFetch } from '@angular/common/http';
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';


import { providePrimeNG } from 'primeng/config';
import Lara from '@primeng/themes/lara';
import MyLaraLightBluePreset from './style';
import { fr } from "primelocale/fr.json"



export const appConfig: ApplicationConfig = {
  providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes),provideAnimationsAsync(),provideHttpClient(withFetch()),
    providePrimeNG({
      translation: fr,
        theme: {
          preset: MyLaraLightBluePreset,
          options: {
              darkModeSelector: '.my-app-dark'
          }
        }
    })
    ]
};