Ufdjrw

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.

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.

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
 ;