Change LOCAL_ID Dynamically for i18n in Angular

I am building a multilingual app and I am using the Translations at compile-time
approach provided by Angular i18n. I am building my App in French, so I must use

{ provide: LOCALE_ID, useValue: "fr" }

to provide the LOCALE_ID in French so,Pipes and Dates would be in the provided lang. I have set the translation configuration in the angular.json file as shown below:

...
 "i18n": {
    "sourceLocale": "fr",
    "locales": {
      "ar": "src/locale/messages.ar.xlf",
      "en": "src/locale/messages.en.xlf"
    }
  }

Issue: When I generate translation files and build the project using the --localize option I get everything fine concerning routes, translated texts etc ... The issue is in the LOCALE_ID which should be in the targeted language BUT it's always in French because I'm setting it in the App.module.ts* as mentioned above. For example: When I open a Date picker, I always get t in French.

I know that this behavior is a consequent of setting the LOCALE_ID manually, so even if I was browsing the built APP in English or Arabic, the LOCALE_ID is always overridden. That's the idea of my question: How to set LOCALE_ID depending on the provided lang from angular.json? Thank you in advance