diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index ed0a8a47a..1335896b9 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -4,16 +4,19 @@ import { FormsModule } from '@angular/forms';
import { HttpClient, HttpClientModule } from '@angular/common/http';
import { Injector, APP_INITIALIZER, NgModule } from '@angular/core';
import { LOCATION_INITIALIZED } from '@angular/common';
+import { NgSelectModule } from '@ng-select/ng-select';
import { TranslateModule, TranslateLoader, TranslateService } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { AppComponent } from './app.component';
+import { EditorNgSelectComponent } from './examples/editor-ng-select.component';
import { GridAddItemComponent } from './examples/grid-additem.component';
import { GridBasicComponent } from './examples/grid-basic.component';
import { GridClientSideComponent } from './examples/grid-clientside.component';
import { GridColspanComponent } from './examples/grid-colspan.component';
import { GridDraggableGroupingComponent } from './examples/grid-draggrouping.component';
import { GridEditorComponent } from './examples/grid-editor.component';
+import { GridEditorAngularComponent } from './examples/grid-editor-angular.component';
import { GridFormatterComponent } from './examples/grid-formatter.component';
import { GridFrozenComponent } from './examples/grid-frozen.component';
import { GridGraphqlComponent } from './examples/grid-graphql.component';
@@ -68,12 +71,14 @@ export function appInitializerFactory(translate: TranslateService, injector: Inj
@NgModule({
declarations: [
AppComponent,
+ EditorNgSelectComponent,
GridAddItemComponent,
GridBasicComponent,
GridClientSideComponent,
GridColspanComponent,
GridDraggableGroupingComponent,
GridEditorComponent,
+ GridEditorAngularComponent,
GridFormatterComponent,
GridFrozenComponent,
GridGraphqlComponent,
@@ -100,6 +105,7 @@ export function appInitializerFactory(translate: TranslateService, injector: Inj
BrowserModule,
FormsModule,
HttpClientModule,
+ NgSelectModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
@@ -119,6 +125,7 @@ export function appInitializerFactory(translate: TranslateService, injector: Inj
],
entryComponents: [
// dynamically created components
+ EditorNgSelectComponent,
RowDetailPreloadComponent,
RowDetailViewComponent,
],
diff --git a/src/app/examples/custom-angularComponentEditor.ts b/src/app/examples/custom-angularComponentEditor.ts
new file mode 100644
index 000000000..5bb683b47
--- /dev/null
+++ b/src/app/examples/custom-angularComponentEditor.ts
@@ -0,0 +1,157 @@
+import { ComponentRef } from '@angular/core';
+import {
+ AngularUtilService,
+ Column,
+ Editor,
+ EditorValidator,
+ EditorValidatorOutput,
+} from './../modules/angular-slickgrid';
+
+/*
+ * An example of a 'detached' editor.
+ * KeyDown events are also handled to provide handling for Tab, Shift-Tab, Esc and Ctrl-Enter.
+ */
+export class CustomAngularComponentEditor implements Editor {
+ /** Angular Component Reference */
+ componentRef: ComponentRef;
+
+ /** default item Id */
+ defaultId: string;
+
+ /** default item object */
+ defaultItem: any;
+
+ constructor(private args: any) {
+ this.init();
+ }
+
+ /** Angular Util Service */
+ get angularUtilService(): AngularUtilService {
+ return this.columnDef && this.columnDef && this.columnDef.internalColumnEditor && this.columnDef.internalColumnEditor.params.angularUtilService;
+ }
+
+ /** Get the Collection */
+ get collection(): any[] {
+ return this.columnDef && this.columnDef && this.columnDef.internalColumnEditor.collection || [];
+ }
+
+ /** Get Column Definition object */
+ get columnDef(): Column {
+ return this.args && this.args.column || {};
+ }
+
+ /** Get Column Editor object */
+ get columnEditor(): any {
+ return this.columnDef && this.columnDef.internalColumnEditor || {};
+ }
+
+ get hasAutoCommitEdit() {
+ return this.args.grid.getOptions().autoCommitEdit;
+ }
+
+ /** Get the Validator function, can be passed in Editor property or Column Definition */
+ get validator(): EditorValidator {
+ return this.columnEditor.validator || this.columnDef.validator;
+ }
+
+ init() {
+ if (!this.columnEditor || !this.columnEditor.params.component) {
+ throw new Error(`[Angular-Slickgrid] For the Editors.angularComponent to work properly, you need to provide your component to the "component" property and make sure to add it to your "entryComponents" array.
+ Example: this.columnDefs = [{ id: 'title', field: 'title', editor: { component: MyComponent, model: Editors.angularComponent, collection: [...] },`);
+ }
+ if (this.columnEditor && this.columnEditor.params.component) {
+ this.componentRef = this.columnEditor.params.angularUtilService.createAngularComponentAppendToDom(this.columnEditor.params.component, this.args.container);
+ Object.assign(this.componentRef.instance, { collection: this.collection });
+
+ this.componentRef.instance.onModelChanged.subscribe((item) => {
+ this.save();
+ });
+ }
+ }
+
+ save() {
+ const validation = this.validate();
+ if (validation && validation.valid) {
+ if (this.hasAutoCommitEdit) {
+ this.args.grid.getEditorLock().commitCurrentEdit();
+ } else {
+ this.args.commitChanges();
+ }
+ }
+ }
+
+ cancel() {
+ this.componentRef.instance.selectedId = this.defaultId;
+ this.componentRef.instance.selectedItem = this.defaultItem;
+ if (this.args && this.args.cancelChanges) {
+ this.args.cancelChanges();
+ }
+ }
+
+ hide() {
+ // optional, implement a hide method on your Angular Component
+ if (this.componentRef && this.componentRef.instance && typeof this.componentRef.instance.hide === 'function') {
+ this.componentRef.instance.hide();
+ }
+ }
+
+ show() {
+ // optional, implement a show method on your Angular Component
+ if (this.componentRef && this.componentRef.instance && typeof this.componentRef.instance.show === 'function') {
+ this.componentRef.instance.show();
+ }
+ }
+
+ destroy() {
+ // destroy the Angular Component
+ if (this.componentRef && this.componentRef.destroy) {
+ this.componentRef.destroy();
+ }
+ }
+
+ focus() {
+ // optional, implement a focus method on your Angular Component
+ if (this.componentRef && this.componentRef.instance && typeof this.componentRef.instance.focus === 'function') {
+ this.componentRef.instance.focus();
+ }
+ }
+
+ applyValue(item: any, state: any) {
+ item[this.columnDef.field] = state;
+ }
+
+ getValue() {
+ return this.componentRef.instance.selectedId;
+ }
+
+ loadValue(item: any) {
+ const itemObject = item && item[this.columnDef.field];
+ this.componentRef.instance.selectedId = itemObject && itemObject.id || '';
+ this.componentRef.instance.selectedItem = itemObject && itemObject;
+ }
+
+ serializeValue(): any {
+ return this.componentRef.instance.selectedItem;
+ }
+
+ isValueChanged() {
+ return (!(this.componentRef.instance.selectedId === '' && this.defaultId == null)) && (this.componentRef.instance.selectedId !== this.defaultId);
+ }
+
+ validate(): EditorValidatorOutput {
+ if (this.validator) {
+ const value = this.componentRef.instance.selectedId;
+ const validationResults = this.validator(value, this.args);
+ if (!validationResults.valid) {
+ return validationResults;
+ }
+ }
+
+ // by default the editor is always valid
+ // if user want it to be required, he would have to provide his own validator
+ return {
+ valid: true,
+ msg: null
+ };
+ }
+}
diff --git a/src/app/examples/editor-ng-select.component.ts b/src/app/examples/editor-ng-select.component.ts
new file mode 100644
index 000000000..ceb99c357
--- /dev/null
+++ b/src/app/examples/editor-ng-select.component.ts
@@ -0,0 +1,34 @@
+import { Component } from '@angular/core';
+import { Subject } from 'rxjs';
+
+@Component({
+ template: `
+
+
+ {{ item?.name }}
+
+ `
+})
+export class EditorNgSelectComponent {
+ selectedId: string;
+ selectedItem: any;
+ collection; // this will be filled by the collection of your column definition
+ onModelChanged = new Subject(); // object
+
+ onChange(item: any) {
+ this.selectedItem = item;
+ this.onModelChanged.next(item);
+ }
+
+ focus() {
+ // do a focus
+ }
+}
diff --git a/src/app/examples/grid-editor-angular.component.html b/src/app/examples/grid-editor-angular.component.html
new file mode 100644
index 000000000..c1a858906
--- /dev/null
+++ b/src/app/examples/grid-editor-angular.component.html
@@ -0,0 +1,49 @@
+
+
{{title}}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Updated Item: {{updatedObject | json}}
+
+
+ Updated Item: {{alertWarning}}
+
+
+
+
+
+
+
+
diff --git a/src/app/examples/grid-editor-angular.component.ts b/src/app/examples/grid-editor-angular.component.ts
new file mode 100644
index 000000000..b4f414470
--- /dev/null
+++ b/src/app/examples/grid-editor-angular.component.ts
@@ -0,0 +1,286 @@
+import { Component, Injectable, OnInit } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { TranslateService } from '@ngx-translate/core';
+import {
+ AngularGridInstance,
+ AngularUtilService,
+ Column,
+ Editors,
+ FieldType,
+ Filters,
+ Formatters,
+ GridOption,
+ OnEventArgs,
+ OperatorType,
+} from './../modules/angular-slickgrid';
+import { EditorNgSelectComponent } from './editor-ng-select.component';
+import { CustomAngularComponentEditor } from './custom-angularComponentEditor';
+
+// using external non-typed js libraries
+declare var Slick: any;
+
+const NB_ITEMS = 100;
+
+@Component({
+ templateUrl: './grid-editor-angular.component.html'
+})
+@Injectable()
+export class GridEditorAngularComponent implements OnInit {
+ title = 'Example 22: Editors with Angular Components';
+ subTitle = `
+ Grid with Inline Editors and onCellClick actions (Wiki docs).
+
+
Support of Angular Component as Custom Editor (click on "Assignee" column)
+
The column "Assignee" shown below uses ng-select as a custom editor with Angular Component
+
Increased rowHeight to 45 so that the "ng-select" fits in the cell. Ideally it would be better to override the ng-select component styling to change it's max height