Add support for using Angular pipes to transform data

demo/src/app/advanced/using-ng-pipe-snippet.component.ts

@@ -0,0 +1,78 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-using-pipe-snippet',
+  template: `
+  <div id="html" class="col s12 m9 l12">
+    <h4 class="header">HTML</h4>
+    <section [innerHTML]="htmlSnippet" hljsContent=".xml"></section>
+  </div>
+  <div id="ts" class="col s12 m9 l12">
+    <h4 class="header">Typescript</h4>
+    <section [innerHTML]="tsSnippet" hljsContent=".typescript"></section>
+  </div>
+  `
+})
+export class UsingPipeSnippetComponent implements OnInit {
+
+  constructor() { }
+
+  htmlSnippet = `
+<pre>
+<code class="xml highlight">
+&lt;table datatable [dtOptions]="dtOptions" class="row-border hover"&gt;&lt;/table&gt;</code>
+</pre>
+  `;
+
+  tsSnippet = `
+<pre>
+<code class="typescript highlight">
+import { UpperCasePipe } from '@angular/common';
+import { Component, OnInit } from '@angular/core';
+import { ADTSettings } from 'angular-datatables/src/models/settings';
+
+@Component({
+  selector: 'app-using-ng-pipe',
+  templateUrl: './using-ng-pipe.component.html'
+})
+export class UsingNgPipeComponent implements OnInit {
+
+  constructor(
+    private pipeInstance: UpperCasePipe // inject your Angular Pipe
+  ) { }
+
+  // Use ADTSettings instead of DataTables.Settings
+  dtOptions: ADTSettings = {};
+
+  ngOnInit(): void {
+
+    this.dtOptions = {
+      ajax: 'data/data.json',
+      columns: [
+        {
+          title: 'ID',
+          data: 'id'
+        },
+        {
+          title: 'First name',
+          data: 'firstName',
+          ngPipeInstance: this.pipeInstance  // <-- Pipe is used here
+        },
+        {
+          title: 'Last name',
+          data: 'lastName',
+          ngPipeInstance: this.pipeInstance  // <-- Pipe is used here
+        }
+      ]
+    };
+  }
+
+}
+</code>
+</pre>
+  `;
+
+  ngOnInit(): void {
+  }
+
+}

demo/src/app/advanced/using-ng-pipe.component.html

@@ -0,0 +1,32 @@
+<div class="section banner">
+  <div class="container">
+    <div class="row">
+      <div class="col s12 m9">
+        <h1 class="header center-on-small-only">Using Angular Pipes</h1>
+      </div>
+    </div>
+  </div>
+</div>
+<div class="container">
+  <div class="row">
+    <div class="col s12 m9 l12">
+      <div class="section">
+        <p class="caption">
+          You can use Angular Pipe to transform data on the table.
+        </p>
+        <div class="col s12 m9 l12 showcase-tabs">
+          <ul class="anchor-links">
+            <li class="col s4"><a class="waves-effect btn" href="#preview">Preview</a></li>
+            <li class="col s4"><a class="waves-effect btn" href="#html">HTML</a></li>
+            <li class="col s3"><a class="waves-effect btn" href="#ts">Typescript</a></li>
+          </ul>
+        </div>
+        <div id="preview" class="col s12 m9 l12">
+          <h4 class="header">Preview</h4>
+          <table datatable [dtOptions]="dtOptions" class="row-border hover"></table>
+        </div>
+      </div>
+      <app-using-pipe-snippet></app-using-pipe-snippet>
+    </div>
+  </div>
+</div>

demo/src/app/advanced/using-ng-pipe.component.ts

@@ -0,0 +1,40 @@
+import { UpperCasePipe } from '@angular/common';
+import { Component, OnInit } from '@angular/core';
+import { ADTSettings } from 'angular-datatables/src/models/settings';
+
+@Component({
+  selector: 'app-using-ng-pipe',
+  templateUrl: './using-ng-pipe.component.html'
+})
+export class UsingNgPipeComponent implements OnInit {
+
+  constructor(
+    private pipeInstance: UpperCasePipe
+  ) { }
+
+  dtOptions: ADTSettings = {};
+
+  ngOnInit(): void {
+
+    this.dtOptions = {
+      ajax: 'data/data.json',
+      columns: [
+        {
+          title: 'ID',
+          data: 'id'
+        },
+        {
+          title: 'First name',
+          data: 'firstName',
+          ngPipeInstance: this.pipeInstance
+        },
+        {
+          title: 'Last name',
+          data: 'lastName',
+          ngPipeInstance: this.pipeInstance
+        }
+      ]
+    };
+  }
+
+}

demo/src/app/app.component.html

@@ -89,6 +89,9 @@ <h3>
                             <li>
                                 <a routerLink="/advanced/router-link">Router link</a>
                             </li>
+                            <li>
+                                <a routerLink="/advanced/using-pipe">Using Angular Pipes</a>
+                            </li>
                         </ul>
                     </div>
                 </li>

