Currently, I am utilizing @ngx-translate for translation purposes. My approach involves declaring the content to be translated in both language files - specifically, es.json and en.json.
es.json:
"CONTENTS": {
"CONT_1": "TEXTO_1",
"CONT_2": "TEXTO_1",
"CONT_3": "TEXTO_1",
"CONT_4": "TEXTO_1",
"CONT_5": "TEXTO_1",
"CONT_6": "TEXTO_1",
"CONT_7": "TEXTO_1",
"CONT_8": "TEXTO_1",
"CONT_9": "TEXTO_1",
"CONT_10": "TEXTO_1",
"CONT_11": "TEXTO_1"
}
en.json:
"CONTENTS": {
"CONT_1": "TEXT_1",
"CONT_2": "TEXT_1",
"CONT_3": "TEXT_1",
"CONT_4": "TEXT_1",
"CONT_5": "TEXT_1",
"CONT_6": "TEXT_1",
"CONT_7": "TEXT_1",
"CONT_8": "TEXT_1",
"CONT_9": "TEXT_1",
"CONT_10": "TEXT_1",
"CONT_11": "TEXT_1"
}
Within the component where translation is desired (e.g., contents.component.ts), the following steps are taken: i) an array of contents is declared; ii) the translate Service is injected; iii) it is set; iv) a loop is initiated to construct an object as follows,
import { Component, OnInit } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
@Component({
selector: 'app-contents',
templateUrl: './contents.component.html',
styleUrls: ['./contents.component.css']
})
export class ContentsComponent implements OnInit {
// i) Declare an array
public contents = [];
// inject the translateService
constructor(public translateService: TranslateService) {
// iii) set it
translateService.addLangs(['es', 'en']);
translateService.setDefaultLang('es');
const browserLang = translateService.getBrowserLang();
translateService.use(browserLang.match(/es|en/) ? browserLang : 'es');
// loop for build a content object and push to the array
for (let index = 1; index <= 11; index++) {
const contentObj = {
id: index,
content: 'CONTENTS.CONT_' + index.toString()
};
this.contents.push(contentObj);
}
}
ngOnInit() {
}
}
Ultimately, the structure of my contents.component.html appears as follows
<ul>
<li *ngFor= "let content of contents" >
{{ content.content | translate }}
</li>
</ul>
This code can be further refined and optimized for enhanced performance. I trust that you will find these insights valuable.