feat(core): Add template-ref support

Author: shanmukhateja

src/angular-datatables.directive.ts

@@ -5,9 +5,9 @@
  * found in the LICENSE file at https://raw.githubusercontent.com/l-lin/angular-datatables/master/LICENSE
  */
 
-import { Directive, ElementRef, Input, OnDestroy, OnInit } from '@angular/core';
+import { Directive, ElementRef, Input, OnDestroy, OnInit, Renderer2, ViewContainerRef } from '@angular/core';
 import { Subject } from 'rxjs';
-import { ADTSettings } from './models/settings';
+import { ADTSettings, ADTTemplateRefContext } from './models/settings';
 
 @Directive({
   selector: '[datatable]'
@@ -37,7 +37,11 @@ export class DataTableDirective implements OnDestroy, OnInit {
   // Only used for destroying the table when destroying this directive
   private dt: DataTables.Api;
 
-  constructor(private el: ElementRef) { }
+  constructor(
+    private el: ElementRef,
+    private vcr: ViewContainerRef,
+    private renderer: Renderer2
+  ) { }
 
   ngOnInit(): void {
     if (this.dtTrigger) {
@@ -59,6 +63,7 @@ export class DataTableDirective implements OnDestroy, OnInit {
   }
 
   private displayTable(): void {
+    const self = this;
     this.dtInstance = new Promise((resolve, reject) => {
       Promise.resolve(this.dtOptions).then(dtOptions => {
         // Using setTimeout as a "hack" to be "part" of NgZone
@@ -69,7 +74,7 @@ export class DataTableDirective implements OnDestroy, OnInit {
               if (dtOptions.columns) {
                 const columns = dtOptions.columns;
                 // Filter columns with pipe declared
-                const colsWithPipe = columns.filter(x => x.ngPipeInstance);
+                const colsWithPipe = columns.filter(x => x.ngPipeInstance && !x.ngTemplateRef);
                 // Iterate
                 colsWithPipe.forEach(el => {
                   const pipe = el.ngPipeInstance;
@@ -83,6 +88,22 @@ export class DataTableDirective implements OnDestroy, OnInit {
                   // Apply transformed string to <td>
                   $(rowFromCol).text(rowValAfter);
                 });
+
+                // Filter columns using `ngTemplateRef`
+                const colsWithTemplate = columns.filter(x => x.ngTemplateRef && !x.ngPipeInstance);
+                colsWithTemplate.forEach(el => {
+                  const { ref, context } = el.ngTemplateRef;
+                  // get <td> element which holds data using index
+                  const index = columns.findIndex(e => e.data == el.data);
+                  const cellFromIndex = row.childNodes.item(index);
+                  // render onto DOM
+                  // finalize context to be sent to user
+                  const _context = Object.assign({}, context, context?.userData, {
+                    adtData: data
+                  });
+                  const instance = self.vcr.createEmbeddedView(ref, _context);
+                  self.renderer.appendChild(cellFromIndex, instance.rootNodes[0]);
+                });
               }
 
               // run user specified row callback if provided.

src/models/settings.ts

@@ -1,9 +1,23 @@
-import { PipeTransform } from '@angular/core';
+import { PipeTransform, TemplateRef } from '@angular/core';
 
 export interface ADTSettings extends DataTables.Settings {
   columns?: ADTColumns[];
 }
 export interface ADTColumns extends DataTables.ColumnSettings {
   /** Set instance of Angular pipe to transform the data of particular column */
   ngPipeInstance?: PipeTransform;
+  /** Set `TemplateRef` to transform the data of this column */
+  ngTemplateRef?: ADTTemplateRef;
+}
+
+export interface ADTTemplateRef {
+  /** `TemplateRef` to work with */
+  ref: TemplateRef<any>;
+  /** */
+  context?: ADTTemplateRefContext;
+}
+
+export interface ADTTemplateRefContext {
+  captureEvents: Function;
+  userData?: any;
 }