Localization support with ngx-translate

dist/angular-slickgrid.d.ts

@@ -35,10 +35,11 @@ export { hyperlinkFormatter as ɵbd } from './src/app/modules/angular-slickgrid/
 export { percentCompleteBarFormatter as ɵbf } from './src/app/modules/angular-slickgrid/formatters/percentCompleteBarFormatter';
 export { percentCompleteFormatter as ɵbe } from './src/app/modules/angular-slickgrid/formatters/percentCompleteFormatter';
 export { progressBarFormatter as ɵbg } from './src/app/modules/angular-slickgrid/formatters/progressBarFormatter';
-export { yesNoFormatter as ɵbh } from './src/app/modules/angular-slickgrid/formatters/yesNoFormatter';
-export { dateIsoSorter as ɵbj } from './src/app/modules/angular-slickgrid/sorters/dateIsoSorter';
-export { dateSorter as ɵbi } from './src/app/modules/angular-slickgrid/sorters/dateSorter';
-export { dateUsShortSorter as ɵbl } from './src/app/modules/angular-slickgrid/sorters/dateUsShortSorter';
-export { dateUsSorter as ɵbk } from './src/app/modules/angular-slickgrid/sorters/dateUsSorter';
-export { numericSorter as ɵbm } from './src/app/modules/angular-slickgrid/sorters/numericSorter';
-export { stringSorter as ɵbn } from './src/app/modules/angular-slickgrid/sorters/stringSorter';
+export { translateFormatter as ɵbh } from './src/app/modules/angular-slickgrid/formatters/translateFormatter';
+export { yesNoFormatter as ɵbi } from './src/app/modules/angular-slickgrid/formatters/yesNoFormatter';
+export { dateIsoSorter as ɵbk } from './src/app/modules/angular-slickgrid/sorters/dateIsoSorter';
+export { dateSorter as ɵbj } from './src/app/modules/angular-slickgrid/sorters/dateSorter';
+export { dateUsShortSorter as ɵbm } from './src/app/modules/angular-slickgrid/sorters/dateUsShortSorter';
+export { dateUsSorter as ɵbl } from './src/app/modules/angular-slickgrid/sorters/dateUsSorter';
+export { numericSorter as ɵbn } from './src/app/modules/angular-slickgrid/sorters/numericSorter';
+export { stringSorter as ɵbo } from './src/app/modules/angular-slickgrid/sorters/stringSorter';

dist/i18n/en.json

@@ -0,0 +1,26 @@
+{
+  "CLEAR_ALL_FILTERS": "Clear All Filters",
+  "COLUMNS": "Columns",
+  "COMMANDS": "Commands",
+  "FROM_TO_OF_TOTAL_ITEMS": "{{from}}-{{to}} of {{totalItems}} items",
+  "FORCE_FIT_COLUMNS": "Force fit columns",
+  "ITEMS": "Items",
+  "ITEMS_PER_PAGE": "items per page",
+  "OF": "of",
+  "PAGE": "Page",
+  "PAGE_X_OF_Y": "page {{x}} of {{y}}",
+  "SYNCHRONOUS_RESIZE": "Synchronous resize",
+  "TOGGLE_FILTER_ROW": "Toggle Filter Row",
+
+  "DURATION": "Duration",
+  "COMPANY": "Company",
+  "COMPLETED": "Completed",
+  "FALSE": "False",
+  "FINISH": "Finish",
+  "GENDER": "Gender",
+  "NAME": "Name",
+  "START": "Start",
+  "TASK_X": "Task {{x}}",
+  "TITLE": "Title",
+  "TRUE": "True"
+}

dist/i18n/fr.json

@@ -0,0 +1,26 @@
+{
+  "CLEAR_ALL_FILTERS": "Effacer tous les filtres",
+  "COLUMNS": "Colonnes",
+  "COMMANDS": "Commandes",
+  "FROM_TO_OF_TOTAL_ITEMS": "{{from}}-{{to}} de {{totalItems}} items",
+  "FORCE_FIT_COLUMNS": "Ajustement forcé des colonnes",
+  "ITEMS": "Items",
+  "ITEMS_PER_PAGE": "items par page",
+  "OF": "de",
+  "PAGE": "Page",
+  "PAGE_X_OF_Y": "page {{x}} de {{y}}",
+  "SYNCHRONOUS_RESIZE": "Redimension synchrone",
+  "TOGGLE_FILTER_ROW": "Basculer la ligne des filtres",
+
+  "DURATION": "Durée",
+  "COMPANY": "Compagnie",
+  "COMPLETED": "Terminé",
+  "FALSE": "Faux",
+  "FINISH": "Fin",
+  "GENDER": "Sexe",
+  "NAME": "Name",
+  "START": "Début",
+  "TASK_X": "Tâche {{x}}",
+  "TITLE": "Titre",
+  "TRUE": "Vrai"
+}

