Localization Component Sample

Class sample

You need to add a translation key via the property headerKey to each column definition, for example: headerKey: 'TITLE'

import { Component, OnInit, Injectable } from '@angular/core';
import { Column, Editors, FieldType, Formatter, Formatters, GridExtraService, GridExtraUtils, GridOption, OnEventArgs, ResizerService } from './../modules/angular-slickgrid';
import { TranslateService } from '@ngx-translate/core';

@Component({
  templateUrl: './grid-localization.component.html'
})
@Injectable()
export class Example implements OnInit {
  gridOptions: GridOption;
  columnDefinitions: Column[];
  dataset: any[];

  constructor(private translate: TranslateService) {
    // define the grid options & columns and then create the grid itself
    this.defineGrid();
  }

  // Define grid Options and Columns
  // provide a headerKey for each column and enableTranslate to True in GridOption
  defineGrid() {
    this.columnDefinitions = [
      { id: 'title', name: 'Title', field: 'title', headerKey: 'TITLE', formatter: this.taskTranslateFormatter, sortable: true, minWidth: 100 },
      { id: 'duration', name: 'Duration (days)', field: 'duration', headerKey: 'DURATION', sortable: true, minWidth: 100 },
      { id: 'start', name: 'Start', field: 'start', headerKey: 'START', formatter: Formatters.dateIso, minWidth: 100 },
      { id: 'finish', name: 'Finish', field: 'finish', headerKey: 'FINISH', formatter: Formatters.dateIso, minWidth: 100 },
      { id: 'completed', name: 'Completed', field: 'completed', headerKey: 'COMPLETED', formatter: Formatters.translate, params: { i18n: this.translate }, sortable: true, minWidth: 100 }
      // OR via your own custom translate formatter
      // { id: 'completed', name: 'Completed', field: 'completed', headerKey: 'COMPLETED', formatter: translateFormatter, sortable: true, minWidth: 100 }
    ];
    this.gridOptions = {
      autoResize: {
        containerId: 'demo-container',
        sidePadding: 15
      },
      enableAutoResize: true,
      enableTranslate: true
    };
  }
}

  // create a custom translate Formatter
  taskTranslateFormatter: Formatter = (row, cell, value, columnDef, dataContext) => {
    return this.translate('TASK_X', { x: value });
  }

Custom Formatter (cell values)

You can define your own custom Formatter by providing the i18n Service into the Formatter and using the .tr() function to translate the cell value.

taskTranslateFormatter: Formatter = (row, cell, value, columnDef, dataContext) => {
    return this.translate.instant('TASK_X', { x: value });
}

Using Angular-Slickgrid Formatters.Translate

Instead of defining a custom formatter over and over, you could also use the built-in Angular-Slickgrid Formatters.translate. However for the formatter to work, you need to provide the ngx-translate Service instance, you can do so using the params properties which is made to pass any type of data, however you need to pass it with this structure: params: { i18n: this.translate } .

this.columnDefinitions = [
      { 
        id: 'title', 
        name: 'Title', 
        field: 'title', 
        headerKey: 'TITLE', 
        formatter: Formatters.translate, 
        params: { i18n: this.translate } // provide the `ngx-translate instance through the params.i18n property
      }
    ];