demo/src/app/app.module.ts

@@ -57,12 +57,15 @@ import { ResponsiveExtensionConfigurationComponent } from './extensions/responsi
 import { SelectExtensionComponent } from './extensions/select-extension.component';
 import { SelectExtensionSnippetComponent } from './extensions/select-extension-snippet.component';
 import { SelectExtensionConfigurationComponent } from './extensions/select-extension-configuration.component';
+import { UsingNgPipeComponent } from './advanced/using-ng-pipe.component';
+import { UsingPipeSnippetComponent } from './advanced/using-ng-pipe-snippet.component';
 
 // HightlightJS
 import hljs from 'highlight.js/lib/highlight';
 import javascript from 'highlight.js/lib/languages/javascript';
 import typescript from 'highlight.js/lib/languages/typescript';
 import xml from 'highlight.js/lib/languages/xml';
+import { UpperCasePipe } from '@angular/common';
 
 hljs.registerLanguage('typescript', typescript);
 hljs.registerLanguage('javascript', javascript);
@@ -114,7 +117,9 @@ hljs.registerLanguage('xml', xml);
         ResponsiveExtensionConfigurationComponent,
         SelectExtensionComponent,
         SelectExtensionSnippetComponent,
-        SelectExtensionConfigurationComponent
+        SelectExtensionConfigurationComponent,
+        UsingNgPipeComponent,
+        UsingPipeSnippetComponent
     ],
     imports: [
         BrowserModule,
@@ -125,6 +130,7 @@ hljs.registerLanguage('xml', xml);
         AppRoutingModule
     ],
     providers: [
+      UpperCasePipe
     ],
     bootstrap: [AppComponent]
 })

demo/src/app/app.routing.ts

@@ -24,6 +24,7 @@ import { ButtonsExtensionComponent } from './extensions/buttons-extension.compon
 import { ColreorderExtensionComponent } from './extensions/colreorder-extension.component';
 import { ResponsiveExtensionComponent } from './extensions/responsive-extension.component';
 import { SelectExtensionComponent } from './extensions/select-extension.component';
+import { UsingNgPipeComponent } from './advanced/using-ng-pipe.component';
 
 const routes: Routes = [
     {
@@ -95,6 +96,10 @@ const routes: Routes = [
         path: 'advanced/router-link',
         component: RouterLinkComponent
     },
+    {
+        path: 'advanced/using-pipe',
+        component: UsingNgPipeComponent
+    },
     {
         path: 'extensions/buttons',
         component: ButtonsExtensionComponent

src/angular-datatables.directive.ts

@@ -7,6 +7,7 @@
 
 import { Directive, ElementRef, Input, OnDestroy, OnInit } from '@angular/core';
 import { Subject } from 'rxjs';
+import { ADTSettings } from './models/settings';
 
 @Directive({
   selector: '[datatable]'
@@ -16,7 +17,7 @@ export class DataTableDirective implements OnDestroy, OnInit {
    * The DataTable option you pass to configure your table.
    */
   @Input()
-  dtOptions: DataTables.Settings = {};
+  dtOptions: ADTSettings = {};
 
   /**
    * This trigger is used if one wants to trigger manually the DT rendering
@@ -62,7 +63,37 @@ export class DataTableDirective implements OnDestroy, OnInit {
       Promise.resolve(this.dtOptions).then(dtOptions => {
         // Using setTimeout as a "hack" to be "part" of NgZone
         setTimeout(() => {
-          this.dt = $(this.el.nativeElement).DataTable(dtOptions);
+          // Assign DT properties here
+          let options: ADTSettings = {
+            rowCallback: (row, data, index) => {
+              if (dtOptions.columns) {
+                const columns = dtOptions.columns;
+                // Filter columns with pipe declared
+                const colsWithPipe = columns.filter(x => x.ngPipeInstance);
+                // Iterate
+                colsWithPipe.forEach(el => {
+                  const pipe = el.ngPipeInstance;
+                  // find index of column using `data` attr
+                  const i = columns.findIndex(e => e.data == el.data);
+                  // get <td> element which holds data using index
+                  const rowFromCol = row.childNodes.item(i);
+                  // Transform data with Pipe
+                  const rowVal = $(rowFromCol).text();
+                  const rowValAfter = pipe.transform(rowVal);
+                  // Apply transformed string to <td>
+                  $(rowFromCol).text(rowValAfter);
+                });
+              }
+
+              // run user specified row callback if provided.
+              if (this.dtOptions.rowCallback) {
+                this.dtOptions.rowCallback(row, data, index);
+              }
+            }
+          };
+          // merge user's config with ours
+          options = Object.assign({}, dtOptions, options);
+          this.dt = $(this.el.nativeElement).DataTable(options);
           resolve(this.dt);
         });
       });

src/models/settings.ts

@@ -0,0 +1,9 @@
+import { PipeTransform } 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;
+}