refactor(postRender): cleanup code & fix RowDetailExtension

Author: Ghislain Beaulac

src/app/app-routing.module.ts

@@ -1,25 +1,25 @@
+import { HomeComponent } from './examples/home.component';
 import { GridAddItemComponent } from './examples/grid-additem.component';
-import { GridMenuComponent } from './examples/grid-menu.component';
+import { GridAngularComponent } from './examples/grid-angular.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';
 import { GridGroupingComponent } from './examples/grid-grouping.component';
 import { GridHeaderButtonComponent } from './examples/grid-headerbutton.component';
 import { GridHeaderMenuComponent } from './examples/grid-headermenu.component';
 import { GridLocalizationComponent } from './examples/grid-localization.component';
+import { GridMenuComponent } from './examples/grid-menu.component';
 import { GridOdataComponent } from './examples/grid-odata.component';
-import { GridGraphqlComponent } from './examples/grid-graphql.component';
 import { GridRemoteComponent } from './examples/grid-remote.component';
 import { GridRowDetailComponent } from './examples/grid-rowdetail.component';
 import { GridRowMoveComponent } from './examples/grid-rowmove.component';
 import { GridRowSelectionComponent } from './examples/grid-rowselection.component';
 import { GridStateComponent } from './examples/grid-state.component';
-import { HomeComponent } from './examples/home.component';
 import { SwtCommonGridTestComponent } from './examples/swt-common-grid-test.component';
 
 import { NgModule } from '@angular/core';
