feat(PostRender): use postRender to render an Angular Component

- this feature kinda simulate a Formatter with an Angular Component but has some slight delay in rendering the content, that is because Angular requires at least 1 cycle to render it's own component and cannot output a string right (which SlickGrid Formatter requires to work).

Author: Ghislain Beaulac

src/app/app.module.ts

@@ -9,6 +9,7 @@ import { TranslateModule, TranslateLoader, TranslateService } from '@ngx-transla
 import { TranslateHttpLoader } from '@ngx-translate/http-loader';
 
 import { AppComponent } from './app.component';
+import { CustomTitleFormatterComponent } from './examples/custom-titleFormatter.component';
 import { EditorNgSelectComponent } from './examples/editor-ng-select.component';
 import { GridAddItemComponent } from './examples/grid-additem.component';
 import { GridBasicComponent } from './examples/grid-basic.component';
@@ -71,6 +72,7 @@ export function appInitializerFactory(translate: TranslateService, injector: Inj
 @NgModule({
   declarations: [
     AppComponent,
+    CustomTitleFormatterComponent,
     EditorNgSelectComponent,
     GridAddItemComponent,
     GridBasicComponent,
@@ -125,6 +127,7 @@ export function appInitializerFactory(translate: TranslateService, injector: Inj
   ],
   entryComponents: [
     // dynamically created components
+    CustomTitleFormatterComponent,
     EditorNgSelectComponent,
     RowDetailPreloadComponent,
     RowDetailViewComponent,

src/app/examples/custom-angularComponentEditor.ts

@@ -55,12 +55,14 @@ export class CustomAngularComponentEditor implements Editor {
   }
 
   init() {
-    if (!this.columnEditor || !this.columnEditor.params.component) {
+    if (!this.columnEditor || !this.columnEditor.params.component || !(this.columnEditor.params.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: { component: MyComponent, model: Editors.angularComponent, collection: [...] },`);
+      Example: this.columnDefs = [{ id: 'title', field: 'title', editor: { model: Editors.angularComponent, collection: [...] }, params: { component: MyComponent, angularUtilService: this.angularUtilService }`);
     }
     if (this.columnEditor && this.columnEditor.params.component) {
-      this.componentRef = this.columnEditor.params.angularUtilService.createAngularComponentAppendToDom(this.columnEditor.params.component, this.args.container);
+      const angularUtilService = this.columnEditor.params.angularUtilService as AngularUtilService;
+      const componentOutput = angularUtilService.createAngularComponentAppendToDom(this.columnEditor.params.component, this.args.container);
+      this.componentRef = componentOutput && componentOutput.componentRef;
       Object.assign(this.componentRef.instance, { collection: this.collection });
 
       this.componentRef.instance.onModelChanged.subscribe((item) => {

src/app/examples/custom-titleFormatter.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  template: `<b>{{item?.assignee?.name}}</b>`
+})
+export class CustomTitleFormatterComponent {
+  item: any;
+}

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

@@ -1,5 +1,4 @@
-import { Component, Injectable, OnInit } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
+import { Component, Injectable, OnInit, EmbeddedViewRef } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
 import {
   AngularGridInstance,
@@ -15,9 +14,11 @@ import {
 } from './../modules/angular-slickgrid';
 import { EditorNgSelectComponent } from './editor-ng-select.component';
 import { CustomAngularComponentEditor } from './custom-angularComponentEditor';
+import { CustomTitleFormatterComponent } from './custom-titleFormatter.component';
 
 // using external non-typed js libraries
 declare var Slick: any;
+declare var $: any;
 
 const NB_ITEMS = 100;
 
@@ -52,7 +53,7 @@ export class GridEditorAngularComponent implements OnInit {
     { id: '3', name: 'Paul' },
   ];
 
-  constructor(private angularUtilService: AngularUtilService, private http: HttpClient, private translate: TranslateService) {}
+  constructor(private angularUtilService: AngularUtilService, private translate: TranslateService) {}
 
   ngOnInit(): void {
     this.prepareGrid();
@@ -90,7 +91,7 @@ export class GridEditorAngularComponent implements OnInit {
         type: FieldType.string,
         formatter: Formatters.complexObject,
         params: {
-          complexField: 'assignee.name'
+          complexField: 'assignee.name',
         },
         exportWithFormatter: true,
         editor: {
@@ -105,6 +106,27 @@ export class GridEditorAngularComponent implements OnInit {
           console.log(args);
           this.alertWarning = `Updated Title: ${args.dataContext.title}`;
         }
+      }, {
+        id: 'assignee2',
+        name: 'Assignee with Angular Component',
+        field: 'assignee',
+        minWidth: 100,
+        filterable: true,
+        sortable: true,
+        type: FieldType.string,
+
+        // loading formatter, text to display while Post Render gets processed
+        formatter: () => '...',
+
+        // to load an Angular Component, you cannot use a Formatter since Angular needs at least 1 cycle to render everything
+        // you can use a PostRenderer but you will visually see the data appearing,
+        // which is why it's still better to use regular Formatter (with jQuery if need be) instead of Angular Component
+        asyncPostRender: this.renderAngularComponent.bind(this),
+        params: {
+          component: CustomTitleFormatterComponent,
+          angularUtilService: this.angularUtilService,
+        },
+        exportWithFormatter: true,
       }, {
         id: 'duration',
         name: 'Duration (days)',
@@ -201,6 +223,8 @@ export class GridEditorAngularComponent implements OnInit {
       enableColumnPicker: true,
       enableExcelCopyBuffer: true,
       enableFiltering: true,
+      enableAsyncPostRender: true, // for the Angular PostRenderer, don't forget to enable it
+      asyncPostRenderDelay: 0,    // also make sure to remove any delay to render it
       editCommandHandler: (item, column, editCommand) => {
         this._commandQueue.push(editCommand);
         editCommand.execute();
@@ -283,4 +307,14 @@ export class GridEditorAngularComponent implements OnInit {
       this.gridObj.gotoCell(command.row, command.cell, false);
     }
   }
+
+  renderAngularComponent(cellNode: HTMLElement, row: number, dataContext: any, colDef: Column) {
+    if (colDef.params.component) {
+      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()));
+    }
+  }
 }

src/app/modules/angular-slickgrid/models/angularComponentOutput.interface.ts

@@ -0,0 +1,6 @@
+import { ComponentRef } from '@angular/core';
+
+export interface AngularComponentOutput {
+  componentRef: ComponentRef<any>;
+  domElement: HTMLElement;
+}

src/app/modules/angular-slickgrid/models/index.ts

@@ -1,4 +1,5 @@
 export * from './aggregator.interface';
+export * from './angularComponentOutput.interface';
 export * from './angularGridInstance.interface';
 export * from './autoResizeOption.interface';
 export * from './backendService.interface';

src/app/modules/angular-slickgrid/services/angularUtilService.ts

@@ -1,3 +1,4 @@
+import { AngularComponentOutput } from './../models/angularComponentOutput.interface';
 import { ApplicationRef, ComponentFactoryResolver, ComponentRef, EmbeddedViewRef, Injectable, Injector } from '@angular/core';
 
 @Injectable()
@@ -9,7 +10,7 @@ export class AngularUtilService {
   ) { }
 
   // ref https://hackernoon.com/angular-pro-tip-how-to-dynamically-create-components-in-body-ba200cc289e6
-  createAngularComponentAppendToDom(component: any, targetElement?: HTMLElement | Element): ComponentRef<any> {
+  createAngularComponent(component: any): AngularComponentOutput {
     // Create a component reference from the component
     const componentRef = this.compFactoryResolver
       .resolveComponentFactory(component)
@@ -19,16 +20,26 @@ export class AngularUtilService {
     this.appRef.attachView(componentRef.hostView);
 
     // Get DOM element from component
-    const domElem = (componentRef.hostView as EmbeddedViewRef<any>)
-      .rootNodes[0] as HTMLElement;
+    let domElem;
+    const viewRef = (componentRef.hostView as EmbeddedViewRef<any>);
+    if (viewRef && Array.isArray(viewRef.rootNodes) && viewRef.rootNodes[0]) {
+      domElem = viewRef.rootNodes[0] as HTMLElement;
+    }
+
+    return { componentRef, domElement: domElem };
+  }
+
+  // ref https://hackernoon.com/angular-pro-tip-how-to-dynamically-create-components-in-body-ba200cc289e6
+  createAngularComponentAppendToDom(component: any, targetElement?: HTMLElement | Element): AngularComponentOutput {
+    const componentOutput = this.createAngularComponent(component);
 
     // Append DOM element to the HTML element specified
     if (targetElement && targetElement.appendChild) {
-      targetElement.appendChild(domElem);
+      targetElement.appendChild(componentOutput.domElement);
     } else {
-      document.body.appendChild(domElem); // when no target provided, we'll simply add it to the HTML Body
+      document.body.appendChild(componentOutput.domElement); // when no target provided, we'll simply add it to the HTML Body
     }
 
-    return componentRef;
+    return componentOutput;
   }
 }