I am looking to localize the primeNG menu bar component. I am unsure of how to handle the translation within the .ts file but I aim to fetch the translation data from a .json file.
import { Component, OnInit } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
import { SocialAuthService, SocialUser } from 'angularx-social-login';
import { MenuItem, MessageService } from 'primeng/api';
@Component({
selector: 'app-admin',
templateUrl: './admin.component.html',
styleUrls: ['./admin.component.scss']
})
export class AdminComponent implements OnInit {
display: boolean = true;
socialUser: SocialUser = new SocialUser();
items: MenuItem[] = [];
constructor(private socialAuthService: SocialAuthService
, private toast: MessageService, private translateService: TranslateService
) {
this.items.map(item => item.label = this.translateService.instant(item.label));
}
ngOnInit(): void {
this.socialAuthService.authState.subscribe(_ => {
this.socialUser = _;
});
this.items = [
{ label: 'menu.pManagement', icon: 'pi pi-chart-line'},
{ label: 'menu.iList', icon: 'pi pi-wallet', routerLink: 'outsourcing' },
{ label: 'menu.iAnalysis, icon: 'pi pi-clock'}
];
}
addToast() {
this.toast.add({
severity: 'success',
summary: 'Success',
detail: ''
});
}
}
In the above code snippet, you can observe the menu bar items. My goal is to modify the label name when switching languages using a language change dropdown.
The contents of the en.json file are as follows:
{
"menu" : {
"pManagement" : "Project Management",
"iList" : "Item list",
"iAnalysis" : "Item analysis"
}
}