How to externalize p-calendar locale in Angular

I'm using p-calendar from PrimeNg 6. The calendar displays everything in English by default but we can use [locale]=anyLanguage to change day, days, months, etc. Here is the stackblitz. You can see for now I've added only 2 languages i.e. Spanish and Arabic.

app.component.html

<p-calendar [(ngModel)]="value" name="test" [locale]="arabic"></p-calendar>

app.component.ts

import { Component, OnInit, VERSION } from "@angular/core";
import moment, { Moment } from "moment";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
  name = "Angular " + VERSION.major;

  value;

  public es: any;
  public arabic: any;

  ngOnInit() {

    // spanish calendar
    this.es = {
      ...
    };

    // arabic calendar
    this.arabic= {
      ...
    };
  }
}

My tech lead is not happy with this. She said that tomorrow if we add 15 more language then who will go back to the code. She wants me to keep it outside somewhere in another typescript file or json. So that We can add more languages later. However locale can be passed through the parent component tomorrow so that's not an issue. But please help me how do externalize language variables.

Solution

First, I would recommend you looking for a library to internationalise the application. This will allow you to keep all translations in a separate file (for instance i18, ngx-translate or i18next). You set the default lang and when the user change the language, you change the tongue. In this way, the language variables will be externalize.

Second, I would recommend upgrading PrimeNG version 11 which has a API that allows you translating the calendar component. Moreover, it works with much libraries like I said before.

With these version and without any libraries, the only way to do it is how you have it.