diff --git a/aurelia-slickgrid/src/aurelia-slickgrid/aurelia-slickgrid.ts b/aurelia-slickgrid/src/aurelia-slickgrid/aurelia-slickgrid.ts
index 64344c333..b6d983c76 100644
--- a/aurelia-slickgrid/src/aurelia-slickgrid/aurelia-slickgrid.ts
+++ b/aurelia-slickgrid/src/aurelia-slickgrid/aurelia-slickgrid.ts
@@ -34,6 +34,7 @@ import {
   GridStateChange,
   GridStateType,
   Pagination,
+  AureliaGridInstance,
 } from './models/index';
 import {
   ControlAndPluginService,
@@ -191,6 +192,24 @@ export class AureliaSlickgridCustomElement {
     }
 
     this.gridStateService.init(this.grid, this.filterService, this.sortService);
+
+    // create the Aurelia Grid Instance with reference to all Services
+    const aureliaElementInstance: AureliaGridInstance = {
+      backendService: this.gridOptions && this.gridOptions.backendServiceApi && this.gridOptions.backendServiceApi.service,
+      exportService: this.exportService,
+      filterService: this.filterService,
+      gridEventService: this.gridEventService,
+      gridStateService: this.gridStateService,
+      gridService: this.gridExtraService,
+      groupingService: this.groupingAndColspanService,
+      pluginService: this.controlAndPluginService,
+      resizerService: this.resizer,
+      sortService: this.sortService,
+    };
+    this.elm.dispatchEvent(new CustomEvent(`${aureliaEventPrefix}-on-aurelia-grid-created`, {
+      bubbles: true,
+      detail: aureliaElementInstance
+    }));
   }
 
   detached() {
diff --git a/aurelia-slickgrid/src/aurelia-slickgrid/index.ts b/aurelia-slickgrid/src/aurelia-slickgrid/index.ts
index 6c3b2a665..cc4a21dd7 100644
--- a/aurelia-slickgrid/src/aurelia-slickgrid/index.ts
+++ b/aurelia-slickgrid/src/aurelia-slickgrid/index.ts
@@ -3,11 +3,11 @@ import { AureliaSlickgridCustomElement } from './aurelia-slickgrid';
 import { SlickPaginationCustomElement } from './slick-pagination';
 import { SlickgridConfig } from './slickgrid-config';
 import { Filters, PLUGIN_NAME as FILTER_PLUGIN_NAME } from './filters/index';
+const SERVICE_NAME = 'AURELIA__SLICKGRID_SERVICES';
 
 // expose all public classes
 // aggregators, editors, formatters, services...
 export * from './models/index';
-export * from './services/index';
 export * from './formatters/index';
 export * from './grouping-formatters/index';
 export * from './sorters/index';
@@ -17,6 +17,26 @@ export * from './editors/index';
 export * from './filter-conditions/index';
 export * from './filters/index';
 
+export { GridExtraUtils, GraphqlService, GridOdataService } from './services/index';
+
+// import all Services separately
+import {
+  CollectionService,
+  ControlAndPluginService,
+  ExportService,
+  FilterService,
+  GraphqlService,
+  GridEventService,
+  GridExtraService,
+  GridExtraUtils,
+  GridStateService,
+  GridOdataService,
+  GroupingAndColspanService,
+  OdataService,
+  ResizerService,
+  SortService,
+} from './services/index';
+
 export function configure(aurelia: any, callback: any) {
   aurelia.globalResources(PLATFORM.moduleName('./aurelia-slickgrid'));
   aurelia.globalResources(PLATFORM.moduleName('./slick-pagination'));
@@ -29,6 +49,20 @@ export function configure(aurelia: any, callback: any) {
   aurelia.container.registerTransient(FILTER_PLUGIN_NAME, Filters.singleSelect);
   aurelia.container.registerTransient(FILTER_PLUGIN_NAME, Filters.select);
 
+  // register all Services as transient to support multiple grids
+  aurelia.container.registerTransient(SERVICE_NAME, ControlAndPluginService);
+  aurelia.container.registerTransient(SERVICE_NAME, ExportService);
+  aurelia.container.registerTransient(SERVICE_NAME, FilterService);
+  aurelia.container.registerTransient(SERVICE_NAME, GraphqlService);
+  aurelia.container.registerTransient(SERVICE_NAME, GridEventService);
+  aurelia.container.registerTransient(SERVICE_NAME, GridExtraService);
+  aurelia.container.registerTransient(SERVICE_NAME, GridStateService);
+  aurelia.container.registerTransient(SERVICE_NAME, GridOdataService);
+  aurelia.container.registerTransient(SERVICE_NAME, GroupingAndColspanService);
+  aurelia.container.registerTransient(SERVICE_NAME, OdataService);
+  aurelia.container.registerTransient(SERVICE_NAME, ResizerService);
+  aurelia.container.registerTransient(SERVICE_NAME, SortService);
+
   const config = new SlickgridConfig();
 
   aurelia.container.registerInstance(SlickgridConfig, config);
diff --git a/aurelia-slickgrid/src/aurelia-slickgrid/models/aureliaGridInstance.interface.ts b/aurelia-slickgrid/src/aurelia-slickgrid/models/aureliaGridInstance.interface.ts
new file mode 100644
index 000000000..a564bbe2c
--- /dev/null
+++ b/aurelia-slickgrid/src/aurelia-slickgrid/models/aureliaGridInstance.interface.ts
@@ -0,0 +1,25 @@
+import { BackendService } from './../models';
+import {
+  ControlAndPluginService,
+  ExportService,
+  FilterService,
+  GridExtraService,
+  GridEventService,
+  GridStateService,
+  GroupingAndColspanService,
+  ResizerService,
+  SortService
+} from '../services';
+
+export interface AureliaGridInstance {
+  backendService?: BackendService;
+  pluginService: ControlAndPluginService;
+  exportService: ExportService;
+  filterService: FilterService;
+  gridService: GridExtraService;
+  gridEventService: GridEventService;
+  gridStateService: GridStateService;
+  groupingService: GroupingAndColspanService;
+  resizerService: ResizerService;
+  sortService: SortService;
+}
diff --git a/aurelia-slickgrid/src/aurelia-slickgrid/models/index.ts b/aurelia-slickgrid/src/aurelia-slickgrid/models/index.ts
index 5c65a10e8..0a514f853 100644
--- a/aurelia-slickgrid/src/aurelia-slickgrid/models/index.ts
+++ b/aurelia-slickgrid/src/aurelia-slickgrid/models/index.ts
@@ -1,4 +1,5 @@
 export * from './aggregator.interface';
+export * from './aureliaGridInstance.interface';
 export * from './autoResizeOption.interface';
 export * from './backendService.interface';
 export * from './backendEventChanged.interface';
diff --git a/aurelia-slickgrid/src/aurelia-slickgrid/services/graphql.service.ts b/aurelia-slickgrid/src/aurelia-slickgrid/services/graphql.service.ts
index 0924ba102..1aef90cec 100644
--- a/aurelia-slickgrid/src/aurelia-slickgrid/services/graphql.service.ts
+++ b/aurelia-slickgrid/src/aurelia-slickgrid/services/graphql.service.ts
@@ -1,5 +1,4 @@
 import { EventAggregator } from 'aurelia-event-aggregator';
-import { inject } from 'aurelia-framework';
 import { I18N } from 'aurelia-i18n';
 import { mapOperatorType, mapOperatorByFilterType, mapOperatorByFieldType } from './utilities';
 import {
@@ -34,7 +33,6 @@ const DEFAULT_FILTER_TYPING_DEBOUNCE = 750;
 const DEFAULT_ITEMS_PER_PAGE = 25;
 const DEFAULT_PAGE_SIZE = 20;
 
-@inject(I18N)
 export class GraphqlService implements BackendService {
   private _currentFilters: ColumnFilters | CurrentFilter[];
   private _currentPagination: CurrentPagination;
@@ -49,8 +47,6 @@ export class GraphqlService implements BackendService {
     offset: 0
   };
 
-  constructor(private i18n: I18N) { }
-
   /** Getter for the Grid Options pulled through the Grid Object */
   private get _gridOptions(): GridOption {
     return (this._grid && this._grid.getOptions) ? this._grid.getOptions() : {};
@@ -134,7 +130,7 @@ export class GraphqlService implements BackendService {
     }
     if (this.options.addLocaleIntoQuery) {
       // first: 20, ... locale: "en-CA"
-      datasetFilters.locale = this.i18n.getLocale() || 'en';
+      datasetFilters.locale = (this._gridOptions.params && this._gridOptions.params.i18n && this._gridOptions.params.i18n.getLocale()) || 'en';
     }
     if (this.options.extraQueryArguments) {
       // first: 20, ... userId: 123
diff --git a/aurelia-slickgrid/src/aurelia-slickgrid/services/grid-odata.service.ts b/aurelia-slickgrid/src/aurelia-slickgrid/services/grid-odata.service.ts
index c345c60fd..0b6903e45 100644
--- a/aurelia-slickgrid/src/aurelia-slickgrid/services/grid-odata.service.ts
+++ b/aurelia-slickgrid/src/aurelia-slickgrid/services/grid-odata.service.ts
@@ -37,6 +37,7 @@ export class GridOdataService implements BackendService {
   private _currentPagination: CurrentPagination;
   private _currentSorters: CurrentSorter[];
   private _grid: any;
+  odataService: OdataService;
   options: OdataOption;
   pagination: Pagination | undefined;
   defaultOptions: OdataOption = {
@@ -45,7 +46,9 @@ export class GridOdataService implements BackendService {
     caseType: CaseType.pascalCase
   };
 
-  constructor(private odataService: OdataService) { }
+  constructor() {
+    this.odataService = new OdataService();
+  }
 
   /** Getter for the Grid Options pulled through the Grid Object */
   private get _gridOptions(): GridOption {
diff --git a/aurelia-slickgrid/src/examples/slickgrid/example10.html b/aurelia-slickgrid/src/examples/slickgrid/example10.html
index a66300675..64396b462 100644
--- a/aurelia-slickgrid/src/examples/slickgrid/example10.html
+++ b/aurelia-slickgrid/src/examples/slickgrid/example10.html
@@ -24,7 +24,13 @@ <h2>${title}</h2>
     </div>
   </div>
 
-  <aurelia-slickgrid grid-id="grid1" column-definitions.bind="columnDefinitions" dataview.bind="dataviewObj" grid.bind="gridObj"
-    grid-options.bind="gridOptions" dataset.bind="dataset">
+  <aurelia-slickgrid
+    grid-id="grid1"
+    column-definitions.bind="columnDefinitions"
+    dataview.bind="dataviewObj"
+    grid.bind="gridObj"
+    grid-options.bind="gridOptions"
+    dataset.bind="dataset"
+    asg-on-aurelia-grid-created.delegate="aureliaGridReady($event.detail)">
   </aurelia-slickgrid>
 </template>
diff --git a/aurelia-slickgrid/src/examples/slickgrid/example10.ts b/aurelia-slickgrid/src/examples/slickgrid/example10.ts
index 6d6b007af..9df48a8a2 100644
--- a/aurelia-slickgrid/src/examples/slickgrid/example10.ts
+++ b/aurelia-slickgrid/src/examples/slickgrid/example10.ts
@@ -1,5 +1,5 @@
 import { autoinject, bindable } from 'aurelia-framework';
-import { Column, FieldType, Formatter, Formatters, GridExtraService, GridExtraUtils, GridOption } from '../../aurelia-slickgrid';
+import { AureliaGridInstance, Column, FieldType, Formatter, Formatters, GridExtraUtils, GridOption } from '../../aurelia-slickgrid';
 
 @autoinject()
 export class Example2 {
@@ -12,6 +12,7 @@ export class Example2 {
     </ul>
   `;
 
+  aureliaGrid: AureliaGridInstance;
   columnDefinitions: Column[];
   gridOptions: GridOption;
   dataset: any[];
@@ -19,7 +20,7 @@ export class Example2 {
   isMultiSelect = true;
   selectedObjects: any[] = [];
 
-  constructor(private gridExtraService: GridExtraService) {
+  constructor() {
     // define the grid options & columns and then create the grid itself
     this.defineGrid();
   }
@@ -35,6 +36,10 @@ export class Example2 {
     this.gridObj.onSelectedRowsChanged.unsubscribe();
   }
 
+  aureliaGridReady(aureliaGrid: AureliaGridInstance) {
+    this.aureliaGrid = aureliaGrid;
+  }
+
   /* Define grid Options and Columns */
   defineGrid() {
     this.columnDefinitions = [
@@ -100,7 +105,7 @@ export class Example2 {
       enableCellNavigation: !isMultiSelect,
       enableCheckboxSelector: isMultiSelect
     }); // change the grid option dynamically
-    this.gridExtraService.setSelectedRows([]);
+    this.aureliaGrid.gridService.setSelectedRows([]);
 
     return true;
   }
diff --git a/aurelia-slickgrid/src/examples/slickgrid/example11.html b/aurelia-slickgrid/src/examples/slickgrid/example11.html
index 19b206184..082eb546e 100644
--- a/aurelia-slickgrid/src/examples/slickgrid/example11.html
+++ b/aurelia-slickgrid/src/examples/slickgrid/example11.html
@@ -11,6 +11,11 @@ <h2>${title}</h2>
     <hr/>
   </div>
 
-  <aurelia-slickgrid grid-id="grid1" column-definitions.bind="columnDefinitions" grid-options.bind="gridOptions" dataset.bind="dataset">
+  <aurelia-slickgrid
+    grid-id="grid1"
+    column-definitions.bind="columnDefinitions"
+    grid-options.bind="gridOptions"
+    dataset.bind="dataset"
+    asg-on-aurelia-grid-created.delegate="aureliaGridReady($event.detail)">
   </aurelia-slickgrid>
-</template>
\ No newline at end of file
+</template>
diff --git a/aurelia-slickgrid/src/examples/slickgrid/example11.ts b/aurelia-slickgrid/src/examples/slickgrid/example11.ts
index ca6c8aa41..910724354 100644
--- a/aurelia-slickgrid/src/examples/slickgrid/example11.ts
+++ b/aurelia-slickgrid/src/examples/slickgrid/example11.ts
@@ -1,5 +1,15 @@
 import { autoinject } from 'aurelia-framework';
-import { Column, Editors, FieldType, Formatter, Formatters, GridExtraService, GridExtraUtils, GridOption, OnEventArgs, ResizerService } from '../../aurelia-slickgrid';
+import {
+  AureliaGridInstance,
+  Column,
+  Editors,
+  FieldType,
+  Formatter,
+  Formatters,
+  GridExtraUtils,
+  GridOption,
+  OnEventArgs
+} from '../../aurelia-slickgrid';
 
 @autoinject()
 export class Example11 {
@@ -20,12 +30,13 @@ export class Example11 {
   </ul>
   `;
 
+  aureliaGrid: AureliaGridInstance;
   columnDefinitions: Column[];
   gridOptions: GridOption;
   dataset: any[];
   updatedObject: any;
 
-  constructor(private gridExtraService: GridExtraService, private resizer: ResizerService) {
+  constructor() {
     // define the grid options & columns and then create the grid itself
     this.defineGrid();
   }
@@ -35,6 +46,10 @@ export class Example11 {
     this.getData();
   }
 
+  aureliaGridReady(aureliaGrid: AureliaGridInstance) {
+    this.aureliaGrid = aureliaGrid;
+  }
+
   /* Define grid Options and Columns */
   defineGrid() {
     this.columnDefinitions = [
@@ -105,16 +120,16 @@ export class Example11 {
       finish: new Date(randomYear, (randomMonth + 2), randomDay),
       effortDriven: true
     };
-    this.gridExtraService.addItemToDatagrid(newItem);
+    this.aureliaGrid.gridService.addItemToDatagrid(newItem);
   }
 
   highlighFifthRow() {
-    this.gridExtraService.highlightRow(4, 1500);
+    this.aureliaGrid.gridService.highlightRow(4, 1500);
   }
 
   updateSecondItem() {
-    const firstItem = this.gridExtraService.getDataItemByRowNumber(1);
+    const firstItem = this.aureliaGrid.gridService.getDataItemByRowNumber(1);
     firstItem.duration = Math.round(Math.random() * 100);
-    this.gridExtraService.updateDataGridItem(firstItem);
+    this.aureliaGrid.gridService.updateDataGridItem(firstItem);
   }
 }
diff --git a/aurelia-slickgrid/src/examples/slickgrid/example12.html b/aurelia-slickgrid/src/examples/slickgrid/example12.html
index b18291eb7..584ad3a2e 100644
--- a/aurelia-slickgrid/src/examples/slickgrid/example12.html
+++ b/aurelia-slickgrid/src/examples/slickgrid/example12.html
@@ -26,6 +26,11 @@ <h2>${title}</h2>
       </button>
     </span>
   </div>
-  <aurelia-slickgrid grid-id="grid1" column-definitions.bind="columnDefinitions" grid-options.bind="gridOptions" dataset.bind="dataset">
+  <aurelia-slickgrid
+    grid-id="grid12"
+    column-definitions.bind="columnDefinitions"
+    grid-options.bind="gridOptions"
+    dataset.bind="dataset"
+    asg-on-aurelia-grid-created.delegate="aureliaGridReady($event.detail)">
   </aurelia-slickgrid>
 </template>
diff --git a/aurelia-slickgrid/src/examples/slickgrid/example12.ts b/aurelia-slickgrid/src/examples/slickgrid/example12.ts
index a8b374f7f..584c2c2ed 100644
--- a/aurelia-slickgrid/src/examples/slickgrid/example12.ts
+++ b/aurelia-slickgrid/src/examples/slickgrid/example12.ts
@@ -1,6 +1,16 @@
 import { autoinject } from 'aurelia-framework';
 import { I18N } from 'aurelia-i18n';
-import { Column, DelimiterType, ExportService, FieldType, FileType, FilterType, Formatter, Formatters, GridOption } from '../../aurelia-slickgrid';
+import {
+  AureliaGridInstance,
+  Column,
+  DelimiterType,
+  FieldType,
+  FileType,
+  FilterType,
+  Formatter,
+  Formatters,
+  GridOption
+} from '../../aurelia-slickgrid';
 
 @autoinject()
 export class Example12 {
@@ -32,13 +42,14 @@ export class Example12 {
       </ol>
     `;
 
+  aureliaGrid: AureliaGridInstance;
   gridOptions: GridOption;
   columnDefinitions: Column[];
   dataset: any[];
   selectedLanguage: string;
   duplicateTitleHeaderCount = 1;
 
-  constructor(private exportService: ExportService, private i18n: I18N) {
+  constructor(private i18n: I18N) {
     // define the grid options & columns and then create the grid itself
     this.defineGrid();
     this.selectedLanguage = this.i18n.getLocale();
@@ -49,6 +60,10 @@ export class Example12 {
     this.getData();
   }
 
+  aureliaGridReady(aureliaGrid: AureliaGridInstance) {
+    this.aureliaGrid = aureliaGrid;
+  }
+
   /* Define grid Options and Columns */
   defineGrid() {
     this.columnDefinitions = [
@@ -145,7 +160,7 @@ export class Example12 {
   }
 
   exportToFile(type = 'csv') {
-    this.exportService.exportToFile({
+    this.aureliaGrid.exportService.exportToFile({
       delimiter: (type === 'csv') ? DelimiterType.comma : DelimiterType.tab,
       filename: 'myExport',
       format: (type === 'csv') ? FileType.csv : FileType.txt
diff --git a/aurelia-slickgrid/src/examples/slickgrid/example3.html b/aurelia-slickgrid/src/examples/slickgrid/example3.html
index 3d0218ff6..0a968ad32 100644
--- a/aurelia-slickgrid/src/examples/slickgrid/example3.html
+++ b/aurelia-slickgrid/src/examples/slickgrid/example3.html
@@ -33,8 +33,14 @@ <h2>${title}</h2>
   </div>
 
   <div id="grid-container" class="col-sm-12">
-    <aurelia-slickgrid grid-id="grid1" dataview.bind="dataview" grid.bind="gridObj" column-definitions.bind="columnDefinitions"
-      grid-options.bind="gridOptions" dataset.bind="dataset">
+    <aurelia-slickgrid
+      grid-id="grid1"
+      dataview.bind="dataview"
+      grid.bind="gridObj"
+      column-definitions.bind="columnDefinitions"
+      grid-options.bind="gridOptions"
+      dataset.bind="dataset"
+      asg-on-aurelia-grid-created.delegate="aureliaGridReady($event.detail)">
     </aurelia-slickgrid>
   </div>
 </template>
diff --git a/aurelia-slickgrid/src/examples/slickgrid/example3.ts b/aurelia-slickgrid/src/examples/slickgrid/example3.ts
index ec84baa7b..d2573dc39 100644
--- a/aurelia-slickgrid/src/examples/slickgrid/example3.ts
+++ b/aurelia-slickgrid/src/examples/slickgrid/example3.ts
@@ -6,16 +6,15 @@ import {
   bindable
 } from 'aurelia-framework';
 import {
+  AureliaGridInstance,
   Column,
   Editors,
   FieldType,
   Formatters,
-  GridExtraService,
   GridExtraUtils,
   GridOption,
   OnEventArgs,
-  OperatorType,
-  ResizerService
+  OperatorType
 } from '../../aurelia-slickgrid';
 
 // using external non-typed js libraries
@@ -46,8 +45,9 @@ export class Example3 {
   isAutoEdit: boolean = true;
   alertWarning: any;
   selectedLanguage: string;
+  aureliaGrid: AureliaGridInstance;
 
-  constructor(private gridExtraService: GridExtraService, private i18n: I18N, private resizer: ResizerService) {
+  constructor(private i18n: I18N) {
     // define the grid options & columns and then create the grid itself
     this.defineGrid();
     this.selectedLanguage = this.i18n.getLocale();
@@ -65,6 +65,10 @@ export class Example3 {
     this.gridObj.onClick.unsubscribe();
   }
 
+  aureliaGridReady(aureliaGrid: AureliaGridInstance) {
+    this.aureliaGrid = aureliaGrid;
+  }
+
   /* Define grid Options and Columns */
   defineGrid() {
     this.columnDefinitions = [{
@@ -78,8 +82,8 @@ export class Example3 {
       onCellClick: (args: OnEventArgs) => {
         console.log(args);
         this.alertWarning = `Editing: ${args.dataContext.title}`;
-        this.gridExtraService.highlightRow(args.row, 1500);
-        this.gridExtraService.setSelectedRow(args.row);
+        this.aureliaGrid.gridService.highlightRow(args.row, 1500);
+        this.aureliaGrid.gridService.setSelectedRow(args.row);
       }
     }, {
       id: 'delete',
@@ -88,13 +92,13 @@ export class Example3 {
       formatter: Formatters.deleteIcon,
       minWidth: 30,
       maxWidth: 30,
-    // use onCellClick OR grid.onClick.subscribe which you can see down below
-    /*
-    onCellClick: (args: OnEventArgs) => {
-      console.log(args);
-      this.alertWarning = `Deleting: ${args.dataContext.title}`;
-    }
-    */
+      // use onCellClick OR grid.onClick.subscribe which you can see down below
+      /*
+      onCellClick: (args: OnEventArgs) => {
+        console.log(args);
+        this.alertWarning = `Deleting: ${args.dataContext.title}`;
+      }
+      */
     }, {
       id: 'title',
       name: 'Title',
@@ -251,7 +255,7 @@ export class Example3 {
     grid.onCellChange.subscribe((e, args) => {
       console.log('onCellChange', args);
       this.updatedObject = args.item;
-      this.resizer.resizeGrid(100);
+      this.aureliaGrid.resizerService.resizeGrid(100);
     });
 
     // You could also subscribe to grid.onClick
@@ -263,14 +267,14 @@ export class Example3 {
         this.alertWarning = `open a modal window to edit: ${column.dataContext.title}`;
 
         // highlight the row, to customize the color, you can change the SASS variable $row-highlight-background-color
-        this.gridExtraService.highlightRow(args.row, 1500);
+        this.aureliaGrid.gridService.highlightRow(args.row, 1500);
 
         // you could also select the row, when using "enableCellNavigation: true", it automatically selects the row
-        // this.gridExtraService.setSelectedRow(args.row);
+        // this.gridService.setSelectedRow(args.row);
       }
       if (column.columnDef.id === 'delete') {
         if (confirm('Are you sure?')) {
-          this.gridExtraService.deleteDataGridItemById(column.dataContext.id);
+          this.aureliaGrid.gridService.deleteDataGridItemById(column.dataContext.id);
         }
       }
     });
diff --git a/aurelia-slickgrid/src/examples/slickgrid/example4.html b/aurelia-slickgrid/src/examples/slickgrid/example4.html
index 62ba94a64..53637c645 100644
--- a/aurelia-slickgrid/src/examples/slickgrid/example4.html
+++ b/aurelia-slickgrid/src/examples/slickgrid/example4.html
@@ -2,7 +2,14 @@
   <h2>${title}</h2>
   <div class="subtitle" innerhtml.bind="subTitle"></div>
 
-  <aurelia-slickgrid grid-id="grid1" dataview.bind="dataview" grid.bind="gridObj" column-definitions.bind="columnDefinitions"
-    grid-options.bind="gridOptions" dataset.bind="dataset" asg-on-grid-state-service-changed.delegate="gridStateChanged($event.detail)">
+  <aurelia-slickgrid
+    grid-id="grid1"
+    dataview.bind="dataview"
+    grid.bind="gridObj"
+    column-definitions.bind="columnDefinitions"
+    grid-options.bind="gridOptions"
+    dataset.bind="dataset"
+    asg-on-aurelia-grid-created.delegate="aureliaGridReady($event.detail)"
+    asg-on-grid-state-service-changed.delegate="gridStateChanged($event.detail)">
   </aurelia-slickgrid>
 </template>
diff --git a/aurelia-slickgrid/src/examples/slickgrid/example4.ts b/aurelia-slickgrid/src/examples/slickgrid/example4.ts
index 5db4913d9..e45d49e98 100644
--- a/aurelia-slickgrid/src/examples/slickgrid/example4.ts
+++ b/aurelia-slickgrid/src/examples/slickgrid/example4.ts
@@ -1,6 +1,6 @@
 import { autoinject } from 'aurelia-framework';
 import { CustomInputFilter } from './custom-inputFilter';
-import { Column, FieldType, FilterType, Formatter, Formatters, GridOption, GridStateService } from '../../aurelia-slickgrid';
+import { AureliaGridInstance, Column, FieldType, FilterType, Formatter, Formatters, GridOption } from '../../aurelia-slickgrid';
 
 function randomBetween(min, max) {
   return Math.floor(Math.random() * (max - min + 1) + min);
@@ -29,11 +29,12 @@ export class Example4 {
   </ul>
 `;
 
+  aureliaGrid: AureliaGridInstance;
   columnDefinitions: Column[];
   gridOptions: GridOption;
   dataset: any[];
 
-  constructor(private gridStateService: GridStateService) {
+  constructor() {
     this.defineGrid();
   }
 
@@ -46,6 +47,10 @@ export class Example4 {
     this.saveCurrentGridState();
   }
 
+  aureliaGridReady(aureliaGrid: AureliaGridInstance) {
+    this.aureliaGrid = aureliaGrid;
+  }
+
   /* Define grid Options and Columns */
   defineGrid() {
     // prepare a multiple-select array to filter with
@@ -187,6 +192,6 @@ export class Example4 {
 
   /** Save current Filters, Sorters in LocaleStorage or DB */
   saveCurrentGridState() {
-    console.log('Client sample, current Grid State:: ', this.gridStateService.getCurrentGridState());
+    console.log('Client sample, current Grid State:: ', this.aureliaGrid.gridStateService.getCurrentGridState());
   }
 }
diff --git a/aurelia-slickgrid/src/examples/slickgrid/example5.html b/aurelia-slickgrid/src/examples/slickgrid/example5.html
index 83df33974..2b1887a27 100644
--- a/aurelia-slickgrid/src/examples/slickgrid/example5.html
+++ b/aurelia-slickgrid/src/examples/slickgrid/example5.html
@@ -18,6 +18,11 @@ <h2>${title}</h2>
     </div>
   </div>
 
-  <aurelia-slickgrid grid-id="grid1" column-definitions.bind="columnDefinitions" grid-options.bind="gridOptions" dataset.bind="dataset">
+  <aurelia-slickgrid
+    grid-id="grid1"
+    column-definitions.bind="columnDefinitions"
+    grid-options.bind="gridOptions"
+    dataset.bind="dataset"
+    asg-on-aurelia-grid-created.delegate="aureliaGridReady($event.detail)">
   </aurelia-slickgrid>
 </template>
diff --git a/aurelia-slickgrid/src/examples/slickgrid/example5.ts b/aurelia-slickgrid/src/examples/slickgrid/example5.ts
index 0ce1627bd..7501d583b 100644
--- a/aurelia-slickgrid/src/examples/slickgrid/example5.ts
+++ b/aurelia-slickgrid/src/examples/slickgrid/example5.ts
@@ -1,7 +1,7 @@
 import { autoinject } from 'aurelia-framework';
 import data from './sample-data/example-data';
 import { HttpClient } from 'aurelia-http-client';
-import { Column, FieldType, FilterType, GridOdataService, GridOption, OperatorType } from '../../aurelia-slickgrid';
+import { AureliaGridInstance, Column, FieldType, FilterType, GridOdataService, GridOption, OperatorType } from '../../aurelia-slickgrid';
 
 const defaultPageSize = 20;
 const sampleDataRoot = 'src/examples/slickgrid/sample-data';
@@ -24,6 +24,7 @@ export class Example5 {
       <li>You can also preload a grid with certain "presets" like Filters / Sorters / Pagination <a href="https://github.com/ghiscoding/aurelia-slickgrid/wiki/Grid-State-&-Preset" target="_blank">Wiki - Grid Preset</a>
     </ul>
   `;
+  aureliaGrid: AureliaGridInstance;
   columnDefinitions: Column[];
   gridOptions: GridOption;
   dataset = [];
@@ -32,11 +33,15 @@ export class Example5 {
   processing = false;
   status = { text: '', class: '' };
 
-  constructor(private http: HttpClient, private odataService: GridOdataService) {
+  constructor(private http: HttpClient) {
     // define the grid options & columns and then create the grid itself
     this.defineGrid();
   }
 
+  aureliaGridReady(aureliaGrid: AureliaGridInstance) {
+    this.aureliaGrid = aureliaGrid;
+  }
+
   defineGrid() {
     this.columnDefinitions = [
       {
@@ -72,7 +77,7 @@ export class Example5 {
         totalItems: 0
       },
       backendServiceApi: {
-        service: this.odataService,
+        service: new GridOdataService(),
         preProcess: () => this.displaySpinner(true),
         process: (query) => this.getCustomerApiCall(query),
         postProcess: (response) => {
diff --git a/aurelia-slickgrid/src/examples/slickgrid/example6.html b/aurelia-slickgrid/src/examples/slickgrid/example6.html
index ebf7853af..c61dbc598 100644
--- a/aurelia-slickgrid/src/examples/slickgrid/example6.html
+++ b/aurelia-slickgrid/src/examples/slickgrid/example6.html
@@ -20,7 +20,13 @@ <h2>${title}</h2>
     </div>
   </div>
 
-  <aurelia-slickgrid grid-id="grid1" column-definitions.bind="columnDefinitions" grid-options.bind="gridOptions" dataset.bind="dataset"
-    grid-height="200" grid-width="800">
+  <aurelia-slickgrid
+    grid-id="grid1"
+    column-definitions.bind="columnDefinitions"
+    grid-options.bind="gridOptions"
+    dataset.bind="dataset"
+    grid-height="200"
+    grid-width="800"
+    asg-on-aurelia-grid-created.delegate="aureliaGridReady($event.detail)">
   </aurelia-slickgrid>
 </template>
diff --git a/aurelia-slickgrid/src/examples/slickgrid/example6.ts b/aurelia-slickgrid/src/examples/slickgrid/example6.ts
index 933800d16..40b380dbf 100644
--- a/aurelia-slickgrid/src/examples/slickgrid/example6.ts
+++ b/aurelia-slickgrid/src/examples/slickgrid/example6.ts
@@ -2,7 +2,19 @@ import { Subscription, EventAggregator } from 'aurelia-event-aggregator';
 import { autoinject } from 'aurelia-framework';
 import { I18N } from 'aurelia-i18n';
 import { HttpClient } from 'aurelia-http-client';
-import { Column, FieldType, FilterType, Formatters, GraphqlResult, GraphqlService, GraphqlServiceOption, GridOption, GridStateService, OperatorType, SortDirection } from '../../aurelia-slickgrid';
+import {
+  AureliaGridInstance,
+  Column,
+  FieldType,
+  FilterType,
+  Formatters,
+  GraphqlResult,
+  GraphqlService,
+  GraphqlServiceOption,
+  GridOption,
+  OperatorType,
+  SortDirection
+} from '../../aurelia-slickgrid';
 
 const defaultPageSize = 20;
 const GRAPHQL_QUERY_DATASET_NAME = 'users';
@@ -24,6 +36,8 @@ export class Example6 {
       <li>You can also preload a grid with certain "presets" like Filters / Sorters / Pagination <a href="https://github.com/ghiscoding/aurelia-slickgrid/wiki/Grid-State-&-Preset" target="_blank">Wiki - Grid Preset</a>
     </ul>
   `;
+
+  aureliaGrid: AureliaGridInstance;
   columnDefinitions: Column[];
   gridOptions: GridOption;
   dataset = [];
@@ -35,7 +49,7 @@ export class Example6 {
   status = { text: '', class: '' };
   Subscription: Subscription;
 
-  constructor(private ea: EventAggregator, private gridStateService: GridStateService, private http: HttpClient, private graphqlService: GraphqlService, private i18n: I18N) {
+  constructor(private ea: EventAggregator, private http: HttpClient, private i18n: I18N) {
     // define the grid options & columns and then create the grid itself
     this.defineGrid();
     this.selectedLanguage = this.i18n.getLocale();
@@ -47,6 +61,10 @@ export class Example6 {
     this.Subscription.dispose();
   }
 
+  aureliaGridReady(aureliaGrid: AureliaGridInstance) {
+    this.aureliaGrid = aureliaGrid;
+  }
+
   defineGrid() {
     this.columnDefinitions = [
       { id: 'name', field: 'name', headerKey: 'NAME', filterable: true, sortable: true, type: FieldType.string, width: 60 },
@@ -111,13 +129,16 @@ export class Example6 {
       },
 
       backendServiceApi: {
-        service: this.graphqlService,
+        service: new GraphqlService(),
         options: this.getBackendOptions(this.isWithCursor),
         // you can define the onInit callback OR enable the "executeProcessCommandOnInit" flag in the service init
         // onInit: (query) => this.getCustomerApiCall(query)
         preProcess: () => this.displaySpinner(true),
         process: (query) => this.getCustomerApiCall(query),
         postProcess: (result: GraphqlResult) => this.displaySpinner(false)
+      },
+      params: {
+        i18n: this.i18n
       }
     };
   }
@@ -173,14 +194,14 @@ export class Example6 {
 
     return new Promise((resolve, reject) => {
       setTimeout(() => {
-        this.graphqlQuery = this.graphqlService.buildQuery();
+        this.graphqlQuery = this.aureliaGrid.backendService.buildQuery();
         resolve(mockedResult);
       }, 500);
     });
   }
 
   saveCurrentGridState() {
-    console.log('GraphQL current grid state', this.gridStateService.getCurrentGridState());
+    console.log('GraphQL current grid state', this.aureliaGrid.gridStateService.getCurrentGridState());
   }
 
   switchLanguage() {
diff --git a/aurelia-slickgrid/src/examples/slickgrid/example8.html b/aurelia-slickgrid/src/examples/slickgrid/example8.html
index daf03e57f..9a634b282 100644
--- a/aurelia-slickgrid/src/examples/slickgrid/example8.html
+++ b/aurelia-slickgrid/src/examples/slickgrid/example8.html
@@ -2,7 +2,13 @@
   <h2>${title}</h2>
   <div class="subtitle" innerhtml.bind="subTitle"></div>
 
-  <aurelia-slickgrid grid-id="grid1" column-definitions.bind="columnDefinitions" dataview.bind="dataview" grid.bind="gridObj"
-    grid-options.bind="gridOptions" dataset.bind="dataset">
+  <aurelia-slickgrid
+    grid-id="grid1"
+    column-definitions.bind="columnDefinitions"
+    dataview.bind="dataview"
+    grid.bind="gridObj"
+    grid-options.bind="gridOptions"
+    dataset.bind="dataset"
+    asg-on-aurelia-grid-created.delegate="aureliaGridReady($event.detail)">
   </aurelia-slickgrid>
 </template>
diff --git a/aurelia-slickgrid/src/examples/slickgrid/example8.ts b/aurelia-slickgrid/src/examples/slickgrid/example8.ts
index bb69e6542..344fba460 100644
--- a/aurelia-slickgrid/src/examples/slickgrid/example8.ts
+++ b/aurelia-slickgrid/src/examples/slickgrid/example8.ts
@@ -1,5 +1,5 @@
 import { autoinject, bindable } from 'aurelia-framework';
-import { Column, ColumnSort, ControlAndPluginService, FieldType, Formatter, Formatters, GridOption, SortService } from '../../aurelia-slickgrid';
+import { AureliaGridInstance, Column, ColumnSort, FieldType, Formatter, Formatters, GridOption } from '../../aurelia-slickgrid';
 import * as $ from 'jquery';
 
 @autoinject()
@@ -18,12 +18,14 @@ export class Example8 {
       <li>Try hiding any columns (you use the "Column Picker" plugin by doing a right+click on the header to show the column back)</li>
     </ul>
   `;
+
+  aureliaGrid: AureliaGridInstance;
   columnDefinitions: Column[];
   gridOptions: GridOption;
   dataset = [];
   visibleColumns;
 
-  constructor(private controlService: ControlAndPluginService, private sortService: SortService) {
+  constructor() {
     // define the grid options & columns and then create the grid itself
     this.defineGrid();
   }
@@ -39,6 +41,10 @@ export class Example8 {
     this.gridObj.onSort.unsubscribe();
   }
 
+  aureliaGridReady(aureliaGrid: AureliaGridInstance) {
+    this.aureliaGrid = aureliaGrid;
+  }
+
   defineGrid() {
     this.columnDefinitions = [
       { id: 'title', name: 'Title', field: 'title' },
@@ -90,15 +96,15 @@ export class Example8 {
       headerMenu: {
         onCommand: (e, args) => {
           if (args.command === 'hide') {
-            this.controlService.hideColumn(args.column);
-            this.controlService.autoResizeColumns();
+            this.aureliaGrid.pluginService.hideColumn(args.column);
+            this.aureliaGrid.pluginService.autoResizeColumns();
           } else if (args.command === 'sort-asc' || args.command === 'sort-desc') {
             // get previously sorted columns
-            const cols: ColumnSort[] = this.sortService.getPreviousColumnSorts(args.column.id + '');
+            const cols: ColumnSort[] = this.aureliaGrid.sortService.getPreviousColumnSorts(args.column.id + '');
 
             // add to the column array, the column sorted by the header menu
             cols.push({ sortCol: args.column, sortAsc: (args.command === 'sort-asc') });
-            this.sortService.onLocalSortChanged(this.gridObj, this.dataview, cols);
+            this.aureliaGrid.sortService.onLocalSortChanged(this.gridObj, this.dataview, cols);
 
             // update the this.gridObj sortColumns array which will at the same add the visual sort icon(s) on the UI
             const newSortColumns: ColumnSort[] = cols.map((col) => {
diff --git a/aurelia-slickgrid/src/examples/slickgrid/example9.html b/aurelia-slickgrid/src/examples/slickgrid/example9.html
index c0ba9f505..6177e9543 100644
--- a/aurelia-slickgrid/src/examples/slickgrid/example9.html
+++ b/aurelia-slickgrid/src/examples/slickgrid/example9.html
@@ -2,7 +2,13 @@
   <h2>${title}</h2>
   <div class="subtitle" innerhtml.bind="subTitle"></div>
 
-  <aurelia-slickgrid grid-id="grid1" column-definitions.bind="columnDefinitions" dataview.bind="dataviewObj" grid.bind="gridObj"
-    grid-options.bind="gridOptions" dataset.bind="dataset">
+  <aurelia-slickgrid
+    grid-id="grid1"
+    column-definitions.bind="columnDefinitions"
+    dataview.bind="dataviewObj"
+    grid.bind="gridObj"
+    grid-options.bind="gridOptions"
+    dataset.bind="dataset"
+    asg-on-aurelia-grid-created.delegate="aureliaGridReady($event.detail)">
   </aurelia-slickgrid>
-</template>
\ No newline at end of file
+</template>
diff --git a/aurelia-slickgrid/src/examples/slickgrid/example9.ts b/aurelia-slickgrid/src/examples/slickgrid/example9.ts
index 477bd2308..6ccaffc2c 100644
--- a/aurelia-slickgrid/src/examples/slickgrid/example9.ts
+++ b/aurelia-slickgrid/src/examples/slickgrid/example9.ts
@@ -1,5 +1,5 @@
 import { autoinject, bindable } from 'aurelia-framework';
-import { Column, FieldType, FilterType, FilterService, Formatter, Formatters, GridOption, SortService } from '../../aurelia-slickgrid';
+import { AureliaGridInstance, Column, FieldType, FilterType, Formatter, Formatters, GridOption } from '../../aurelia-slickgrid';
 
 @autoinject()
 export class Example9 {
@@ -17,12 +17,14 @@ export class Example9 {
       <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>
     </ul>
   `;
+
+  aureliaGrid: AureliaGridInstance;
   columnDefinitions: Column[];
   gridOptions: GridOption;
   dataset = [];
   visibleColumns;
 
-  constructor(private filterService: FilterService, private sortService: SortService) {
+  constructor() {
     // define the grid options & columns and then create the grid itself
     this.defineGrid();
   }
@@ -32,6 +34,10 @@ export class Example9 {
     this.getData();
   }
 
+  aureliaGridReady(aureliaGrid: AureliaGridInstance) {
+    this.aureliaGrid = aureliaGrid;
+  }
+
   defineGrid() {
     this.columnDefinitions = [
       { id: 'title', name: 'Title', field: 'title', filterable: true, type: FieldType.string },
@@ -130,10 +136,10 @@ export class Example9 {
           } else if (args.command === 'toggle-toppanel') {
             this.gridObj.setTopPanelVisibility(!this.gridObj.getOptions().showTopPanel);
           } else if (args.command === 'clear-filter') {
-            this.filterService.clearFilters();
+            this.aureliaGrid.filterService.clearFilters();
             this.dataviewObj.refresh();
           } else if (args.command === 'clear-sorting') {
-            this.sortService.clearSorting();
+            this.aureliaGrid.sortService.clearSorting();
             this.dataviewObj.refresh();
           } else {
             alert('Command: ' + args.command);