@@ -28,11 +28,11 @@ import { TranslateModule } from '@ngx-translate/core';
 
 const routes: Routes = [
   { path: 'home', component: HomeComponent },
+  { path: 'angular-components', component: GridAngularComponent },
   { path: 'additem', component: GridAddItemComponent },
   { path: 'basic', component: GridBasicComponent },
   { path: 'colspan', component: GridColspanComponent },
   { path: 'editor', component: GridEditorComponent },
-  { path: 'editor-angular', component: GridEditorAngularComponent },
   { path: 'formatter', component: GridFormatterComponent },
   { path: 'frozen', component: GridFrozenComponent },
   { path: 'headerbutton', component: GridHeaderButtonComponent },

src/app/app.component.html

@@ -92,7 +92,7 @@
                 <a [routerLink]="['/rowdetail']">21- Row Detail View</a>
             </li>
             <li routerLinkActive="active">
-                <a [routerLink]="['/editor-angular']">22- Editors Angular Components</a>
+                <a [routerLink]="['/angular-components']">22- Editors Angular Components</a>
             </li>
         </ul>
     </div>

src/app/app.module.ts

@@ -17,7 +17,7 @@ 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 { GridAngularComponent } from './examples/grid-angular.component';
 import { GridFormatterComponent } from './examples/grid-formatter.component';
 import { GridFrozenComponent } from './examples/grid-frozen.component';
 import { GridGraphqlComponent } from './examples/grid-graphql.component';
@@ -75,12 +75,12 @@ export function appInitializerFactory(translate: TranslateService, injector: Inj
     CustomTitleFormatterComponent,
     EditorNgSelectComponent,
     GridAddItemComponent,
+    GridAngularComponent,
     GridBasicComponent,
     GridClientSideComponent,
     GridColspanComponent,
     GridDraggableGroupingComponent,
     GridEditorComponent,
-    GridEditorAngularComponent,
     GridFormatterComponent,
     GridFrozenComponent,
     GridGraphqlComponent,

src/app/examples/custom-angularComponentEditor.ts

@@ -5,6 +5,7 @@ import {
   Editor,
   EditorValidator,
   EditorValidatorOutput,
+  GridOption,
 } from './../modules/angular-slickgrid';
 
 /*
@@ -21,13 +22,21 @@ export class CustomAngularComponentEditor implements Editor {
   /** default item object */
   defaultItem: any;
 
+  /** SlickGrid grid object */
+  grid: any;
+
   constructor(private args: any) {
+    this.grid = args && args.grid;
     this.init();
   }
 
-  /** Angular Util Service */
+  /** Angular Util Service (could be inside the Grid Options Params or the Editor Params ) */
   get angularUtilService(): AngularUtilService {
-    return this.columnDef && this.columnDef && this.columnDef.internalColumnEditor && this.columnDef.internalColumnEditor.params.angularUtilService;
+    let angularUtilService = this.gridOptions && this.gridOptions.params && this.gridOptions.params.angularUtilService;
+    if (!angularUtilService || !(angularUtilService instanceof AngularUtilService)) {
+      angularUtilService = this.columnEditor && this.columnEditor.params && this.columnEditor.params.angularUtilService;
+    }
+    return angularUtilService;
   }
 
   /** Get the Collection */
@@ -45,8 +54,13 @@ export class CustomAngularComponentEditor implements Editor {
     return this.columnDef && this.columnDef.internalColumnEditor || {};
   }
 
+  /** Getter for the Grid Options pulled through the Grid Object */
+  get gridOptions(): GridOption {
+    return (this.grid && this.grid.getOptions) ? this.grid.getOptions() : {};
+  }
+
   get hasAutoCommitEdit() {
-    return this.args.grid.getOptions().autoCommitEdit;
+    return this.gridOptions.autoCommitEdit;
   }
 
   /** Get the Validator function, can be passed in Editor property or Column Definition */
@@ -55,13 +69,14 @@ export class CustomAngularComponentEditor implements Editor {
   }
 
   init() {
-    if (!this.columnEditor || !this.columnEditor.params.component || !(this.columnEditor.params.angularUtilService instanceof AngularUtilService)) {
+    if (!this.columnEditor || !this.columnEditor.params.component || !(this.angularUtilService instanceof AngularUtilService)) {
       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: { model: Editors.angularComponent, collection: [...] }, params: { component: MyComponent, angularUtilService: this.angularUtilService }`);
+      You also need to provide the "AngularUtilService" via the Editor Params OR the Grid Options Params
+      Example: this.columnDefs = [{ id: 'title', field: 'title', editor: { model: CustomAngularComponentEditor, collection: [...] }, params: { component: MyComponent, angularUtilService: this.angularUtilService }];
+      OR this.columnDefs = [{ id: 'title', field: 'title', editor: { model: CustomAngularComponentEditor, collection: [...] }]; this.gridOptions = { params: { angularUtilService: this.angularUtilService }}`);
     }
     if (this.columnEditor && this.columnEditor.params.component) {
-      const angularUtilService = this.columnEditor.params.angularUtilService as AngularUtilService;
-      const componentOutput = angularUtilService.createAngularComponentAppendToDom(this.columnEditor.params.component, this.args.container);
+      const componentOutput = this.angularUtilService.createAngularComponentAppendToDom(this.columnEditor.params.component, this.args.container);
       this.componentRef = componentOutput && componentOutput.componentRef;
       Object.assign(this.componentRef.instance, { collection: this.collection });
 

src/app/examples/grid-editor-angular.component.html renamed to src/app/examples/grid-angular.component.html

@@ -23,17 +23,20 @@ declare var $: any;
 const NB_ITEMS = 100;
 
 @Component({
-  templateUrl: './grid-editor-angular.component.html'
+  templateUrl: './grid-angular.component.html'
 })
 @Injectable()
-export class GridEditorAngularComponent implements OnInit {
-  title = 'Example 22: Editors with Angular Components';
+export class GridAngularComponent implements OnInit {
+  title = 'Example 22: Multiple Angular Components';
   subTitle = `
-  Grid with Inline Editors and onCellClick actions (<a href="https://github.com/ghiscoding/Angular-Slickgrid/wiki/Editors" target="_blank">Uncyclo docs</a>).
+  Grid with usage of Angular Components as Editor &amp; AsyncPostRender (similar to Formatter).
   <ul>
-    <li>Support of Angular Component as Custom Editor (click on "Assignee" column)</li>
-    <li>The column "Assignee" shown below uses <a href="https://github.com/ng-select/ng-select" target="_blank">ng-select</a> as a custom editor with Angular Component
-    <li>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</li>
+    <li>Support of Angular Component as Custom Editor (click on any "Assignee" name cell)</li>
+    <ul>
+      <li>That column uses <a href="https://github.com/ng-select/ng-select" target="_blank">ng-select</a> as a custom editor as an Angular Component
+      <li>Increased Grid Options "rowHeight" to 45 so that the "ng-select" fits in the cell. Ideally it would be better to override the ng-select css styling to change it's max height</li>
+    </ul>
+    <li>The 2nd "Assignee" column (showing in bold text) uses "asyncPostRender" with an Angular Component</li>
   </ul>
   `;
 
@@ -98,7 +101,6 @@ export class GridEditorAngularComponent implements OnInit {
           model: CustomAngularComponentEditor,
           collection: this.assignees,
           params: {
-            angularUtilService: this.angularUtilService,
             component: EditorNgSelectComponent,
           }
         },
@@ -127,20 +129,6 @@ export class GridEditorAngularComponent implements OnInit {
           angularUtilService: this.angularUtilService,
         },
         exportWithFormatter: true,
-      }, {
-        id: 'duration',
-        name: 'Duration (days)',
-        field: 'duration',
-        minWidth: 100,
-        filterable: true,
-        sortable: true,
-        type: FieldType.number,
-        filter: { model: Filters.slider, params: { hideSliderNumber: false } },
-        editor: {
-          model: Editors.slider,
-          minValue: 0,
-          maxValue: 100,
-        }
       }, {
         id: 'complete',
         name: '% Complete',
@@ -229,7 +217,10 @@ export class GridEditorAngularComponent implements OnInit {
         this._commandQueue.push(editCommand);
         editCommand.execute();
       },
-      i18n: this.translate
+      i18n: this.translate,
+      params: {
+        angularUtilService: this.angularUtilService // provide the service to all at once (Editor, Filter, AsyncPostRender)
+      }
     };
 
     this.dataset = this.mockData(NB_ITEMS);
@@ -313,8 +304,8 @@ export class GridEditorAngularComponent implements OnInit {
       const componentOutput = this.angularUtilService.createAngularComponent(colDef.params.component);
       Object.assign(componentOutput.componentRef.instance, { item: dataContext });
 
-      // use a delay to make sure Angular ran at least a cycle and it finished rendering the Component
-      setTimeout(() => $(cellNode).empty().html($(componentOutput.domElement).html()));
+      // use a delay to make sure Angular ran at least a full cycle and it finished rendering the Component
+      setTimeout(() => $(cellNode).empty().html(componentOutput.domElement));
     }
   }
 }

src/app/examples/grid-editor-angular.component.ts renamed to src/app/examples/grid-angular.component.ts

@@ -324,12 +324,14 @@ export class RowDetailViewExtension implements Extension {
   private renderViewModel(item: any) {
     const containerElements = document.getElementsByClassName(`${ROW_DETAIL_CONTAINER_PREFIX}${item.id}`);
     if (containerElements && containerElements.length) {
-      const compRef = this.angularUtilService.createAngularComponentAppendToDom(this._viewComponent, containerElements[0]);
-      Object.assign(compRef.instance, { model: item });
+      const componentOutput = this.angularUtilService.createAngularComponentAppendToDom(this._viewComponent, containerElements[0]);
+      if (componentOutput && componentOutput.componentRef && componentOutput.componentRef.instance) {
+        Object.assign(componentOutput.componentRef.instance, { model: item });
 
-      const viewObj = this._views.find((obj) => obj.id === item.id);
-      if (viewObj) {
-        viewObj.componentRef = compRef;
+        const viewObj = this._views.find((obj) => obj.id === item.id);
+        if (viewObj) {
+          viewObj.componentRef = componentOutput.componentRef;
+        }
       }
     }
   }