Angular translation with ng2-smart-table

Question

I am using ng2-smart-table.

I am giving heading for the column from component.ts file.

settings = {
    actions: {
      add: false,
      edit: false,
      delete: false
    },
    columns: {
      date: {
        title: 'Date'
      },
      sent: {
        title: 'Sent'
      },
      billed: {
        title: 'Billed'
      }       
    }
  }

My question is how to translate this heading in angular.

score 4 · Answer 1 · answered Mar 08 '19 at 14:08

You can use ngx-translate-core for translation (read the doc to install it).

In your component you can try something like this :

import { LangChangeEvent, TranslateService } from '@ngx-translate/core';
import { Component } from '@angular/core';

@Component({
    selector: 'app-contact',
    templateUrl: './contact.component.html'
})
export class YourComponent {
    settings: any;

    constructor(private translateService: TranslateService) {
        // we will set the default lang to 'fr' but this part is generally done
        // in your app.component.
        this.translateService.setDefaultLang('fr');
        this.translateService.use('fr');
        // we launch manually a table settings here with the default lang setted
        this.initTableSettings();
        // listening on the lang changements
        this.translateService.onLangChange.subscribe((event: LangChangeEvent) => {
            this.translateService.use(event.lang);
            // every time the languages will change, we reload the settings
            this.initTableSettings();
        });
    }

    initTableSettings(): void {
        this.settings = {
            actions: {
                add: false,
                edit: false,
                delete: false
            },
            columns: {
                date: {
                    title: this.translateService.instant('column_date')
                },
                sent: {
                    title: this.translateService.instant('column_sent')
                },
                billed: {
                    title: this.translateService.instant('column_billed')
                }
            }
        };
    }
}

And in your i18n file (fr.json here) :

{
       "column_date": "<< your traduction in french here >>",
       "column_sent": "<< your traduction in french here >>",
       "column_billed": "<< your traduction in french here >>"
}

You can see in the doc how to install and configure the TranslateService of Angular, basically how to import the service in your app module, where to put your i18n files, etc.

score 1 · Answer 2 · answered Mar 08 '19 at 14:08

I don't use angular-i18n but according to https://github.com/angular/angular/issues/11405 and Translate strings inside Angular Typescript code, at the moment you have to use something like https://github.com/ngx-translate/i18n-polyfill to get localized strings in code.

Directly using ngx-translate (probably also when using the polyfill) I have a function setTableSettings that gets called from ngOnInit and on language change

setTableSettings(){
        // i18n problem: https://github.com/akveo/ng2-smart-table/issues/277
        this.settings = {
            actions:{
                add: false,
                edit: false,
                delete: false
            },
            attr:  {
                class: 'table'
            },
            columns: {
                date: {
                    title: this.translateService.instant('MY.LOCALIZATION.IDENTIFIER.DATE'),
                    editable: false
                ...
                } 
                 // more columns
            } // end columns
        };          
    }

Angular translation with ng2-smart-table

2 Answers2