dist/package.json

@@ -1 +1 @@
-{"name":"angular-slickgrid","version":"0.6.7","description":"Slickgrid components made available in Angular","keywords":["angular","plugin","datatable","slickgrid"],"license":"MIT","scripts":{"ng":"ng","start":"ng serve","build":"ng build","test":"ng test","lint":"ng lint","e2e":"ng e2e","build-lib":"npm-run-all packagr sass:build sass:copy","build-lib-pack":"npm-run-all build-lib pack-lib copy-pack del-pack","copy-pack":"cross-env copyfiles -f *.tgz ../Angular-Slickgrid-PackageTest","del-pack":"cross-env del *.tgz","pack-lib":"npm pack ./dist","packagr":"ng-packagr -p ng-package.json","sass-build-task:scss-compile":"node-sass --source-map true src/app/modules/angular-slickgrid/styles/ -o dist/styles/css","sass-build-task:autoprefixer":"postcss dist/styles/css/*.css --use autoprefixer -d dist/styles/css","sass:build":"npm-run-all -p sass-build-task:*","sass:copy":"cross-env copyfiles -f src/app/modules/angular-slickgrid/styles/*.scss dist/styles/sass","sass:watch":"node-sass 'src/app/modules/angular-slickgrid/styles/**/*.scss' -c 'npm run sass:build'"},"author":"Ghislain B.","repository":{"type":"git","url":"http://github.com/ghiscoding/angular-slickgrid"},"private":false,"dependencies":{"@types/flatpickr":"^3.1.2","@types/moment":"^2.13.0","bootstrap":"^3.3.7","core-js":"^2.5.1","flatpickr":"^4.0.6","font-awesome":"^4.7.0","jquery":"^3.2.1","lodash":"^4.17.4","moment-mini":"^2.18.1","slickgrid":"^2.3.10","vinyl-paths":"^2.1.0"},"devDependencies":{"@angular/animations":"^5.0.0","@angular/cli":"1.5.4","@angular/common":"^5.0.0","@angular/compiler":"^5.0.0","@angular/compiler-cli":"^5.0.0","@angular/core":"^5.0.0","@angular/forms":"^5.0.0","@angular/http":"^5.0.0","@angular/language-service":"^5.0.0","@angular/platform-browser":"^5.0.0","@angular/platform-browser-dynamic":"^5.0.0","@angular/router":"^5.0.0","@types/jasmine":"~2.6.0","@types/jasminewd2":"~2.0.3","@types/node":"^8.0.39","codelyzer":"~3.2.0","copyfiles":"^1.2.0","cross-env":"^5.1.0","del":"^3.0.0","del-cli":"^1.1.0","gulp":"^3.9.1","gulp-bump":"^2.7.0","gulp-sass":"^3.1.0","gulp-yuidoc":"^0.1.2","jasmine-core":"~2.8.0","jasmine-spec-reporter":"~4.2.1","karma":"~1.7.1","karma-chrome-launcher":"~2.2.0","karma-cli":"~1.0.1","karma-coverage-istanbul-reporter":"^1.3.0","karma-jasmine":"~1.1.0","karma-jasmine-html-reporter":"^0.2.2","ng-packagr":"^1.6.0","node-sass":"^4.5.3","npm-run-all":"^4.1.1","postcss-cli":"^4.1.1","protractor":"~5.1.2","require-dir":"^0.3.2","run-sequence":"^2.2.0","rxjs":"^5.4.2","ts-node":"~3.3.0","tslint":"^5.8.0","typescript":"^2.3.4","yargs":"^9.0.1","zone.js":"^0.8.17"},"main":"bundles/angular-slickgrid.umd.js","module":"angular-slickgrid.es5.js","es2015":"angular-slickgrid.js","typings":"angular-slickgrid.d.ts","metadata":"angular-slickgrid.metadata.json"}
+{"name":"angular-slickgrid","version":"0.7.0","description":"Slickgrid components made available in Angular","keywords":["angular","plugin","datatable","slickgrid"],"license":"MIT","scripts":{"ng":"ng","start":"ng serve","build":"ng build","test":"ng test","lint":"ng lint","e2e":"ng e2e","build-lib":"npm-run-all packagr sass:build sass:copy copy:i18n","build-lib-pack":"npm-run-all build-lib pack-lib copy-pack del-pack","copy:i18n":"cross-env copyfiles -f src/assets/i18n/*.json dist/i18n","copy-pack":"cross-env copyfiles -f *.tgz ../Angular-Slickgrid-PackageTest","del-pack":"cross-env del *.tgz","pack-lib":"npm pack ./dist","packagr":"ng-packagr -p ng-package.json","sass-build-task:scss-compile":"node-sass --source-map true src/app/modules/angular-slickgrid/styles/ -o dist/styles/css","sass-build-task:autoprefixer":"postcss dist/styles/css/*.css --use autoprefixer -d dist/styles/css","sass:build":"npm-run-all -p sass-build-task:*","sass:copy":"cross-env copyfiles -f src/app/modules/angular-slickgrid/styles/*.scss dist/styles/sass","sass:watch":"node-sass 'src/app/modules/angular-slickgrid/styles/**/*.scss' -c 'npm run sass:build'"},"author":"Ghislain B.","repository":{"type":"git","url":"http://github.com/ghiscoding/angular-slickgrid"},"private":false,"dependencies":{"@ngx-translate/core":"^9.0.1","@ngx-translate/http-loader":"^2.0.0","@types/flatpickr":"^3.1.2","@types/moment":"^2.13.0","bootstrap":"^3.3.7","core-js":"^2.5.1","flatpickr":"^4.0.6","font-awesome":"^4.7.0","jquery":"^3.2.1","lodash":"^4.17.4","moment-mini":"^2.18.1","slickgrid":"^2.3.10","vinyl-paths":"^2.1.0"},"devDependencies":{"@angular/animations":"^5.0.0","@angular/cli":"1.5.4","@angular/common":"^5.0.0","@angular/compiler":"^5.0.0","@angular/compiler-cli":"^5.0.0","@angular/core":"^5.0.0","@angular/forms":"^5.0.0","@angular/http":"^5.0.0","@angular/language-service":"^5.0.0","@angular/platform-browser":"^5.0.0","@angular/platform-browser-dynamic":"^5.0.0","@angular/router":"^5.0.0","@types/jasmine":"~2.6.0","@types/jasminewd2":"~2.0.3","@types/node":"^8.0.39","codelyzer":"~3.2.0","copyfiles":"^1.2.0","cross-env":"^5.1.0","del":"^3.0.0","del-cli":"^1.1.0","gulp":"^3.9.1","gulp-bump":"^2.7.0","gulp-sass":"^3.1.0","gulp-yuidoc":"^0.1.2","jasmine-core":"~2.8.0","jasmine-spec-reporter":"~4.2.1","karma":"~1.7.1","karma-chrome-launcher":"~2.2.0","karma-cli":"~1.0.1","karma-coverage-istanbul-reporter":"^1.3.0","karma-jasmine":"~1.1.0","karma-jasmine-html-reporter":"^0.2.2","ng-packagr":"^1.6.0","node-sass":"^4.5.3","npm-run-all":"^4.1.1","postcss-cli":"^4.1.1","protractor":"~5.1.2","require-dir":"^0.3.2","run-sequence":"^2.2.0","rxjs":"^5.4.2","ts-node":"~3.3.0","tslint":"^5.8.0","typescript":"^2.3.4","yargs":"^9.0.1","zone.js":"^0.8.17"},"main":"bundles/angular-slickgrid.umd.js","module":"angular-slickgrid.es5.js","es2015":"angular-slickgrid.js","typings":"angular-slickgrid.d.ts","metadata":"angular-slickgrid.metadata.json"}

