Implement the Angular renderer #955

Author: l-lin

demo/src/app/app.component.html

@@ -41,6 +41,7 @@ <h3>
               <li><a routerLink="/basic/zero-config">Zero configuration</a></li>
               <li><a routerLink="/basic/with-options">With options</a></li>
               <li><a routerLink="/basic/with-ajax">With ajax</a></li>
+              <li><a routerLink="/basic/angular-way">Angular way</a></li>
             </ul>
           </div>
         </li>

demo/src/app/app.component.ts

@@ -1,10 +1,16 @@
-import { Component, ElementRef } from '@angular/core';
+import { Component, ElementRef, OnInit } from '@angular/core';
+
+declare var $: any;
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
 })
-export class AppComponent {
+export class AppComponent implements OnInit {
   title = 'Angular DataTables examples';
+
+  ngOnInit(): void {
+    $.fn.dataTable.ext.errMode = 'none';
+  }
 }

demo/src/app/app.module.ts

@@ -5,7 +5,7 @@ import { HttpModule } from '@angular/http';
 
 import { HighlightJsModule, HighlightJsService } from 'angular2-highlight-js';
 
-import { DataTablesModule } from 'angular-datatables';
+import { DataTablesModule } from './angular-datatables';
 
 import { AppRoutingModule } from './app.routing';
 
@@ -20,6 +20,8 @@ import { WithOptionsComponent } from './basic/with-options.component';
 import { WithOptionsSnippetComponent } from './basic/with-options-snippet.component';
 import { WithAjaxComponent } from './basic/with-ajax.component';
 import { WithAjaxSnippetComponent } from './basic/with-ajax-snippet.component';
+import { AngularWayComponent } from './basic/angular-way.component';
+import { AngularWaySnippetComponent } from './basic/angular-way-snippet.component';
 
 // Advanced examples
 import {  DtInstanceComponent } from './advanced/dt-instance.component';
@@ -41,6 +43,8 @@ import { RowClickEventSnippetComponent } from './advanced/row-click-event-snippe
     WithOptionsSnippetComponent,
     WithAjaxComponent,
     WithAjaxSnippetComponent,
+    AngularWayComponent,
+    AngularWaySnippetComponent,
 
     DtInstanceComponent,
     DtInstanceSnippetComponent,

demo/src/app/app.routing.ts

@@ -7,6 +7,7 @@ import { GettingStartedComponent } from './getting-started.component';
 import { ZeroConfigComponent } from './basic/zero-config.component';
 import { WithOptionsComponent } from './basic/with-options.component';
 import { WithAjaxComponent } from './basic/with-ajax.component';
+import { AngularWayComponent } from './basic/angular-way.component';
 
 import { DtInstanceComponent } from './advanced/dt-instance.component';
 import { LoadDtOptionsWithPromiseComponent } from './advanced/load-dt-options-with-promise.component';
@@ -38,6 +39,10 @@ const routes: Routes = [
     path: 'basic/with-ajax',
     component: WithAjaxComponent
   },
+  {
+    path: 'basic/angular-way',
+    component: AngularWayComponent
+  },
   {
     path: 'advanced/dt-instance',
     component: DtInstanceComponent

demo/src/app/basic/angular-way-snippet.component.ts

@@ -0,0 +1,86 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-angular-way-snippet',
+  template: `
+  <div id="html" class="col s12 m9 l12">
+    <h4 class="header">HTML</h4>
+    <section [innerHTML]="htmlSnippet" highlight-js-content=".xml"></section>
+  </div>
+  <div id="ts" class="col s12 m9 l12">
+    <h4 class="header">Typescript</h4>
+    <section [innerHTML]="tsSnippet" highlight-js-content=".typescript"></section>
+  </div>
+  `
+})
+export class AngularWaySnippetComponent {
+  htmlSnippet = `
+<pre>
+<code class="xml highlight">&lt;table datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="row-border hover"&gt;
+&lt;thead&gt;
+  &lt;tr&gt;
+    &lt;th&gt;ID&lt;/th&gt;
+    &lt;th&gt;First name&lt;/th&gt;
+    &lt;th&gt;Last name&lt;/th&gt;
+  &lt;/tr&gt;
+&lt;/thead&gt;
+&lt;tbody&gt;
+  &lt;tr *ngFor="let person of persons"&gt;
+    &lt;td&gt;{{ person.id }}&lt;/td&gt;
+    &lt;td&gt;{{ person.firstName }}&lt;/td&gt;
+    &lt;td&gt;{{ person.lastName }}&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/tbody&gt;
+&lt;/table&gt;</code>
+</pre>
+  `;
+
+  tsSnippet = `
+<pre>
+<code class="typescript highlight">import { Component, OnInit } from '@angular/core';
+import { Http, Response } from '@angular/http';
+import { Subject } from 'rxjs/Rx';
+
+import 'rxjs/add/operator/map';
+
+class Person {
+  id: number;
+  firstName: string;
+  lastName: string;
+}
+
+@Component({
+  selector: 'app-angular-way',
+  templateUrl: 'angular-way.component.html'
+})
+export class AngularWayComponent implements OnInit {
+  dtOptions: any = {};
+  persons: Person[] = [];
+  // We use this trigger because fetching the list of persons can be quite long,
+  // thus we ensure the data is fetched before rendering
+  dtTrigger: Subject<any> = new Subject();
+
+  constructor(private http: Http) { }
+
+  ngOnInit(): void {
+    this.dtOptions = {
+      paginationType: 'full_numbers',
+      displayLength: 2
+    };
+    this.http.get('data/data.json')
+      .map(this.extractData)
+      .subscribe(persons => {
+        this.persons = persons;
+        // Calling the DT trigger to manually render the table
+        this.dtTrigger.next();
+      });
+  }
+
+  private extractData(res: Response) {
+    const body = res.json();
+    return body.data || {};
+  }
+}</code>
+</pre>
+  `;
+}

