dont forget to inject TranslateService in ur constrctor ,and add id , name resources in ar.josn , and en.json ,try this
columnheaders:any;
ngOnInit(){
this.columnheaders = []
this.translate.get('the id').subscribe(label =>this.columnheaders[0]= label);
this.translate.get('the name').subscribe(label =>this.columnheaders[1]= label);
}
this.settings = {
columns: {
name: {
title:this.columnheaders[0],
type: 'string',
}
name: {
title:this.columnheaders[1],
type: 'string',
}
}}
I’m new to Angular, I have a table that I need to display with two languages based on the user’s choice, I have searched a lot for this however, couldn’t find anything useful for my case, I have made a work around that doesn’t really fulfill my needs as when I go to another page and then back to this page it displays the data with the wrong choice as the variable inside the localstorage returns with undefined. Please advise if you have a better approach as I totally understand that mine is really bad. Thanks in advance.
employee.component.ts
ngOnInit() {
this.switchLanguage = localStorage.getItem('selectedLanguage');
this.lang = localStorage.getItem('lang')
this.getActiveEmployees();
}
getAllEmployees(){
if(this.switchLanguage === "en" || this.browserLang === "en"){
console.log(this.switchLanguage + " Da5al hena lee 1")
this.settings = {
totalKey: 'total',
pager: {
display: true,
perPage: '5'
},
mode: 'external',
actions: false,
columns: {
firstName_FL: {
title: 'First Name',
data: this.employees.firstName_FL,
},
secondName_FL: {
title: 'Second Name',
data: this.employees.secondName_FL,
},
lastName_FL: {
title: 'Last Name',
data: this.employees.lastName_FL,
},
hiringDate: {
title: 'Hiring Date',
data: this.employees.hiringDate,
type: 'date',
filter: {
type: 'daterange'
},
valuePrepareFunction: (lastLoginTime: any) => {
return lastLoginTime.slice(0, 10)
}
},
firstContractingSalary: {
title: 'First Contracting Salary',
valuePrepareFunction: (firstContractingSalary) => {
this.formatedOutputValue = this.currenctPipe.transform(firstContractingSalary, 'EGP ',
'symbol', '1.2-2');
return this.formatedOutputValue
}
},
position: {
title: 'Position',
valuePrepareFunction: (position) => {
return position.name_FL;
},
sort: true
},
department: {
title: 'Department',
valuePrepareFunction: (department) => {
return department.name_FL;
}
},
employeeJobStatuses: {
title: 'Status',
filter: false,
sort: false,
valuePrepareFunction: (employeeJobStatuses) => {
this.statusValidation = employeeJobStatuses.map((element, i) => [
element.status
])
for(var i = 0; i < this.statusValidation.length; i++){
if(this.statusValidation[i][i] === "STATUS_ACTIVE"){
return "Active"
} else if(this.statusValidation[i][i] === "STATUS_SUSPENDED"){
return "Suspended"
} else if(this.statusValidation[i][i] === "STATUS_TERMINATED"){
return "Terminated"
} else if(this.statusValidation[i][i] === "STATUS_INACTIVE"){
return "Inactive"
}
}
}
}
}
};
} else if(this.switchLanguage === "ar" || this.browserLang === "ar"){
this.settings = {
totalKey: 'total',
pager: {
display: true,
perPage: '5'
},
mode: 'external',
actions: false,
columns: {
firstName_SL: {
title: 'الاسم الاول',
data: this.employees.firstName_SL,
},
secondName_SL: {
title: 'الاسم الاوسط',
data: this.employees.secondName_SL,
},
lastName_SL: {
title: 'الاسم الاخير',
data: this.employees.lastName_SL,
},
hiringDate: {
title: 'تاريخ التوظيف',
data: this.employees.hiringDate,
type: 'date',
filter: {
type: 'daterange'
},
valuePrepareFunction: (lastLoginTime: any) => {
return lastLoginTime.slice(0, 10)
}
},
firstContractingSalary: {
title: 'قيمة التعاقد المبدأية',
valuePrepareFunction: (firstContractingSalary) => {
this.formatedOutputValue = this.currenctPipe.transform(firstContractingSalary, 'EGP ', 'symbol', '1.2-2');
return this.formatedOutputValue
}
},
position: {
title: 'المركز',
valuePrepareFunction: (position) => {
return position.name_SL;
},
sort: true
},
department: {
title: 'القسم',
valuePrepareFunction: (department) => {
return department.name_SL;
}
},
employeeJobStatuses: {
title: 'الحالة',
filter: false,
sort: false,
valuePrepareFunction: (employeeJobStatuses) => {
this.statusValidation = employeeJobStatuses.map((element, i) => [
element.status
])
for(var i = 0; i < this.statusValidation.length; i++){
if(this.statusValidation[i][i] === "STATUS_ACTIVE"){
return "نشيط"
} else if(this.statusValidation[i][i] === "STATUS_SUSPENDED"){
return "معلق"
} else if(this.statusValidation[i][i] === "STATUS_TERMINATED"){
return "منتهي"
} else if(this.statusValidation[i][i] === "STATUS_INACTIVE"){
return "غير نشط"
}
}
}
}
}
};
}
this.translate.onLangChange.subscribe(language => {
this.browserLang = language.lang;
if(this.browserLang === "en"){
this.settings = {
totalKey: 'total',
pager: {
display: true,
perPage: '5'
},
mode: 'external',
actions: false,
columns: {
firstName_FL: {
title: 'First Name',
data: this.employees.firstName_FL,
},
secondName_FL: {
title: 'Second Name',
data: this.employees.secondName_FL,
},
lastName_FL: {
title: 'Last Name',
data: this.employees.lastName_FL,
},
hiringDate: {
title: 'Hiring Date',
data: this.employees.hiringDate,
type: 'date',
filter: {
type: 'daterange'
},
valuePrepareFunction: (lastLoginTime: any) => {
return lastLoginTime.slice(0, 10)
}
},
firstContractingSalary: {
title: 'First Contracting Salary',
valuePrepareFunction: (firstContractingSalary) => {
this.formatedOutputValue = this.currenctPipe.transform(firstContractingSalary, 'EGP ', 'symbol', '1.2-2');
return this.formatedOutputValue
}
},
position: {
title: 'Position',
valuePrepareFunction: (position) => {
return position.name_FL;
},
sort: true
},
department: {
title: 'Department',
valuePrepareFunction: (department) => {
return department.name_FL;
}
},
employeeJobStatuses: {
title: 'Status',
filter: false,
sort: false,
valuePrepareFunction: (employeeJobStatuses) => {
this.statusValidation = employeeJobStatuses.map((element, i) => [
element.status
])
for(var i = 0; i < this.statusValidation.length; i++){
if(this.statusValidation[i][i] === "STATUS_ACTIVE"){
return "Active"
} else if(this.statusValidation[i][i] === "STATUS_SUSPENDED"){
return "Suspended"
} else if(this.statusValidation[i][i] === "STATUS_TERMINATED"){
return "Terminated"
} else if(this.statusValidation[i][i] === "STATUS_INACTIVE"){
return "Inactive"
}
}
}
}
}
};
} else if(this.browserLang === "ar"){
this.settings = {
totalKey: 'total',
pager: {
display: true,
perPage: '5'
},
mode: 'external',
actions: false,
columns: {
firstName_SL: {
title: 'الاسم الاول',
data: this.employees.firstName_SL,
},
secondName_FL: {
title: 'الاسم الاوسط',
data: this.employees.secondName_SL,
},
lastName_FL: {
title: 'الاسم الاخير',
data: this.employees.lastName_SL,
},
hiringDate: {
title: 'تاريخ التوظيف',
data: this.employees.hiringDate,
type: 'date',
filter: {
type: 'daterange'
},
valuePrepareFunction: (lastLoginTime: any) => {
return lastLoginTime.slice(0, 10)
}
},
firstContractingSalary: {
title: 'قيمة التعاقد المبدأية',
valuePrepareFunction: (firstContractingSalary) => {
this.formatedOutputValue = this.currenctPipe.transform(firstContractingSalary, 'EGP ', 'symbol', '1.2-2');
return this.formatedOutputValue
}
},
position: {
title: 'المركز',
valuePrepareFunction: (position) => {
return position.name_SL;
},
sort: true
},
department: {
title: 'القسم',
valuePrepareFunction: (department) => {
return department.name_SL;
}
},
employeeJobStatuses: {
title: 'الحالة',
filter: false,
sort: false,
valuePrepareFunction: (employeeJobStatuses) => {
this.statusValidation = employeeJobStatuses.map((element, i) => [
element.status
])
for(var i = 0; i < this.statusValidation.length; i++){
if(this.statusValidation[i][i] === "STATUS_ACTIVE"){
return "نشيط"
} else if(this.statusValidation[i][i] === "STATUS_SUSPENDED"){
return "معلق"
} else if(this.statusValidation[i][i] === "STATUS_TERMINATED"){
return "منتهي"
} else if(this.statusValidation[i][i] === "STATUS_INACTIVE"){
return "غير نشط"
}
}
}
}
}
};
}
})
this.loading = true;
this.restService.GetAllEmployees().subscribe((res: any) => {
this.loading = false;
this.employees = res.data.employees;
const maw = JSON.stringify(this.employees)
this.jsonObj = JSON.parse(maw);
})
}
