Ngx-admin: Smart Table translate columns name

Created on 30 Mar 2017  Â·  9Comments  Â·  Source: akveo/ngx-admin

How can I translate columns headers of Smart Table?

question

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?

All 9 comments

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?

Was this page helpful?
0 / 5 - 0 ratings

Related issues

tal-shahar picture tal-shahar  Â·  3Comments

dreamerleolioa picture dreamerleolioa  Â·  4Comments

burtonator picture burtonator  Â·  3Comments

myurAgarwal picture myurAgarwal  Â·  3Comments

queirozfcom picture queirozfcom  Â·  4Comments