demo/src/app/basic/angular-way.component.html

@@ -0,0 +1,47 @@
+<div class="section banner">
+  <div class="container">
+    <div class="row">
+      <div class="col s12 m9">
+        <h1 class="header center-on-small-only">Angular way</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 the angular directives to render the table. Angular-datatables provides a <code>dtTrigger</code> you can use to manually trigger the rendering of the table.
+        </p>
+        <div class="col s12 m9 l12 showcase-tabs">
+          <ul class="anchor-links">
+            <li class="col s3"><a class="waves-effect btn" href="#preview">Preview</a></li>
+            <li class="col s3"><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" [dtTrigger]="dtTrigger" class="row-border hover">
+            <thead>
+              <tr>
+                <th>ID</th>
+                <th>First name</th>
+                <th>Last name</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr *ngFor="let person of persons">
+                <td>{{ person.id }}</td>
+                <td>{{ person.firstName }}</td>
+                <td>{{ person.lastName }}</td>
+              </tr>
+            </tbody>
+          </table>
+          <app-angular-way-snippet></app-angular-way-snippet>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

demo/src/app/basic/angular-way.component.ts

@@ -0,0 +1,44 @@
+import { Component, OnInit } from '@angular/core';
+import { Http, Response } from '@angular/http';
+import { Subject } from 'rxjs/Rx';
+
+import 'rxjs/add/operator/map';
+
+class Person {
+  id: number;
+  firstName: string;
+  lastName: string;
+}
+
+@Component({
+  selector: 'app-angular-way',
+  templateUrl: 'angular-way.component.html'
+})
+export class AngularWayComponent implements OnInit {
+  dtOptions: any = {};
+  persons: Person[] = [];
+  // We use this trigger because fetching the list of persons can be quite long,
+  // thus we ensure the data is fetched before rendering
+  dtTrigger: Subject<any> = new Subject();
+
+  constructor(private http: Http) { }
+
+  ngOnInit(): void {
+    this.dtOptions = {
+      paginationType: 'full_numbers',
+      displayLength: 2
+    };
+    this.http.get('data/data.json')
+      .map(this.extractData)
+      .subscribe(persons => {
+        this.persons = persons;
+        // Calling the DT trigger to manually render the table
+        this.dtTrigger.next();
+      });
+  }
+
+  private extractData(res: Response) {
+    const body = res.json();
+    return body.data || {};
+  }
+}

src/angular-datatables.directive.ts

@@ -5,7 +5,8 @@
  * found in the LICENSE file at https://raw.githubusercontent.com/l-lin/angular-datatables/master/LICENSE
  */
 
-import { Directive, ElementRef, Inject, OnInit, Input, Component } from '@angular/core';
+import { Directive, ElementRef, Input, OnInit } from '@angular/core';
+import { Subject } from 'rxjs/Rx';
 import 'jquery';
 import 'datatables.net';
 declare var $: any;
@@ -18,7 +19,14 @@ export class DataTableDirective implements OnInit {
    * The DataTable option you pass to configure your table.
    */
   @Input()
-  dtOptions: any;
+  dtOptions: any = {};
+
+  /**
+   * This trigger is used if one wants to trigger manually the DT rendering
+   * Useful when rendering angular rendered DOM
+   */
+  @Input()
+  dtTrigger: Subject<any>;
 
   /**
    * The DataTable instance built by the jQuery library [DataTables](datatables.net).
@@ -28,15 +36,26 @@ export class DataTableDirective implements OnInit {
    */
   dtInstance: Promise<any>;
 
-  constructor(@Inject(ElementRef) private el: ElementRef) {
-    this.dtOptions = {};
+  constructor(private el: ElementRef) { }
+
+  ngOnInit(): void {
+    if (this.dtTrigger) {
+      this.dtTrigger.subscribe(() => {
+        this.displayTable();
+      });
+    } else {
+      this.displayTable();
+    }
   }
 
-  ngOnInit() {
+  private displayTable(): void {
     this.dtInstance = new Promise((resolve, reject) => {
       Promise.resolve(this.dtOptions).then(dtOptions => {
-        const dt = $(this.el.nativeElement).DataTable(dtOptions);
-        resolve(dt);
+        // Using setTimeout as a "hack" to be "part" of NgZone
+        setTimeout(() => {
+          const dt = $(this.el.nativeElement).DataTable(dtOptions);
+          resolve(dt);
+        });
       });
     });
   }