dtInstance doesn't return Promise

demo/src/app/advanced/custom-range-search.component.ts

@@ -57,9 +57,7 @@ export class CustomRangeSearchComponent implements OnDestroy, OnInit {
  }
 
  filterById(): boolean {
- this.datatableElement.dtInstance.then((dtInstance: DataTables.Api) => {
- dtInstance.draw();
- });
+ this.datatableElement.dtInstance.draw();
  return false;
  }
 }

demo/src/app/advanced/dt-instance.component.ts

@@ -19,7 +19,7 @@ export class DtInstanceComponent implements OnInit {
  dtOptions: DataTables.Settings = {};
 
  displayToConsole(datatableElement: DataTableDirective): void {
- datatableElement.dtInstance.then((dtInstance: DataTables.Api) => console.log(dtInstance));
+ console.log(datatableElement.dtInstance);
  }
 
  ngOnInit(): void {

demo/src/app/advanced/individual-column-filtering.component.ts

@@ -13,7 +13,7 @@ export class IndividualColumnFilteringComponent implements OnInit, AfterViewInit
  mdHTML = 'assets/docs/advanced/indi-col-filter/source-html.md';
  mdTS = 'assets/docs/advanced/indi-col-filter/source-ts.md';
 
- @ViewChild(DataTableDirective, {static: false})
+ @ViewChild(DataTableDirective, { static: false })
  datatableElement: DataTableDirective;
 
  dtOptions: DataTables.Settings = {};
@@ -35,16 +35,14 @@ export class IndividualColumnFilteringComponent implements OnInit, AfterViewInit
  }
 
  ngAfterViewInit(): void {
- this.datatableElement.dtInstance.then((dtInstance: DataTables.Api) => {
- dtInstance.columns().every(function () {
- const that = this;
- $('input', this.footer()).on('keyup change', function () {
- if (that.search() !== this['value']) {
- that
- .search(this['value'])
- .draw();
- }
- });
+ this.datatableElement.dtInstance.columns().every(function () {
+ const that = this;
+ $('input', this.footer()).on('keyup change', function () {
+ if (that.search() !== this['value']) {
+ that
+ .search(this['value'])
+ .draw();
+ }
  });
  });
  }

demo/src/app/advanced/multiple-tables.component.ts

@@ -19,9 +19,7 @@ export class MultipleTablesComponent implements OnInit {
 
  displayToConsole(): void {
  this.dtElements.forEach((dtElement: DataTableDirective, index: number) => {
- dtElement.dtInstance.then((dtInstance: any) => {
- console.log(`The DataTable ${index} instance ID is: ${dtInstance.table().node().id}`);
- });
+ console.log(`The DataTable ${index} instance ID is: ${(dtElement.dtInstance as any).table().node().id}`)
  });
  }
 

demo/src/app/advanced/rerender.component.ts

@@ -14,7 +14,7 @@ export class RerenderComponent implements AfterViewInit, OnDestroy, OnInit {
  mdTS = 'assets/docs/advanced/rerender/source-ts.md';
 
 
- @ViewChild(DataTableDirective, {static: false})
+ @ViewChild(DataTableDirective, { static: false })
  dtElement: DataTableDirective;
 
  dtOptions: DataTables.Settings = {};
@@ -47,11 +47,9 @@ export class RerenderComponent implements AfterViewInit, OnDestroy, OnInit {
  }
 
  rerender(): void {
- this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
- // Destroy the table first
- dtInstance.destroy();
- // Call the dtTrigger to rerender again
- this.dtTrigger.next();
- });
+ // Destroy the table first
+ this.dtElement.dtInstance.destroy();
+ // Call the dtTrigger to rerender again
+ this.dtTrigger.next();
  }
 }

demo/src/assets/docs/advanced/custom-range/source-ts.md

@@ -52,9 +52,7 @@ export class CustomRangeSearchComponent implements OnDestroy, OnInit {
  }
 
  filterById(): void {
- this.datatableElement.dtInstance.then((dtInstance: DataTables.Api) => {
- dtInstance.draw();
- });
+ this.datatableElement.dtInstance.draw();
  }
 }
 ```

demo/src/assets/docs/advanced/dt-instance/source-ts.md

@@ -14,7 +14,7 @@ export class DtInstanceComponent implements OnInit {
  dtOptions: DataTables.Settings = {};
 
  displayToConsole(datatableElement: DataTableDirective): void {
- datatableElement.dtInstance.then((dtInstance: DataTables.Api) => console.log(dtInstance));
+ console.log(datatableElement.dtInstance);
  }
 
  ngOnInit(): void {

demo/src/assets/docs/advanced/indi-col-filter/source-ts.md

@@ -1,45 +1,47 @@
 ```typescript
-import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core';
+import { AfterViewInit, Component, OnInit, ViewChild } from "@angular/core";
 
-import { DataTableDirective } from 'angular-datatables';
+import { DataTableDirective } from "angular-datatables";
 
 @Component({
- selector: 'app-individual-column-filtering',
- templateUrl: 'individual-column-filtering.component.html'
+ selector: "app-individual-column-filtering",
+ templateUrl: "individual-column-filtering.component.html",
 })
-export class IndividualColumnFilteringComponent implements OnInit, AfterViewInit {
- @ViewChild(DataTableDirective, {static: false})
+export class IndividualColumnFilteringComponent
+ implements OnInit, AfterViewInit
+{
+ @ViewChild(DataTableDirective, { static: false })
  datatableElement: DataTableDirective;
 
  dtOptions: DataTables.Settings = {};
 
  ngOnInit(): void {
  this.dtOptions = {
- ajax: 'data/data.json',
- columns: [{
- title: 'ID',
- data: 'id'
- }, {
- title: 'First name',
- data: 'firstName'
- }, {
- title: 'Last name',
- data: 'lastName'
- }]
+ ajax: "data/data.json",
+ columns: [
+ {
+ title: "ID",
+ data: "id",
+ },
+ {
+ title: "First name",
+ data: "firstName",
+ },
+ {
+ title: "Last name",
+ data: "lastName",
+ },
+ ],
  };
  }
 
  ngAfterViewInit(): void {
- this.datatableElement.dtInstance.then((dtInstance: DataTables.Api) => {
- dtInstance.columns().every(function () {
- const that = this;
- $('input', this.footer()).on('keyup change', function () {
- if (that.search() !== this['value']) {
- that
- .search(this['value'])
- .draw();
- }
- });
+ this.datatableElement.dtInstance.columns().every(function () {
+ const that = this;
+ $("input", this.footer()).on("keyup change", function () {
+ if (that.search() !== this["value"]) {
+ that.search(this["value"]).draw();
+ }
  });
  });
  }

demo/src/assets/docs/advanced/multiple-tables/source-ts.md

@@ -15,9 +15,7 @@ export class MultipleTablesComponent implements OnInit {
 
  displayToConsole(): void {
  this.dtElements.forEach((dtElement: DataTableDirective, index: number) => {
- dtElement.dtInstance.then((dtInstance: any) => {
- console.log(`The DataTable ${index} instance ID is: ${dtInstance.table().node().id}`);
- });
+ console.log(`The DataTable ${index} instance ID is: ${(dtElement.dtInstance as any).table().node().id}`);
  });
  }
 

demo/src/assets/docs/advanced/rerender/source-ts.md

@@ -41,12 +41,10 @@ export class RerenderComponent implements AfterViewInit, OnDestroy, OnInit {
  }
 
  rerender(): void {
- this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
- // Destroy the table first
- dtInstance.destroy();
- // Call the dtTrigger to rerender again
- this.dtTrigger.next();
- });
+ // Destroy the table first
+ this.dtElement.dtInstance.destroy();
+ // Call the dtTrigger to rerender again
+ this.dtTrigger.next();
  }
 }
 ```

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, Renderer2, ViewContainerRef } from '@angular/core';
+import { Directive, ElementRef, Input, OnDestroy, OnInit, NgZone, Renderer2, ViewContainerRef } from '@angular/core';
 import { Subject } from 'rxjs';
-import { ADTSettings, ADTTemplateRefContext } from './models/settings';
+import { ADTSettings } from './models/settings';
 
 @Directive({
  selector: '[datatable]'
@@ -32,15 +32,16 @@ export class DataTableDirective implements OnDestroy, OnInit {
  * It's possible to execute the [DataTables APIs](https://datatables.net/reference/api/) with
  * this variable.
  */
- dtInstance: Promise<DataTables.Api>;
+ dtInstance: DataTables.Api;
 
  // Only used for destroying the table when destroying this directive
  private dt: DataTables.Api;
 
  constructor(
  private el: ElementRef,
  private vcr: ViewContainerRef,
- private renderer: Renderer2
+ private renderer: Renderer2,
+ private ngZone: NgZone
  ) { }
 
  ngOnInit(): void {
@@ -62,62 +63,60 @@ export class DataTableDirective implements OnDestroy, OnInit {
  }
  }
 
- private displayTable(): void {
+ private async displayTable() {
  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
-  setTimeout(() => {
-  // 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 && !x.ngTemplateRef);
-  // 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);
-  });
+ // resolve dtOptions if Promise was provided.
+ if ('then' in this.dtOptions) this.dtOptions = await Promise.resolve(this.dtOptions);
+ // process request
+ this.dtInstance = this.ngZone.runTask(_ => {
+ // Assign DT properties here
+ let options: ADTSettings = {
+ rowCallback: (row, data, index) => {
+ if (this.dtOptions.columns) {
+ const columns = this.dtOptions.columns;
+ // Filter columns with pipe declared
+ const colsWithPipe = columns.filter(x => x.ngPipeInstance && !x.ngTemplateRef);
+ // 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);
+ });
 
-  // 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]);
-  });
-  }
+ // 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 columnIndex = 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.
- 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);
- });
- });
+ // 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({}, this.dtOptions, options);
+ this.dt = $(this.el.nativeElement).DataTable(options);
+ return this.dt;
  });
  }
 }