How to make translations for NgbDatepicker in Angular without subclassing NgbDatepickerI18n?

Question

I am currently reading about internationalization of the ng-bootstrap components. Their documentation says for the datepicker:

Since the 2.0.0 release datepicker will use the application locale if it is present to get translations of weekdays and month names. The internal service that does translation is called NgbDatepickerI18n and you could provide your own implementation if necessary.

(ng-bootstrap website)

Looking at the Angular i18n documentation, it states:

If you want to import locale data for other languages, you can do it manually:

src/app/app.module.ts

import { registerLocaleData } from '@angular/common';
import localeFr from '@angular/common/locales/fr';

// the second parameter 'fr' is optional
registerLocaleData(localeFr, 'fr');

(Angular website)

But why is it not working for me? Do I still have to make a custom implementation of NgbDatepickerI18n, or am I missing something?

---

Here is an example playground:

https://stackblitz.com/edit/angular-mezpyn?file=app%2Fdatepicker-popup.module.ts

Answer 1

I had the same problem and becuase there's no answer, this is the solution:

After importing and registering the locale data as you did, in app.module.ts you need to add

providers: [
    { provide: LOCALE_ID, useValue: 'fr-FR' },
    ... other providers
],

The documentation doesn't make it clear in my opinion.