feat(translate): make ngx-translate an optional dependency

src/app/examples/grid-menu.component.ts

@@ -16,7 +16,7 @@ export class GridMenuComponent implements OnInit {
       <li>You can change the Grid Menu icon, for example "fa-ellipsis-v"&nbsp;&nbsp;<span class="fa fa-ellipsis-v"></span>&nbsp;&nbsp;(which is shown in this example)</li>
       <li>By default the Grid Menu shows all columns which you can show/hide them</li>
       <li>You can configure multiple custom "commands" to show up in the Grid Menu and use the "onGridMenuCommand()" callback</li>
-      <li>Doing a "right+click" over any column header will also provide a way to show/hide a column (via the Column Picker Plugin)</li>
+      <li>Doing a "right + click" over any column header will also provide a way to show/hide a column (via the Column Picker Plugin)</li>
       <li><i class="fa fa-arrow-down"></i> You can also show the Grid Menu anywhere on your page</li>
     </ul>
   `;

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

@@ -7,7 +7,7 @@ import 'slickgrid/slick.grid';
 import 'slickgrid/slick.dataview';
 
 // ...then everything else...
-import { AfterViewInit, Component, ElementRef, EventEmitter, Inject, Injectable, Input, Output, OnDestroy, OnInit } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, EventEmitter, Inject, Injectable, Input, Output, OnDestroy, OnInit, Optional } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
 import { GlobalGridOptions } from './../global-grid-options';
 import { titleCase, unsubscribeAllObservables } from './../services/utilities';
@@ -168,7 +168,7 @@ export class AngularSlickgridComponent implements AfterViewInit, OnDestroy, OnIn
     private resizer: ResizerService,
     private sharedService: SharedService,
     private sortService: SortService,
-    private translate: TranslateService,
+    @Optional() private translate: TranslateService,
     @Inject('config') private forRootConfig: GridOption
   ) { }
 
@@ -400,16 +400,18 @@ export class AngularSlickgridComponent implements AfterViewInit, OnDestroy, OnIn
 
   bindDifferentHooks(grid: any, gridOptions: GridOption, dataView: any) {
     // on locale change, we have to manually translate the Headers, GridMenu
-    this.subscriptions.push(
-      this.translate.onLangChange.subscribe((event) => {
-        if (gridOptions.enableTranslate) {
-          this.extensionService.translateColumnHeaders();
-          this.extensionService.translateColumnPicker();
-          this.extensionService.translateGridMenu();
-          this.extensionService.translateHeaderMenu();
-        }
-      })
-    );
+    if (this.translate && this.translate.onLangChange) {
+      this.subscriptions.push(
+        this.translate.onLangChange.subscribe((event) => {
+          if (gridOptions.enableTranslate) {
+            this.extensionService.translateColumnHeaders();
+            this.extensionService.translateColumnPicker();
+            this.extensionService.translateGridMenu();
+            this.extensionService.translateHeaderMenu();
+          }
+        })
+      );
+    }
 
     // if user entered some Columns "presets", we need to reflect them all in the grid
     if (gridOptions.presets && Array.isArray(gridOptions.presets.columns) && gridOptions.presets.columns.length > 0) {

src/app/modules/angular-slickgrid/constants.ts

@@ -1,9 +1,13 @@
 export class Constants {
+  static TEXT_ALL_SELECTED = 'All Selected';
   static TEXT_CANCEL = 'Cancel';
   static TEXT_CLEAR_ALL_FILTERS = 'Clear All Filters';
   static TEXT_CLEAR_ALL_SORTING = 'Clear All Sorting';
+  static TEXT_CONTAINS = 'Contains';
   static TEXT_COLUMNS = 'Columns';
   static TEXT_COMMANDS = 'Commands';
+  static TEXT_EQUALS = 'Equals';
+  static TEXT_ENDS_WITH = 'Ends With';
   static TEXT_EXPORT_IN_CSV_FORMAT = 'Export in CSV format';
   static TEXT_EXPORT_IN_TEXT_FORMAT = 'Export in Text format (Tab delimited)';
   static TEXT_FORCE_FIT_COLUMNS = 'Force fit columns';
@@ -13,11 +17,14 @@ export class Constants {
   static TEXT_REMOVE_FILTER = 'Remove Filter';
   static TEXT_REMOVE_SORT = 'Remove Sort';
   static TEXT_SAVE = 'Save';
+  static TEXT_SELECT_ALL = 'Select All';
   static TEXT_SYNCHRONOUS_RESIZE = 'Synchronous resize';
   static TEXT_SORT_ASCENDING = 'Sort Ascending';
   static TEXT_SORT_DESCENDING = 'Sort Descending';
+  static TEXT_STARTS_WITH = 'Starts With';
   static TEXT_TOGGLE_FILTER_ROW = 'Toggle Filter Row';
   static TEXT_TOGGLE_PRE_HEADER_ROW = 'Toggle Pre-Header Row';
+  static TEXT_X_OF_Y_SELECTED = '# of % selected';
   static VALIDATION_REQUIRED_FIELD = 'Field is required';
   static VALIDATION_EDITOR_VALID_NUMBER = 'Please enter a valid number';
   static VALIDATION_EDITOR_VALID_INTEGER = 'Please enter a valid integer number';

src/app/modules/angular-slickgrid/extensions/extensionUtility.ts

@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core';
+import { Injectable, Optional } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
 import { Constants } from '../constants';
 import { ExtensionName } from '../models/index';
@@ -8,7 +8,11 @@ declare function require(name: string);
 
 @Injectable()
 export class ExtensionUtility {
-  constructor(private sharedService: SharedService, private translate: TranslateService) { }
+  constructor(private sharedService: SharedService, @Optional() private translate: TranslateService) {
+    if (this.sharedService.gridOptions && this.sharedService.gridOptions.enableTranslate && (!this.translate || !this.translate.instant)) {
+      throw new Error('[Angular-Slickgrid] requires "ngx-translate" to be installed and configured when the grid option "enableTranslate" is enabled.');
+    }
+  }
 
   /**
    * Remove a column from the grid by it's index in the grid
@@ -127,7 +131,7 @@ export class ExtensionUtility {
     if (Array.isArray(items)) {
       for (const item of items) {
         if (item[inputKey]) {
-          item[outputKey] = this.translate.instant(item[inputKey]);
+          item[outputKey] = this.translate && this.translate && this.translate.instant && this.translate.instant(item[inputKey]);
         }
       }
     }

src/app/modules/angular-slickgrid/extensions/gridMenuExtension.ts

@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core';
+import { Injectable, Optional } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
 import { Constants } from '../constants';
 import {
@@ -37,8 +37,11 @@ export class GridMenuExtension implements Extension {
     private filterService: FilterService,
     private sharedService: SharedService,
     private sortService: SortService,
-    private translate: TranslateService,
+    @Optional() private translate: TranslateService,
   ) {
+    if (this.sharedService.gridOptions && this.sharedService.gridOptions.enableTranslate && (!this.translate || !this.translate.instant)) {
+      throw new Error('[Angular-Slickgrid] requires "ngx-translate" to be installed and configured when the grid option "enableTranslate" is enabled.');
+    }
     this._eventHandler = new Slick.EventHandler();
   }
 

src/app/modules/angular-slickgrid/extensions/headerMenuExtension.ts

@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core';
+import { Injectable, Optional } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
 import { Constants } from '../constants';
 import {
@@ -31,8 +31,11 @@ export class HeaderMenuExtension implements Extension {
     private filterService: FilterService,
     private sharedService: SharedService,
     private sortService: SortService,
-    private translate: TranslateService,
+    @Optional() private translate: TranslateService,
   ) {
+    if (this.sharedService.gridOptions && this.sharedService.gridOptions.enableTranslate && (!this.translate || !this.translate.instant)) {
+      throw new Error('[Angular-Slickgrid] requires "ngx-translate" to be installed and configured when the grid option "enableTranslate" is enabled.');
+    }
     this._eventHandler = new Slick.EventHandler();
   }
 

src/app/modules/angular-slickgrid/filters/compoundDateFilter.ts

@@ -13,6 +13,7 @@ import {
   SearchTerm,
 } from './../models/index';
 import Flatpickr from 'flatpickr';
+import { Optional } from '@angular/core';
 
 // use Flatpickr from import or 'require', whichever works first
 declare function require(name: string): any;
@@ -35,7 +36,7 @@ export class CompoundDateFilter implements Filter {
   columnDef: Column;
   callback: FilterCallback;
 
-  constructor(private translate: TranslateService) { }
+  constructor(@Optional() private translate: TranslateService) { }
 
   /** Getter for the Grid Options pulled through the Grid Object */
   private get gridOptions(): GridOption {
@@ -123,7 +124,7 @@ export class CompoundDateFilter implements Filter {
   private buildDatePickerInput(searchTerm?: SearchTerm) {
     const inputFormat = mapFlatpickrDateFormatWithFieldType(this.columnDef.type || FieldType.dateIso);
     const outputFormat = mapFlatpickrDateFormatWithFieldType(this.columnDef.outputType || this.columnDef.type || FieldType.dateUtc);
-    let currentLocale = this.translate.currentLang || 'en';
+    let currentLocale = this.translate && this.translate.currentLang || 'en';
     if (currentLocale.length > 2) {
       currentLocale = currentLocale.substring(0, 2);
     }
@@ -180,12 +181,12 @@ export class CompoundDateFilter implements Filter {
   private getOptionValues(): { operator: OperatorString, description: string }[] {
     return [
       { operator: '' as OperatorString, description: '' },
-      { operator: '=' as OperatorString, description: '' },
-      { operator: '<' as OperatorString, description: '' },
-      { operator: '<=' as OperatorString, description: '' },
-      { operator: '>' as OperatorString, description: '' },
-      { operator: '>=' as OperatorString, description: '' },
-      { operator: '<>' as OperatorString, description: '' }
+      { operator: '=' as OperatorString, description: '=' },
+      { operator: '<' as OperatorString, description: '<' },
+      { operator: '<=' as OperatorString, description: '<=' },
+      { operator: '>' as OperatorString, description: '>' },
+      { operator: '>=' as OperatorString, description: '>=' },
+      { operator: '<>' as OperatorString, description: '<>' }
     ];
   }
 

src/app/modules/angular-slickgrid/filters/compoundInputFilter.ts

@@ -1,3 +1,4 @@
+import { Constants } from './../constants';
 import { TranslateService } from '@ngx-translate/core';
 import { FieldType } from './../models/index';
 import {
@@ -149,19 +150,19 @@ export class CompoundInputFilter implements Filter {
     switch (type) {
       case FieldType.string:
         optionValues = [
-          { operator: '' as OperatorString, description: this.translate.instant('CONTAINS') },
-          { operator: '=' as OperatorString, description: this.translate.instant('EQUALS') },
-          { operator: 'a*' as OperatorString, description: this.translate.instant('STARTS_WITH') },
-          { operator: '*z' as OperatorString, description: this.translate.instant('ENDS_WITH') },
+          { operator: '' as OperatorString, description: this.translate && this.translate.instant && this.translate.instant('CONTAINS') || Constants.TEXT_CONTAINS },
+          { operator: '=' as OperatorString, description: this.translate && this.translate.instant && this.translate.instant('EQUALS') || Constants.TEXT_EQUALS },
+          { operator: 'a*' as OperatorString, description: this.translate && this.translate.instant && this.translate.instant('STARTS_WITH') || Constants.TEXT_STARTS_WITH },
+          { operator: '*z' as OperatorString, description: this.translate && this.translate.instant && this.translate.instant('ENDS_WITH') || Constants.TEXT_CONTAINS },
           /*
-          { operator: 'IN' as OperatorString, description: this.translate.instant('IN_COLLECTION_SEPERATED_BY_COMMA') },
-          { operator: 'NIN' as OperatorString, description: this.translate.instant('NOT_IN_COLLECTION_SEPERATED_BY_COMMA') },
+          { operator: 'IN' as OperatorString, description: this.translate && this.translate.instant && this.translate.instant('IN_COLLECTION_SEPERATED_BY_COMMA') },
+          { operator: 'NIN' as OperatorString, description: this.translate && this.translate.instant && this.translate.instant('NOT_IN_COLLECTION_SEPERATED_BY_COMMA') },
           */
         ];
         break;
       default:
         optionValues = [
-          { operator: '' as OperatorString, description: this.translate.instant('CONTAINS') },
+          { operator: '' as OperatorString, description: this.translate && this.translate.instant && this.translate.instant('CONTAINS') || Constants.TEXT_CONTAINS },
           { operator: '=' as OperatorString, description: '' },
           { operator: '<' as OperatorString, description: '' },
           { operator: '<=' as OperatorString, description: '' },

src/app/modules/angular-slickgrid/filters/filterFactory.ts

@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core';
+import { Injectable, Optional } from '@angular/core';
 import { Filter } from '../models/filter.interface';
 import { ColumnFilter } from '../models';
 import { SlickgridConfig } from '../slickgrid-config';
@@ -12,7 +12,7 @@ export class FilterFactory {
    */
   private _options: any;
 
-  constructor(private config: SlickgridConfig, private translate: TranslateService, private collectionService: CollectionService) {
+  constructor(private config: SlickgridConfig, @Optional() private translate: TranslateService, private collectionService: CollectionService) {
     this._options = this.config.options;
   }
 

src/app/modules/angular-slickgrid/filters/nativeSelectFilter.ts

@@ -8,6 +8,7 @@ import {
   OperatorString,
   SearchTerm,
 } from './../models/index';
+import { Optional } from '@angular/core';
 
 // using external non-typed js libraries
 declare var $: any;
@@ -21,7 +22,7 @@ export class NativeSelectFilter implements Filter {
   columnDef: Column;
   callback: FilterCallback;
 
-  constructor(private translate: TranslateService) { }
+  constructor(@Optional() private translate: TranslateService) { }
 
   get operator(): OperatorType | OperatorString {
     return (this.columnDef && this.columnDef.filter && this.columnDef.filter.operator) || OperatorType.equal;