How to use TranslateService while externalizing an array of string [Angular] - json

Question

I don't know much about externalizing. I was creating a month picker in Angular. In my typesccript file I had an array of months with hard-coded names:
arr = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
My senior told me to externalize them in a separate json file so that they can be easily modified later if required. Now I'll show you my code.
monthpicker.component.ts
import { Component, OnInit } from '#angular/core';
import { TranslateService } from '#ngx-translate/core';
#Component({
...
})
export class MonthpickerComponent implements OnInit {
constructor(private translate: TranslateService){
}
//arr = ['Jan', 'Feb', ... 'Nov', 'Dec'];
monthArray = []; /* USING A DIFFERENT EMPTY ARRAY INSTEAD*/
translateCard(): void {
this.translate
.get([
'Months.January',
'Months.February',
...
'Months.December'
])
.subscribe(translations => {
this.monthArray.push(translations['Months.January']);
this.monthArray.push(translations['Months.February']);
...
this.monthArray.push(translations['Months.December']);
});
console.log(this.monthArray);
}
ngOnInit(): void {
this.translateCard();
}
/* CODE TO READ MONTH NAMES AND RENDER IN HTML*/
n = 4;
matrix: any = Array.from({ length: Math.ceil(this.monthArray.length / this.n) }, (_, i) => i).map(i =>
this.monthArray.slice(i * this.n, i * this.n + this.n).map(x => ({
monthName: x,
isSelected: false
}))
);
...
}
monthpicker.component.html
<div *ngFor="let row of matrix" class="my-table">
<span *ngFor="let x of row">
<span class="month-name">
{{ x.monthName }}
</span>
</span>
</div>
And here en-US.json
{
"Months": {
"January": "Jan",
"February": "Feb",
...
"October": "Oct",
"November": "Nov",
"December": "Dec"
}
}
This is all the code I have. There is not even a single error or warning on console. In fact console.log(this.monthArray[]) is also printing all the months correctly. But on the front-end my month-picker panel is absolutely blank. Nothing is coming up. I think my call is asynchronous here:
ngOnInit(): void {
this.translateCard();
}
I tried safely use translate.instant() and many other solutions but still it is blank. Please correct me whats wrong with my implementation.

Answer 1

After subscription you need to populate the matrix array since monthArray will be populated asynchronously. Make the following change:
translateCard(): void {
this.translate
.get([
'Months.January',
'Months.February',
...
'Months.December'
])
.subscribe(translations => {
this.monthArray.push(translations['Months.January']);
this.monthArray.push(translations['Months.February']);
...
this.monthArray.push(translations['Months.December']);
// populate matrix
this.matrix = Array.from({ length: Math.ceil(this.monthArray.length /
this.n) }, (_, i) => i).map(i =>
this.monthArray.slice(i * this.n, i * this.n + this.n).map(x => ({
monthName: x,
isSelected: false
}))
);
});
}