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.i18n }, 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.i18n.tr('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.i18n.tr('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 i18n 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.i18n } .

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