dist/src/app/modules/angular-slickgrid/components/angular-slickgrid.component.d.ts

@@ -26,13 +26,15 @@ import { GridEventService } from './../services/gridEvent.service';
 import { GridExtraService } from './../services/gridExtra.service';
 import { ResizerService } from './../services/resizer.service';
 import { SortService } from './../services/sort.service';
+import { TranslateService } from '@ngx-translate/core';
 export declare class AngularSlickgridComponent implements AfterViewInit, OnDestroy, OnInit {
     private filterService;
     private sortService;
     private gridExtraService;
     private gridEventService;
     private resizer;
     private controlAndPluginService;
+    private translate;
     private _dataset;
     private _dataView;
     private _gridOptions;
@@ -49,7 +51,7 @@ export declare class AngularSlickgridComponent implements AfterViewInit, OnDestr
     gridHeight: number;
     gridWidth: number;
     dataset: any[];
-    constructor(filterService: FilterService, sortService: SortService, gridExtraService: GridExtraService, gridEventService: GridEventService, resizer: ResizerService, controlAndPluginService: ControlAndPluginService);
+    constructor(filterService: FilterService, sortService: SortService, gridExtraService: GridExtraService, gridEventService: GridEventService, resizer: ResizerService, controlAndPluginService: ControlAndPluginService, translate: TranslateService);
     ngOnInit(): void;
     ngOnDestroy(): void;
     ngAfterViewInit(): void;

dist/src/app/modules/angular-slickgrid/formatters/index.d.ts

@@ -16,5 +16,6 @@ export declare const Formatters: {
     percentComplete: (row: number, cell: number, value: any, columnDef: Column, dataContext: any) => string;
     percentCompleteBar: (row: number, cell: number, value: any, columnDef: Column, dataContext: any) => string;
     progressBar: (row: number, cell: number, value: any, columnDef: Column, dataContext: any) => string;
+    translate: (row: number, cell: number, value: any, columnDef: Column, dataContext: any) => string;
     yesNo: (row: number, cell: number, value: any, columnDef: Column, dataContext: any) => string;
 };

dist/src/app/modules/angular-slickgrid/formatters/translateFormatter.d.ts

@@ -0,0 +1,2 @@
+import { Formatter } from './../models/index';
+export declare const translateFormatter: Formatter;

dist/src/app/modules/angular-slickgrid/models/column.interface.d.ts

@@ -25,6 +25,7 @@ export interface Column {
         };
     };
     headerCssClass?: string;
