diff --git a/demo/package.json b/demo/package.json
index ba8251a2b..f2e5f8e80 100644
--- a/demo/package.json
+++ b/demo/package.json
@@ -39,7 +39,9 @@
"devDependencies": {
"@angular/cli": "1.0.0-rc.1",
"@angular/compiler-cli": "2.4.8",
+ "@types/datatables.net": "~1.10.1",
"@types/jasmine": "2.5.38",
+ "@types/jquery": "^2.0.41",
"@types/node": "~6.0.60",
"codelyzer": "~2.0.0-beta.4",
"jasmine-core": "~2.5.2",
@@ -47,9 +49,9 @@
"karma": "~1.4.1",
"karma-chrome-launcher": "~2.0.0",
"karma-cli": "~1.0.1",
+ "karma-coverage-istanbul-reporter": "^0.2.0",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
- "karma-coverage-istanbul-reporter": "^0.2.0",
"protractor": "~5.1.0",
"ts-node": "~2.0.0",
"tslint": "~4.4.2",
diff --git a/demo/src/app/advanced/dt-instance-snippet.component.ts b/demo/src/app/advanced/dt-instance-snippet.component.ts
index 050289da5..aaa23e2a1 100644
--- a/demo/src/app/advanced/dt-instance-snippet.component.ts
+++ b/demo/src/app/advanced/dt-instance-snippet.component.ts
@@ -44,12 +44,12 @@ import { DataTableDirective } from 'angular-datatables';
})
export class DtInstanceComponent implements OnInit {
@ViewChild(DataTableDirective)
- private datatableEl: DataTableDirective;
+ private datatableElement: DataTableDirective;
- dtOptions: any = {};
+ dtOptions: DataTables.Settings = {};
- displayToConsole(): void {
- this.datatableEl.dtInstance.then(dtInstance => console.log(dtInstance));
+ displayToConsole(datatableElement: DataTableDirective): void {
+ datatableElement.dtInstance.then((dtInstance: DataTables.Api) => console.log(dtInstance));
}
ngOnInit(): void {
diff --git a/demo/src/app/advanced/dt-instance.component.ts b/demo/src/app/advanced/dt-instance.component.ts
index 823d4e82b..63bdb9b67 100644
--- a/demo/src/app/advanced/dt-instance.component.ts
+++ b/demo/src/app/advanced/dt-instance.component.ts
@@ -10,10 +10,10 @@ export class DtInstanceComponent implements OnInit {
@ViewChild(DataTableDirective)
private datatableElement: DataTableDirective;
- dtOptions: any = {};
+ dtOptions: DataTables.Settings = {};
displayToConsole(datatableElement: DataTableDirective): void {
- datatableElement.dtInstance.then(dtInstance => console.log(dtInstance));
+ datatableElement.dtInstance.then((dtInstance: DataTables.Api) => console.log(dtInstance));
}
ngOnInit(): void {
diff --git a/demo/src/app/advanced/load-dt-options-with-promise-snippet.component.ts b/demo/src/app/advanced/load-dt-options-with-promise-snippet.component.ts
index 815d29202..a3189b6f4 100644
--- a/demo/src/app/advanced/load-dt-options-with-promise-snippet.component.ts
+++ b/demo/src/app/advanced/load-dt-options-with-promise-snippet.component.ts
@@ -36,7 +36,7 @@ import 'rxjs/add/operator/toPromise';
templateUrl: 'load-dt-options-with-promise.component.html'
})
export class LoadDtOptionsWithPromiseComponent implements OnInit {
- dtOptions: any = {};
+ dtOptions: DataTables.Settings = {};
constructor(@Inject(Http) private http: Http) {}
diff --git a/demo/src/app/advanced/load-dt-options-with-promise.component.ts b/demo/src/app/advanced/load-dt-options-with-promise.component.ts
index a51db56f3..f083427f2 100644
--- a/demo/src/app/advanced/load-dt-options-with-promise.component.ts
+++ b/demo/src/app/advanced/load-dt-options-with-promise.component.ts
@@ -8,7 +8,7 @@ import 'rxjs/add/operator/toPromise';
templateUrl: 'load-dt-options-with-promise.component.html'
})
export class LoadDtOptionsWithPromiseComponent implements OnInit {
- dtOptions: any = {};
+ dtOptions: DataTables.Settings = {};
constructor( @Inject(Http) private http: Http) { }
diff --git a/demo/src/app/advanced/row-click-event-snippet.component.ts b/demo/src/app/advanced/row-click-event-snippet.component.ts
index ecdbb1931..006592642 100644
--- a/demo/src/app/advanced/row-click-event-snippet.component.ts
+++ b/demo/src/app/advanced/row-click-event-snippet.component.ts
@@ -27,15 +27,13 @@ export class RowClickEventSnippetComponent {
import { Component, NgZone, OnInit } from '@angular/core';
-declare var $: any;
-
@Component({
selector: 'row-click-event',
templateUrl: 'row-click-event.component.html'
})
export class RowClickEventComponent implements OnInit {
- message: string = '';
- dtOptions: any = {};
+ message = '';
+ dtOptions: DataTables.Settings = {};
constructor(private zone: NgZone) { }
@@ -56,15 +54,15 @@ export class RowClickEventComponent implements OnInit {
title: 'Last name',
data: 'lastName'
}],
- rowCallback: (nRow: number, aData: any, iDisplayIndex: number, iDisplayIndexFull: number) => {
- let self = this;
+ rowCallback: (row: Node, data: any[] | Object, index: number) => {
+ const self = this;
// Unbind first in order to avoid any duplicate handler
// (see https://github.com/l-lin/angular-datatables/issues/87)
- $('td', nRow).unbind('click');
- $('td', nRow).bind('click', () => {
- self.someClickHandler(aData);
+ $('td', row).unbind('click');
+ $('td', row).bind('click', () => {
+ self.someClickHandler(data);
});
- return nRow;
+ return row;
}
};
}
diff --git a/demo/src/app/advanced/row-click-event.component.ts b/demo/src/app/advanced/row-click-event.component.ts
index 5ca444389..fa354cd17 100644
--- a/demo/src/app/advanced/row-click-event.component.ts
+++ b/demo/src/app/advanced/row-click-event.component.ts
@@ -1,14 +1,12 @@
import { Component, NgZone, OnInit } from '@angular/core';
-declare var $: any;
-
@Component({
selector: 'app-row-click-event',
templateUrl: 'row-click-event.component.html'
})
export class RowClickEventComponent implements OnInit {
message = '';
- dtOptions: any = {};
+ dtOptions: DataTables.Settings = {};
constructor(private zone: NgZone) { }
@@ -29,15 +27,15 @@ export class RowClickEventComponent implements OnInit {
title: 'Last name',
data: 'lastName'
}],
- rowCallback: (nRow: number, aData: any, iDisplayIndex: number, iDisplayIndexFull: number) => {
+ rowCallback: (row: Node, data: any[] | Object, index: number) => {
const self = this;
// Unbind first in order to avoid any duplicate handler
// (see https://github.com/l-lin/angular-datatables/issues/87)
- $('td', nRow).unbind('click');
- $('td', nRow).bind('click', () => {
- self.someClickHandler(aData);
+ $('td', row).unbind('click');
+ $('td', row).bind('click', () => {
+ self.someClickHandler(data);
});
- return nRow;
+ return row;
}
};
}
diff --git a/demo/src/app/app.module.ts b/demo/src/app/app.module.ts
index 45a8dc270..89bb8f330 100644
--- a/demo/src/app/app.module.ts
+++ b/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';
diff --git a/demo/src/app/basic/angular-way-snippet.component.ts b/demo/src/app/basic/angular-way-snippet.component.ts
index 869feef15..61f4a9682 100644
--- a/demo/src/app/basic/angular-way-snippet.component.ts
+++ b/demo/src/app/basic/angular-way-snippet.component.ts
@@ -54,7 +54,7 @@ class Person {
templateUrl: 'angular-way.component.html'
})
export class AngularWayComponent implements OnInit {
- dtOptions: any = {};
+ dtOptions: DataTables.Settings = {};
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
diff --git a/demo/src/app/basic/angular-way.component.ts b/demo/src/app/basic/angular-way.component.ts
index 1b42cf647..e182ecc3c 100644
--- a/demo/src/app/basic/angular-way.component.ts
+++ b/demo/src/app/basic/angular-way.component.ts
@@ -15,7 +15,7 @@ class Person {
templateUrl: 'angular-way.component.html'
})
export class AngularWayComponent implements OnInit {
- dtOptions: any = {};
+ dtOptions: DataTables.Settings = {};
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
@@ -25,8 +25,7 @@ export class AngularWayComponent implements OnInit {
ngOnInit(): void {
this.dtOptions = {
- paginationType: 'full_numbers',
- displayLength: 2
+ pagingType: 'full_numbers'
};
this.http.get('data/data.json')
.map(this.extractData)
diff --git a/demo/src/app/basic/with-ajax-snippet.component.ts b/demo/src/app/basic/with-ajax-snippet.component.ts
index 89cfc2123..a519e09fa 100644
--- a/demo/src/app/basic/with-ajax-snippet.component.ts
+++ b/demo/src/app/basic/with-ajax-snippet.component.ts
@@ -33,7 +33,7 @@ export class WithAjaxSnippetComponent {
templateUrl: 'with-ajax.component.html'
})
export class WithAjaxComponent implements OnInit {
- dtOptions: any = {};
+ dtOptions: DataTables.Settings = {};
ngOnInit(): void {
this.dtOptions = {
diff --git a/demo/src/app/basic/with-ajax.component.ts b/demo/src/app/basic/with-ajax.component.ts
index e73688a63..38cc10de7 100644
--- a/demo/src/app/basic/with-ajax.component.ts
+++ b/demo/src/app/basic/with-ajax.component.ts
@@ -5,7 +5,7 @@ import { Component, OnInit } from '@angular/core';
templateUrl: 'with-ajax.component.html'
})
export class WithAjaxComponent implements OnInit {
- dtOptions: any = {};
+ dtOptions: DataTables.Settings = {};
ngOnInit(): void {
this.dtOptions = {
diff --git a/demo/src/app/basic/with-options-snippet.component.ts b/demo/src/app/basic/with-options-snippet.component.ts
index 1f1d24eb5..4dec8fe5a 100644
--- a/demo/src/app/basic/with-options-snippet.component.ts
+++ b/demo/src/app/basic/with-options-snippet.component.ts
@@ -99,15 +99,14 @@ export class WithOptionsSnippetComponent {
templateUrl: 'with-options.component.html'
})
export class WithOptionsComponent implements OnInit {
- dtOptions: any = {};
+ dtOptions: DataTables.Settings = {};
ngOnInit(): void {
this.dtOptions = {
- displayLength: 2,
- paginationType: 'full_numbers'
+ pagingType: 'full_numbers'
};
}
-}
+}/code>
`;
}
diff --git a/demo/src/app/basic/with-options.component.ts b/demo/src/app/basic/with-options.component.ts
index 2427de104..7e03123a9 100644
--- a/demo/src/app/basic/with-options.component.ts
+++ b/demo/src/app/basic/with-options.component.ts
@@ -5,12 +5,11 @@ import { Component, OnInit } from '@angular/core';
templateUrl: 'with-options.component.html'
})
export class WithOptionsComponent implements OnInit {
- dtOptions: any = {};
+ dtOptions: DataTables.Settings = {};
ngOnInit(): void {
this.dtOptions = {
- displayLength: 2,
- paginationType: 'full_numbers'
+ pagingType: 'full_numbers'
};
}
}
diff --git a/demo/src/app/getting-started.component.ts b/demo/src/app/getting-started.component.ts
index c4bf85458..408bc6249 100644
--- a/demo/src/app/getting-started.component.ts
+++ b/demo/src/app/getting-started.component.ts
@@ -10,7 +10,9 @@ export class GettingStartedComponent {
npm install jquery --save
npm install datatables.net --save
npm install datatables.net-dt --save
-npm install angular-datatables --save
+npm install angular-datatables --save
+npm install @types/jquery --save-dev
+npm install @types/datatables.net --save-dev
`;
angularCliJsonSnippet = `
diff --git a/package.json b/package.json
index 748c6d8b3..756873300 100644
--- a/package.json
+++ b/package.json
@@ -44,7 +44,9 @@
"devDependencies": {
"@angular/compiler-cli": "~2.4.8",
"@types/core-js": "~0.9.35",
- "@types/jasmine": "2.5.40",
+ "@types/datatables.net": "~1.10.1",
+ "@types/jasmine": "~2.5.40",
+ "@types/jquery": "~2.0.41",
"@types/node": "~6.0.46",
"canonical-path": "0.0.2",
"codelyzer": "~2.0.1",
diff --git a/src/angular-datatables.directive.ts b/src/angular-datatables.directive.ts
index 8031c0cad..98fb8d8fa 100644
--- a/src/angular-datatables.directive.ts
+++ b/src/angular-datatables.directive.ts
@@ -7,9 +7,6 @@
import { Directive, ElementRef, Input, OnInit } from '@angular/core';
import { Subject } from 'rxjs/Rx';
-import 'jquery';
-import 'datatables.net';
-declare var $: any;
@Directive({
selector: '[datatable]'
@@ -19,7 +16,7 @@ export class DataTableDirective implements OnInit {
* The DataTable option you pass to configure your table.
*/
@Input()
- dtOptions: any = {};
+ dtOptions: DataTables.Settings = {};
/**
* This trigger is used if one wants to trigger manually the DT rendering
@@ -34,7 +31,7 @@ export class DataTableDirective implements OnInit {
* It's possible to execute the [DataTables APIs](https://datatables.net/reference/api/) with
* this variable.
*/
- dtInstance: Promise;
+ dtInstance: Promise;
constructor(private el: ElementRef) { }