How can I translate columns headers of Smart Table?
I am also trying to translate the column title using ng2translate. Any one out there have any suggestions?
settings = {
columns: {
payment_id: {
title: 'Payment'
},
payment_date: {
title: 'Date'
},
payment_type: {
title: 'Type'
},
amount: {
title: 'Amount'
},
}
};
Hi,
We've done it using dynamic translate method :
settings = {
columns: {
payment_id: {
title: this.translateService.instant("localisation.Payment.code")
},
payment_date: {
title: this.translateService.instant("localisation.Date.code")
},
payment_type: {
title: this.translateService.instant("localisation.Type.code")
},
amount: {
title: this.translateService.instant("localisation.Amount.code")
},
}
};
And subscribe to event "onLangChange" :
this.translateService.onLangChange.subscribe((event: LangChangeEvent) => {
// Update your settings here with the same data
settings = {
columns: {
payment_id: {
title: this.translateService.instant('localisation.Payment.code')
},
payment_date: {
title: this.translateService.instant('localisation.Date.code')
},
payment_type: {
title: this.translateService.instant('localisation.Type.code')
},
amount: {
title: this.translateService.instant('localisation.Amount.code')
},
}
};
// Or refresh your ng2smarttable datasource if you are using it
datasource.refresh();
}
Thanks for your reply. Sorry I am not fully sure of your approach. Can I ask what you are referring to when you say 'localisation.Payment.code?
This is a sample code, replace it by your translation code.
Your JSON than contains translation must be something like this :
{
"Payment": {
"code" : "EUR",
"label" : "€"
}
.....
}
You can find more information about this here : https://github.com/ngx-translate/core
Oh yes I see, Thanks. Can I ask what is your LangChangeEvent like?
onLangChange: An EventEmitter to listen to lang change events. A LangChangeEvent is an object with the properties lang: string & translations: any (an object containing your translations).
example:
onLangChange.subscribe((event: LangChangeEvent) => {
// do something
});
Thanks for your help
I did that and everything was translating fine but actions header. updated my settings on my language selected event which contains
actions: { columnTitle: this._translate.instant('global.actions') }
however it keeps showing the first value it took, any idea why is this happening?
Hello everyone, I apologize for repeating the question, but I ran into the same problem today
I did that and everything was translating fine but actions header. updated my settings on my language selected event which contains
actions: { columnTitle: this._translate.instant('global.actions') }
however it keeps showing the first value it took, any idea why is this happening?
Most helpful comment
I did that and everything was translating fine but actions header. updated my settings on my language selected event which contains
actions: { columnTitle: this._translate.instant('global.actions') }however it keeps showing the first value it took, any idea why is this happening?