+    headerKey?: string;
     id: number | string;
     isEditable?: boolean;
     isHidden?: boolean;

dist/src/app/modules/angular-slickgrid/models/gridOption.interface.d.ts

@@ -34,6 +34,7 @@ export interface GridOption {
     enableRowSelection?: boolean;
     enableSorting?: boolean;
     enableTextSelectionOnCells?: boolean;
+    enableTranslate?: boolean;
     explicitInitialization?: boolean;
     forceFitColumns?: boolean;
     gridContainerId?: string;

dist/src/app/modules/angular-slickgrid/services/controlAndPlugin.service.d.ts

@@ -1,20 +1,24 @@
 import { FilterService } from './filter.service';
 import { GridExtraService } from './gridExtra.service';
 import { Column, GridOption } from './../models';
+import { TranslateService } from '@ngx-translate/core';
 export declare class ControlAndPluginService {
     private filterService;
     private gridExtraService;
-    _dataView: any;
-    _grid: any;
-    _visibleColumns: Column[];
+    private translate;
+    private _dataView;
+    private _grid;
+    private _gridOptions;
+    private _columnDefinitions;
+    visibleColumns: Column[];
     autoTooltipPlugin: any;
     checkboxSelectorPlugin: any;
     columnPickerControl: any;
     headerButtonsPlugin: any;
     headerMenuPlugin: any;
     gridMenuControl: any;
     rowSelectionPlugin: any;
-    constructor(filterService: FilterService, gridExtraService: GridExtraService);
+    constructor(filterService: FilterService, gridExtraService: GridExtraService, translate: TranslateService);
     /**
      * Attach/Create different Controls or Plugins after the Grid is created
      * @param {any} grid
@@ -23,12 +27,25 @@ export declare class ControlAndPluginService {
      * @param {any} dataView
      */
     attachDifferentControlOrPlugins(grid: any, columnDefinitions: Column[], options: GridOption, dataView: any): void;
+    createGridMenu(grid: any, columnDefinitions: Column[], options: GridOption): any;
     hideColumn(column: Column): void;
     removeColumnByIndex(array: any[], index: number): any[];
     autoResizeColumns(): void;
     destroy(): void;
     private addGridMenuCustomCommands(grid, options);
     private prepareGridMenu(grid, options);
+    /**
+     * Translate the Grid Menu ColumnTitle and CustomTitle.
+     * Note that the only way that seems to work is to destroy and re-create the Grid Menu
+     * Changing only the gridMenu.columnTitle with i18n translate was not enough.
+     */
+    translateGridMenu(): void;
+    /**
+     * Translate manually the header titles.
+     * We could optionally pass a locale (that will change currently loaded locale), else it will use current locale
+     * @param {string} locale locale to use
+     */
+    translateHeaders(locale?: string): void;
     /**
      * Attach/Create different plugins before the Grid creation.
      * For example the multi-select have to be added to the column definition before the grid is created to work properly

dist/src/app/modules/angular-slickgrid/services/gridExtra.service.d.ts

@@ -19,6 +19,7 @@ export declare class GridExtraService {
     getSelectedRows(): any;
     setSelectedRow(rowIndex: number): void;
     setSelectedRows(rowIndexes: number[]): void;
+    renderGrid(): void;
     /** Add an item (data item) to the datagrid
      * @param object dataItem: item object holding all properties of that row
      */

ng-package.json

@@ -5,6 +5,8 @@
   "lib": {
     "entryFile": "public_api.ts",
     "externals": {
+      "@ngx-translate/core": "ngx-translate-core",
+      "@ngx-translate/core/index": "ngx-translate-core",
       "flatpickr": "flatpickr"
     }
   }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-slickgrid",
-  "version": "0.6.7",
+  "version": "0.7.0",
   "description": "Slickgrid components made available in Angular",
   "keywords": [
     "angular",
@@ -16,8 +16,9 @@
     "test": "ng test",
     "lint": "ng lint",
     "e2e": "ng e2e",
-    "build-lib": "npm-run-all packagr sass:build sass:copy",
+    "build-lib": "npm-run-all packagr sass:build sass:copy copy:i18n",
     "build-lib-pack": "npm-run-all build-lib pack-lib copy-pack del-pack",
+    "copy:i18n": "cross-env copyfiles -f src/assets/i18n/*.json dist/i18n",
     "copy-pack": "cross-env copyfiles -f *.tgz ../Angular-Slickgrid-PackageTest",
     "del-pack": "cross-env del *.tgz",
     "pack-lib": "npm pack ./dist",
@@ -35,6 +36,8 @@
   },
   "private": false,
   "dependencies": {
+    "@ngx-translate/core": "^9.0.1",
+    "@ngx-translate/http-loader": "^2.0.0",
     "@types/flatpickr": "^3.1.2",
     "@types/moment": "^2.13.0",
     "bootstrap": "^3.3.7",

src/app/app-routing.module.ts

@@ -6,6 +6,7 @@ import { GridEditorComponent } from './examples/grid-editor.component';
 import { GridFormatterComponent } from './examples/grid-formatter.component';
 import { GridHeaderButtonComponent } from './examples/grid-headerbutton.component';
 import { GridHeaderMenuComponent } from './examples/grid-headermenu.component';
+import { GridLocalizationComponent } from './examples/grid-localization.component';
 import { GridOdataComponent } from './examples/grid-odata.component';
 import { GridGraphqlComponent } from './examples/grid-graphql.component';
 import { GridRowSelectionComponent } from './examples/grid-rowselection.component';
@@ -23,6 +24,7 @@ const routes: Routes = [
   { path: 'headermenu', component: GridHeaderMenuComponent },
   { path: 'gridgraphql', component: GridGraphqlComponent },
   { path: 'gridmenu', component: GridMenuComponent },
+  { path: 'localization', component: GridLocalizationComponent },
   { path: 'clientside', component: GridClientSideComponent },
   { path: 'odata', component: GridOdataComponent },
   { path: 'selection', component: GridRowSelectionComponent },

src/app/app.component.html

@@ -57,6 +57,9 @@
             <li routerLinkActive="active">
                 <a [routerLink]="['/additem']">11- Add/Update Grid Item</a>
             </li>
+            <li routerLinkActive="active">
+                <a [routerLink]="['/localization']">12- Localization (i18n)</a>
+            </li>
         </ul>
     </div>
 </section>