, component: null| DtInstanceComponent = null;
+
+describe('DtInstanceComponent', () => {
+ beforeEach(() => {
+ fixture = TestBed.configureTestingModule({
+ declarations: [
+ BaseDemoComponent,
+ DtInstanceComponent,
+ DataTableDirective
+ ],
+ schemas: [NO_ERRORS_SCHEMA],
+ imports: [AppRoutingModule,
+ RouterTestingModule,
+ DataTablesModule,
+ MarkdownModule.forRoot({
+ sanitize: SecurityContext.NONE
+ }),
+ FormsModule],
+ providers: [provideHttpClient(withInterceptorsFromDi())]
+}).createComponent(DtInstanceComponent);
+
+ component = fixture.componentInstance;
+
+ fixture.detectChanges(); // initial binding
+ });
+
+ it('should create the app', waitForAsync(() => {
+ const app = fixture.debugElement.componentInstance;
+ expect(app).toBeTruthy();
+ }));
+
+ it('should have title "Finding DataTable instance"', waitForAsync(() => {
+ const app = fixture.debugElement.componentInstance as DtInstanceComponent;
+ expect(app.pageTitle).toBe('Finding DataTable instance');
+ }));
+
+ it('should retrieve Table instance', async () => {
+ const app = fixture.componentInstance as DtInstanceComponent;
+ await fixture.whenStable();
+
+ const query = fixture.debugElement.query(By.directive(DataTableDirective));
+ const dir = query.injector.get(DataTableDirective);
+ expect(dir).toBeTruthy();
+
+ const instance = await dir.dtInstance;
+ expect(instance).toBeTruthy();
+ });
+
+});
diff --git a/demo/src/app/advanced/dt-instance.component.ts b/demo/src/app/advanced/dt-instance.component.ts
index 54f46d199..dfa4af2af 100644
--- a/demo/src/app/advanced/dt-instance.component.ts
+++ b/demo/src/app/advanced/dt-instance.component.ts
@@ -1,19 +1,29 @@
import { Component, OnInit, ViewChild } from '@angular/core';
import { DataTableDirective } from 'angular-datatables';
+import { Config } from 'datatables.net';
@Component({
- selector: 'app-dt-instance',
- templateUrl: 'dt-instance.component.html'
+ selector: 'app-dt-instance',
+ templateUrl: 'dt-instance.component.html',
+ standalone: false
})
export class DtInstanceComponent implements OnInit {
- @ViewChild(DataTableDirective)
- datatableElement: DataTableDirective;
- dtOptions: DataTables.Settings = {};
+ pageTitle = 'Finding DataTable instance';
+ mdIntro = 'assets/docs/advanced/dt-instance/intro.md';
+ mdHTML = 'assets/docs/advanced/dt-instance/source-html.md';
+ mdTS = 'assets/docs/advanced/dt-instance/source-ts.md';
+ mdTSV1 = 'assets/docs/advanced/dt-instance/source-ts-dtv1.md';
- displayToConsole(datatableElement: DataTableDirective): void {
- datatableElement.dtInstance.then((dtInstance: DataTables.Api) => console.log(dtInstance));
+ @ViewChild(DataTableDirective, {static: false})
+ datatableElement: DataTableDirective|undefined;
+
+ dtOptions: Config = {};
+
+ displayToConsole(datatableElement: DataTableDirective | undefined): void {
+ if (!datatableElement) return;
+ datatableElement.dtInstance.then(dtInstance => console.log(dtInstance));
}
ngOnInit(): void {
diff --git a/demo/src/app/advanced/individual-column-filtering-snippet.component.ts b/demo/src/app/advanced/individual-column-filtering-snippet.component.ts
deleted file mode 100644
index 2fb0f3237..000000000
--- a/demo/src/app/advanced/individual-column-filtering-snippet.component.ts
+++ /dev/null
@@ -1,81 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
- selector: 'app-individual-column-filtering-snippet',
- template: `
-
-
-
-
-
-
-
-
- `
-})
-export class IndividualColumnFilteringSnippetComponent {
- htmlSnippet = `
-
-<table datatable [dtOptions]="dtOptions" class="row-border hover">
- <tfoot>
- <tr>
- <th><input type="text" placeholder="Search ID" name="search-id"/></th>
- <th><input type="text" placeholder="Search first name" name="search-first-name"/></th>
- <th><input type="text" placeholder="Search last name" name="search-last-name"/></th>
- </tr>
- </tfoot>
-</table>
-
- `;
-
- tsSnippet = `
-
-import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core';
-
-import { DataTableDirective } from 'angular-datatables';
-
-@Component({
- selector: 'app-individual-column-filtering',
- templateUrl: 'individual-column-filtering.component.html'
-})
-export class IndividualColumnFilteringComponent implements OnInit, AfterViewInit {
- @ViewChild(DataTableDirective)
- 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'
- }]
- };
- }
-
- 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();
- }
- });
- });
- });
- }
-}
-
-
- `;
-}
diff --git a/demo/src/app/advanced/individual-column-filtering.component.html b/demo/src/app/advanced/individual-column-filtering.component.html
index 96c617f92..c5b8e0b14 100644
--- a/demo/src/app/advanced/individual-column-filtering.component.html
+++ b/demo/src/app/advanced/individual-column-filtering.component.html
@@ -1,40 +1,13 @@
-
-
+
+
+
+
+
diff --git a/demo/src/app/advanced/individual-column-filtering.component.spec.ts b/demo/src/app/advanced/individual-column-filtering.component.spec.ts
new file mode 100644
index 000000000..be410eee8
--- /dev/null
+++ b/demo/src/app/advanced/individual-column-filtering.component.spec.ts
@@ -0,0 +1,94 @@
+import { RouterTestingModule } from '@angular/router/testing';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
+import { NO_ERRORS_SCHEMA, SecurityContext } from '@angular/core';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { DataTableDirective, DataTablesModule } from 'angular-datatables';
+import { MarkdownModule } from 'ngx-markdown';
+import { BaseDemoComponent } from '../base-demo/base-demo.component';
+import { AppRoutingModule } from '../app.routing';
+import { By } from '@angular/platform-browser';
+import { FormsModule } from '@angular/forms';
+import { IndividualColumnFilteringComponent } from './individual-column-filtering.component';
+import { Api } from 'datatables.net';
+
+
+let fixture: ComponentFixture, component: null| IndividualColumnFilteringComponent = null;
+
+function applyValueToInput(inputElement: HTMLInputElement, value: string, table: Api) {
+ inputElement.value = value;
+ inputElement.dispatchEvent(new Event('input'));
+ inputElement.dispatchEvent(new Event('change'));
+ table.draw();
+}
+
+describe('IndividualColumnFilteringComponent', () => {
+ beforeEach(() => {
+ fixture = TestBed.configureTestingModule({
+ declarations: [
+ BaseDemoComponent,
+ IndividualColumnFilteringComponent,
+ DataTableDirective
+ ],
+ schemas: [NO_ERRORS_SCHEMA],
+ imports: [AppRoutingModule,
+ RouterTestingModule,
+ DataTablesModule,
+ MarkdownModule.forRoot({
+ sanitize: SecurityContext.NONE
+ }),
+ FormsModule],
+ providers: [provideHttpClient(withInterceptorsFromDi())]
+}).createComponent(IndividualColumnFilteringComponent);
+
+ component = fixture.componentInstance;
+
+ fixture.detectChanges(); // initial binding
+ });
+
+ it('should create the app', waitForAsync(() => {
+ const app = fixture.debugElement.componentInstance;
+ expect(app).toBeTruthy();
+ }));
+
+ it('should have title "Individual column searching"', waitForAsync(() => {
+ const app = fixture.debugElement.componentInstance as IndividualColumnFilteringComponent;
+ expect(app.pageTitle).toBe('Individual column searching');
+ }));
+
+ it('should filter contents acc. to column', async () => {
+ const app = fixture.componentInstance as IndividualColumnFilteringComponent;
+ app.dtOptions.paging = false;
+
+ await fixture.whenStable();
+
+ const query = fixture.debugElement.query(By.directive(DataTableDirective));
+ const dir = query.injector.get(DataTableDirective);
+ expect(dir).toBeTruthy();
+
+ const instance = await dir.dtInstance;
+
+ const inputFields = Array.from(fixture.nativeElement.querySelectorAll('input')) as HTMLInputElement[];
+ const inputFieldID = inputFields.find(e => e.name == "search-id")!;
+ const inputFieldFirstName = inputFields.find(e => e.name == "search-first-name")!;
+ const inputFieldLastName = inputFields.find(e => e.name == "search-last-name")!;
+
+ // # Test 1
+ applyValueToInput(inputFieldID, '113', instance);
+ expect(instance.rows({ page: 'current' }).count()).toBe(1);
+
+ // # Test 2
+
+ // reset prev. field
+ applyValueToInput(inputFieldID, '', instance);
+ applyValueToInput(inputFieldFirstName, 'Batman', instance);
+ expect(instance.rows({ page: 'current' }).count()).toBe(30);
+
+ // # Test 3
+ // reset prev. field
+ applyValueToInput(inputFieldFirstName, '', instance);
+ applyValueToInput(inputFieldLastName, 'Titi', instance);
+ expect(instance.rows({ page: 'current' }).count()).toBe(28);
+
+ });
+
+});
diff --git a/demo/src/app/advanced/individual-column-filtering.component.ts b/demo/src/app/advanced/individual-column-filtering.component.ts
index 8b0fe40d9..faad8e2a2 100644
--- a/demo/src/app/advanced/individual-column-filtering.component.ts
+++ b/demo/src/app/advanced/individual-column-filtering.component.ts
@@ -1,16 +1,25 @@
import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core';
import { DataTableDirective } from 'angular-datatables';
+import { Config } from 'datatables.net';
@Component({
- selector: 'app-individual-column-filtering',
- templateUrl: 'individual-column-filtering.component.html'
+ selector: 'app-individual-column-filtering',
+ templateUrl: 'individual-column-filtering.component.html',
+ standalone: false
})
export class IndividualColumnFilteringComponent implements OnInit, AfterViewInit {
- @ViewChild(DataTableDirective)
- datatableElement: DataTableDirective;
- dtOptions: DataTables.Settings = {};
+ pageTitle = 'Individual column searching';
+ mdIntro = 'assets/docs/advanced/indi-col-filter/intro.md';
+ mdHTML = 'assets/docs/advanced/indi-col-filter/source-html.md';
+ mdTS = 'assets/docs/advanced/indi-col-filter/source-ts.md';
+ mdTSV1 = 'assets/docs/advanced/indi-col-filter/source-ts-dtv1.md';
+
+ @ViewChild(DataTableDirective, {static: false})
+ datatableElement!: DataTableDirective;
+
+ dtOptions: Config = {};
ngOnInit(): void {
this.dtOptions = {
@@ -29,7 +38,7 @@ export class IndividualColumnFilteringComponent implements OnInit, AfterViewInit
}
ngAfterViewInit(): void {
- this.datatableElement.dtInstance.then((dtInstance: DataTables.Api) => {
+ this.datatableElement.dtInstance.then(dtInstance => {
dtInstance.columns().every(function () {
const that = this;
$('input', this.footer()).on('keyup change', function () {
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
deleted file mode 100644
index 8813407da..000000000
--- a/demo/src/app/advanced/load-dt-options-with-promise-snippet.component.ts
+++ /dev/null
@@ -1,83 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
- selector: 'app-load-dt-options-with-promise-snippet',
- template: `
-
-
-
-
-
-
-
-
-
-
-
-
- `
-})
-export class LoadDtOptionsWithPromiseSnippetComponent {
- htmlSnippet = `
-
-<table datatable [dtOptions]="dtOptions" class="row-border hover"></table>
-
- `;
-
- tsSnippet = `
-
-import { Component, Inject, OnInit } from '@angular/core';
-import { Http } from '@angular/http';
-
-import 'rxjs/add/operator/toPromise';
-
-@Component({
- selector: 'app-load-dt-options-with-promise',
- templateUrl: 'load-dt-options-with-promise.component.html'
-})
-export class LoadDtOptionsWithPromiseComponent implements OnInit {
- dtOptions: Promise<DataTables.Settings>;
-
- constructor(@Inject(Http) private http: Http) {}
-
- ngOnInit(): void {
- this.dtOptions = this.http.get('data/dtOptions.json')
- .toPromise()
- .then((response) => response.json())
- .catch(this.handleError);
- }
-
- private handleError(error: any): Promise<any> {
- console.error('An error occurred', error); // for demo purposes only
- return Promise.reject(error.message || error);
- }
-}
-
-
- `;
-
- dataSnippet = `
-
-{
- "ajax": "data/data.json",
- "displayLength": 2,
- "paginationType": "full_numbers",
- "columns": [
- {
- "data": "id",
- "title": "ID"
- },
- {
- "data": "firstName",
- "title": "First name"
- },
- {
- "data": "lastName",
- "title": "Last name",
- "visible": false
- }
- ]
-}
-
-`;
-}
diff --git a/demo/src/app/advanced/load-dt-options-with-promise.component.html b/demo/src/app/advanced/load-dt-options-with-promise.component.html
index 58bd8def7..0e8e5b210 100644
--- a/demo/src/app/advanced/load-dt-options-with-promise.component.html
+++ b/demo/src/app/advanced/load-dt-options-with-promise.component.html
@@ -1,33 +1,5 @@
-
-
-
-
-
-
- Sometimes, your DataTable options are stored or computed server side. All you need to do is to return the expected result as a promise.
-
-
-
-
-
-
-
-
+
+
+
+
diff --git a/demo/src/app/advanced/load-dt-options-with-promise.component.spec.ts b/demo/src/app/advanced/load-dt-options-with-promise.component.spec.ts
new file mode 100644
index 000000000..25122d5dd
--- /dev/null
+++ b/demo/src/app/advanced/load-dt-options-with-promise.component.spec.ts
@@ -0,0 +1,62 @@
+import { RouterTestingModule } from '@angular/router/testing';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
+import { NO_ERRORS_SCHEMA, SecurityContext } from '@angular/core';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { DataTableDirective, DataTablesModule } from 'angular-datatables';
+import { MarkdownModule } from 'ngx-markdown';
+import { BaseDemoComponent } from '../base-demo/base-demo.component';
+import { AppRoutingModule } from '../app.routing';
+import { By } from '@angular/platform-browser';
+import { FormsModule } from '@angular/forms';
+import { LoadDtOptionsWithPromiseComponent } from './load-dt-options-with-promise.component';
+
+
+let fixture: ComponentFixture, component: null| LoadDtOptionsWithPromiseComponent = null;
+
+describe('LoadDtOptionsWithPromiseComponent', () => {
+ beforeEach(() => {
+ fixture = TestBed.configureTestingModule({
+ declarations: [
+ BaseDemoComponent,
+ LoadDtOptionsWithPromiseComponent,
+ DataTableDirective
+ ],
+ schemas: [NO_ERRORS_SCHEMA],
+ imports: [AppRoutingModule,
+ RouterTestingModule,
+ DataTablesModule,
+ MarkdownModule.forRoot({
+ sanitize: SecurityContext.NONE
+ }),
+ FormsModule],
+ providers: [provideHttpClient(withInterceptorsFromDi())]
+}).createComponent(LoadDtOptionsWithPromiseComponent);
+
+ component = fixture.componentInstance;
+
+ fixture.detectChanges(); // initial binding
+ });
+
+ it('should create the app', waitForAsync(() => {
+ const app = fixture.debugElement.componentInstance;
+ expect(app).toBeTruthy();
+ }));
+
+ it('should have title "Load DT Options with Promise"', waitForAsync(() => {
+ const app = fixture.debugElement.componentInstance as LoadDtOptionsWithPromiseComponent;
+ expect(app.pageTitle).toBe('Load DT Options with Promise');
+ }));
+
+ it('should render table from dtOptions as a Promise', async () => {
+ const app = fixture.componentInstance as LoadDtOptionsWithPromiseComponent;
+ await fixture.whenStable();
+
+ const query = fixture.debugElement.query(By.directive(DataTableDirective));
+ const dir = query.injector.get(DataTableDirective);
+ expect(dir).toBeTruthy();
+
+ const instance = await dir.dtInstance;
+ expect(instance.rows().count()).toBeGreaterThan(0);
+ });
+
+});
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 980d53010..ab5ee47f8 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
@@ -1,21 +1,27 @@
import { Component, Inject, OnInit } from '@angular/core';
-import { Http } from '@angular/http';
-
-import 'rxjs/add/operator/toPromise';
+import { HttpClient } from '@angular/common/http';
+import { Config } from 'datatables.net';
@Component({
- selector: 'app-load-dt-options-with-promise',
- templateUrl: 'load-dt-options-with-promise.component.html'
+ selector: 'app-load-dt-options-with-promise',
+ templateUrl: 'load-dt-options-with-promise.component.html',
+ standalone: false
})
export class LoadDtOptionsWithPromiseComponent implements OnInit {
- dtOptions: Promise;
- constructor(@Inject(Http) private http: Http) {}
+ pageTitle = 'Load DT Options with Promise';
+ mdIntro = 'assets/docs/advanced/load-dt-opt-with-promise/intro.md';
+ mdHTML = 'assets/docs/advanced/load-dt-opt-with-promise/source-html.md';
+ mdTS = 'assets/docs/advanced/load-dt-opt-with-promise/source-ts.md';
+ mdTSV1 = 'assets/docs/advanced/load-dt-opt-with-promise/source-ts-dtv1.md';
+
+ dtOptions!: Promise;
+
+ constructor(@Inject(HttpClient) private httpClient: HttpClient) {}
ngOnInit(): void {
- this.dtOptions = this.http.get('data/dtOptions.json')
+ this.dtOptions = this.httpClient.get('data/dtOptions.json')
.toPromise()
- .then((response) => response.json())
.catch(this.handleError);
}
diff --git a/demo/src/app/advanced/multiple-tables-snippet.component.ts b/demo/src/app/advanced/multiple-tables-snippet.component.ts
deleted file mode 100644
index 48c8f6646..000000000
--- a/demo/src/app/advanced/multiple-tables-snippet.component.ts
+++ /dev/null
@@ -1,77 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
- selector: 'app-multiple-tables-snippet',
- template: `
-
-
-
-
-
-
-
-
- `
-})
-export class MultipleTablesSnippetComponent {
- htmlSnippet = `
-
-<p>
-<button type="button" class="btn waves-effect waves-light blue" (click)="displayToConsole()">
- Display the DataTable instances in the console
-</button>
-</p>
-<table id="first-table" datatable [dtOptions]="dtOptions[0]" class="row-border hover"></table>
-<table id="second-table" datatable [dtOptions]="dtOptions[1]" class="row-border hover"></table>
-
- `;
-
- tsSnippet = `
-
-import { Component, OnInit, QueryList, ViewChildren } from '@angular/core';
-
-import { DataTableDirective } from 'angular-datatables';
-
-@Component({
- selector: 'app-multiple-tables',
- templateUrl: 'multiple-tables.component.html'
-})
-export class MultipleTablesComponent implements OnInit {
- @ViewChildren(DataTableDirective)
- dtElements: QueryList;
-
- dtOptions: DataTables.Settings[] = [];
-
- 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}\`);
- });
- });
- }
-
- ngOnInit(): void {
- this.dtOptions[0] = this.buildDtOptions('data/data.json');
- this.dtOptions[1] = this.buildDtOptions('data/data1.json');
- }
-
- private buildDtOptions(url: string): DataTables.Settings {
- return {
- ajax: url,
- columns: [{
- title: 'ID',
- data: 'id'
- }, {
- title: 'First name',
- data: 'firstName'
- }, {
- title: 'Last name',
- data: 'lastName'
- }]
- };
- }
-}
-
-
- `;
-}
diff --git a/demo/src/app/advanced/multiple-tables.component.html b/demo/src/app/advanced/multiple-tables.component.html
index a96425ffb..3c99c4010 100644
--- a/demo/src/app/advanced/multiple-tables.component.html
+++ b/demo/src/app/advanced/multiple-tables.component.html
@@ -1,38 +1,15 @@
-
-
-
-
-
-
- You can display multiple datatables in the same page.
-
-
-
-
-
-
- Display the DataTable instances in the console
-
-
-
-
-
-
-
-
-
-
+
+
+ Display the DataTable instances in the console
+
+
+
+
+
+
+
+
+
+
+
diff --git a/demo/src/app/advanced/multiple-tables.component.spec.ts b/demo/src/app/advanced/multiple-tables.component.spec.ts
new file mode 100644
index 000000000..3806b2058
--- /dev/null
+++ b/demo/src/app/advanced/multiple-tables.component.spec.ts
@@ -0,0 +1,57 @@
+import { RouterTestingModule } from '@angular/router/testing';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
+import { NO_ERRORS_SCHEMA, QueryList, SecurityContext } from '@angular/core';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { DataTableDirective, DataTablesModule } from 'angular-datatables';
+import { MarkdownModule } from 'ngx-markdown';
+import { BaseDemoComponent } from '../base-demo/base-demo.component';
+import { AppRoutingModule } from '../app.routing';
+import { By } from '@angular/platform-browser';
+import { FormsModule } from '@angular/forms';
+import { MultipleTablesComponent } from './multiple-tables.component';
+
+
+let fixture: ComponentFixture, component: null| MultipleTablesComponent = null;
+
+describe('MultipleTablesComponent', () => {
+ beforeEach(() => {
+ fixture = TestBed.configureTestingModule({
+ declarations: [
+ BaseDemoComponent,
+ MultipleTablesComponent,
+ DataTableDirective
+ ],
+ schemas: [NO_ERRORS_SCHEMA],
+ imports: [AppRoutingModule,
+ RouterTestingModule,
+ DataTablesModule,
+ MarkdownModule.forRoot({
+ sanitize: SecurityContext.NONE
+ }),
+ FormsModule],
+ providers: [provideHttpClient(withInterceptorsFromDi())]
+}).createComponent(MultipleTablesComponent);
+
+ component = fixture.componentInstance;
+
+ fixture.detectChanges(); // initial binding
+ });
+
+ it('should create the app', waitForAsync(() => {
+ const app = fixture.debugElement.componentInstance;
+ expect(app).toBeTruthy();
+ }));
+
+ it('should have title "Multiple tables in the same page"', waitForAsync(() => {
+ const app = fixture.debugElement.componentInstance as MultipleTablesComponent;
+ expect(app.pageTitle).toBe('Multiple tables in the same page');
+ }));
+
+ it('should have two table instances in dtElements', async () => {
+ const app = fixture.componentInstance as MultipleTablesComponent;
+ await fixture.whenStable();
+
+ expect(app.dtElements.length).toBe(2);
+ });
+
+});
diff --git a/demo/src/app/advanced/multiple-tables.component.ts b/demo/src/app/advanced/multiple-tables.component.ts
index c0d30a1e7..8e16c1a62 100644
--- a/demo/src/app/advanced/multiple-tables.component.ts
+++ b/demo/src/app/advanced/multiple-tables.component.ts
@@ -1,16 +1,24 @@
import { Component, OnInit, QueryList, ViewChildren } from '@angular/core';
-
import { DataTableDirective } from 'angular-datatables';
+import { Config } from 'datatables.net';
@Component({
- selector: 'app-multiple-tables',
- templateUrl: 'multiple-tables.component.html'
+ selector: 'app-multiple-tables',
+ templateUrl: 'multiple-tables.component.html',
+ standalone: false
})
export class MultipleTablesComponent implements OnInit {
+
+ pageTitle = 'Multiple tables in the same page';
+ mdIntro = 'assets/docs/advanced/multiple-tables/intro.md';
+ mdHTML = 'assets/docs/advanced/multiple-tables/source-html.md';
+ mdTS = 'assets/docs/advanced/multiple-tables/source-ts.md';
+ mdTSV1 = 'assets/docs/advanced/multiple-tables/source-ts-dtv1.md';
+
@ViewChildren(DataTableDirective)
- dtElements: QueryList;
+ dtElements!: QueryList;
- dtOptions: DataTables.Settings[] = [];
+ dtOptions: Config[] = [];
displayToConsole(): void {
this.dtElements.forEach((dtElement: DataTableDirective, index: number) => {
@@ -25,7 +33,7 @@ export class MultipleTablesComponent implements OnInit {
this.dtOptions[1] = this.buildDtOptions('data/data1.json');
}
- private buildDtOptions(url: string): DataTables.Settings {
+ private buildDtOptions(url: string): Config {
return {
ajax: url,
columns: [{
diff --git a/demo/src/app/advanced/rerender-snippet.component.ts b/demo/src/app/advanced/rerender-snippet.component.ts
deleted file mode 100644
index 98979c7d0..000000000
--- a/demo/src/app/advanced/rerender-snippet.component.ts
+++ /dev/null
@@ -1,82 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
- selector: 'app-rerender-snippet',
- template: `
-
-
-
-
-
-
-
-
- `
-})
-export class RerenderSnippetComponent {
- htmlSnippet = `
-
-<p>
- <button type="button" class="btn waves-effect waves-light blue" (click)="rerender()">
- Rerender
- </button>
-</p>
-<table datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="row-border hover"></table>
-
- `;
-
- tsSnippet = `
-
-import { AfterViewInit, Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
-import { DataTableDirective } from 'angular-datatables';
-import { Subject } from 'rxjs';
-
-@Component({
- selector: 'app-rerender',
- templateUrl: 'rerender.component.html'
-})
-export class RerenderComponent implements AfterViewInit, OnDestroy, OnInit {
- @ViewChild(DataTableDirective)
- dtElement: DataTableDirective;
-
- dtOptions: DataTables.Settings = {};
-
- dtTrigger: Subject = new Subject();
-
- ngOnInit(): void {
- this.dtOptions = {
- ajax: 'data/data.json',
- columns: [{
- title: 'ID',
- data: 'id'
- }, {
- title: 'First name',
- data: 'firstName'
- }, {
- title: 'Last name',
- data: 'lastName'
- }]
- };
- }
-
- ngAfterViewInit(): void {
- this.dtTrigger.next();
- }
-
- ngOnDestroy(): void {
- // Do not forget to unsubscribe the event
- this.dtTrigger.unsubscribe();
- }
-
- rerender(): void {
- this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
- // Destroy the table first
- dtInstance.destroy();
- // Call the dtTrigger to rerender again
- this.dtTrigger.next();
- });
- }
-}
-
- `;
-}
diff --git a/demo/src/app/advanced/rerender.component.html b/demo/src/app/advanced/rerender.component.html
index df82db930..0947e0375 100644
--- a/demo/src/app/advanced/rerender.component.html
+++ b/demo/src/app/advanced/rerender.component.html
@@ -1,38 +1,10 @@
-
-
-
-
-
-
- For some cases, you may need to rerender your table. You can use the DataTable destroy() API to remove the table and re-use the dtTrigger to render the table again.
-
-
-
-
-
-
-
-
-
+
+
+ Rerender
+
+
+
+
+
+
diff --git a/demo/src/app/advanced/rerender.component.spec.ts b/demo/src/app/advanced/rerender.component.spec.ts
new file mode 100644
index 000000000..c68c42a04
--- /dev/null
+++ b/demo/src/app/advanced/rerender.component.spec.ts
@@ -0,0 +1,64 @@
+import { RouterTestingModule } from '@angular/router/testing';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
+import { NO_ERRORS_SCHEMA, SecurityContext } from '@angular/core';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { DataTableDirective, DataTablesModule } from 'angular-datatables';
+import { MarkdownModule } from 'ngx-markdown';
+import { BaseDemoComponent } from '../base-demo/base-demo.component';
+import { AppRoutingModule } from '../app.routing';
+import { FormsModule } from '@angular/forms';
+import { RerenderComponent } from './rerender.component';
+
+
+let fixture: ComponentFixture, component: null| RerenderComponent = null;
+
+describe('RerenderComponent', () => {
+ beforeEach(() => {
+ fixture = TestBed.configureTestingModule({
+ declarations: [
+ BaseDemoComponent,
+ RerenderComponent,
+ DataTableDirective
+ ],
+ schemas: [NO_ERRORS_SCHEMA],
+ imports: [AppRoutingModule,
+ RouterTestingModule,
+ DataTablesModule,
+ MarkdownModule.forRoot({
+ sanitize: SecurityContext.NONE
+ }),
+ FormsModule],
+ providers: [provideHttpClient(withInterceptorsFromDi())]
+}).createComponent(RerenderComponent);
+
+ component = fixture.componentInstance;
+
+ fixture.detectChanges(); // initial binding
+ });
+
+ it('should create the app', waitForAsync(() => {
+ const app = fixture.debugElement.componentInstance;
+ expect(app).toBeTruthy();
+ }));
+
+ it('should have title "Rerender"', waitForAsync(() => {
+ const app = fixture.debugElement.componentInstance as RerenderComponent;
+ expect(app.pageTitle).toBe('Rerender');
+ }));
+
+ it('should recreate table when Rerender is clicked', async () => {
+ const app = fixture.componentInstance as RerenderComponent;
+ await fixture.whenStable();
+
+ const rerenderSpy = spyOn(app, 'rerender' as any);
+
+ const triggerBtns = Array.from(fixture.nativeElement.querySelectorAll('button')) as HTMLButtonElement[];
+ const triggerBtn = triggerBtns.find(e => e.textContent?.includes('Rerender')) as HTMLButtonElement;
+
+ triggerBtn.click();
+ triggerBtn.dispatchEvent(new Event('click'));
+
+ expect(rerenderSpy).toHaveBeenCalled();
+ });
+
+});
diff --git a/demo/src/app/advanced/rerender.component.ts b/demo/src/app/advanced/rerender.component.ts
index 5b2080c7b..5a85ff5db 100644
--- a/demo/src/app/advanced/rerender.component.ts
+++ b/demo/src/app/advanced/rerender.component.ts
@@ -1,16 +1,26 @@
import { AfterViewInit, Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
import { DataTableDirective } from 'angular-datatables';
+import { Config } from 'datatables.net';
import { Subject } from 'rxjs';
@Component({
- selector: 'app-rerender',
- templateUrl: 'rerender.component.html'
+ selector: 'app-rerender',
+ templateUrl: 'rerender.component.html',
+ standalone: false
})
export class RerenderComponent implements AfterViewInit, OnDestroy, OnInit {
- @ViewChild(DataTableDirective)
- dtElement: DataTableDirective;
- dtOptions: DataTables.Settings = {};
+ pageTitle = 'Rerender';
+ mdIntro = 'assets/docs/advanced/rerender/intro.md';
+ mdHTML = 'assets/docs/advanced/rerender/source-html.md';
+ mdTS = 'assets/docs/advanced/rerender/source-ts.md';
+ mdTSV1 = 'assets/docs/advanced/rerender/source-ts-dtv1.md';
+
+
+ @ViewChild(DataTableDirective, {static: false})
+ dtElement!: DataTableDirective;
+
+ dtOptions: Config = {};
dtTrigger: Subject = new Subject();
@@ -31,7 +41,7 @@ export class RerenderComponent implements AfterViewInit, OnDestroy, OnInit {
}
ngAfterViewInit(): void {
- this.dtTrigger.next();
+ this.dtTrigger.next(null);
}
ngOnDestroy(): void {
@@ -40,11 +50,11 @@ export class RerenderComponent implements AfterViewInit, OnDestroy, OnInit {
}
rerender(): void {
- this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
+ this.dtElement.dtInstance.then(dtInstance => {
// Destroy the table first
dtInstance.destroy();
// Call the dtTrigger to rerender again
- this.dtTrigger.next();
+ this.dtTrigger.next(null);
});
}
}
diff --git a/demo/src/app/advanced/router-link-snippet.component.ts b/demo/src/app/advanced/router-link-snippet.component.ts
deleted file mode 100644
index f9af2eab3..000000000
--- a/demo/src/app/advanced/router-link-snippet.component.ts
+++ /dev/null
@@ -1,69 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
- selector: 'app-router-link-snippet',
- template: `
-
-
-
-
-
-
-
-
- `
-})
-export class RouterLinkSnippetComponent {
- htmlSnippet = `
-
-
-<table datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="row-border hover"></table>
-
- `;
-
- tsSnippet = `
-
-import { AfterViewInit, Component, OnInit, Renderer } from '@angular/core';
-import { Router } from '@angular/router';
-
-@Component({
- selector: 'app-router-link',
- templateUrl: 'router-link.component.html'
-})
-export class RouterLinkComponent implements AfterViewInit, OnInit {
- dtOptions: DataTables.Settings = {};
-
- constructor(private renderer: Renderer, private router: Router) { }
-
- ngOnInit(): void {
- this.dtOptions = {
- ajax: 'data/data.json',
- columns: [{
- title: 'ID',
- data: 'id'
- }, {
- title: 'First name',
- data: 'firstName'
- }, {
- title: 'Last name',
- data: 'lastName'
- }, {
- title: 'Action',
- render: function (data: any, type: any, full: any) {
- return 'View ';
- }
- }]
- };
- }
-
- ngAfterViewInit(): void {
- this.renderer.listenGlobal('document', 'click', (event) => {
- if (event.target.hasAttribute("view-person-id")) {
- this.router.navigate(["/person/" + event.target.getAttribute("view-person-id")]);
- }
- });
- }
-}
-
- `;
-}
diff --git a/demo/src/app/advanced/router-link.component.html b/demo/src/app/advanced/router-link.component.html
index 269b3142d..8cff803fa 100644
--- a/demo/src/app/advanced/router-link.component.html
+++ b/demo/src/app/advanced/router-link.component.html
@@ -1,32 +1,10 @@
-
-
-
-
-
-
- You can attach the router links to the buttons.
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
diff --git a/demo/src/app/advanced/router-link.component.spec.ts b/demo/src/app/advanced/router-link.component.spec.ts
new file mode 100644
index 000000000..6867212f4
--- /dev/null
+++ b/demo/src/app/advanced/router-link.component.spec.ts
@@ -0,0 +1,70 @@
+import { RouterTestingModule } from '@angular/router/testing';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
+import { NO_ERRORS_SCHEMA, SecurityContext } from '@angular/core';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { DataTableDirective, DataTablesModule } from 'angular-datatables';
+import { MarkdownModule } from 'ngx-markdown';
+import { BaseDemoComponent } from '../base-demo/base-demo.component';
+import { AppRoutingModule } from '../app.routing';
+import { FormsModule } from '@angular/forms';
+import { RouterLinkComponent } from './router-link.component';
+import { Router } from '@angular/router';
+import { By } from '@angular/platform-browser';
+import { DemoNgComponent } from './demo-ng-template-ref.component';
+
+
+let fixture: ComponentFixture, component: null| RouterLinkComponent = null, router!: Router;
+
+describe('RouterLinkComponent', () => {
+ beforeEach(() => {
+ fixture = TestBed.configureTestingModule({
+ declarations: [
+ BaseDemoComponent,
+ DemoNgComponent,
+ RouterLinkComponent,
+ DataTableDirective
+ ],
+ schemas: [NO_ERRORS_SCHEMA],
+ imports: [AppRoutingModule,
+ RouterTestingModule,
+ DataTablesModule,
+ MarkdownModule.forRoot({
+ sanitize: SecurityContext.NONE
+ }),
+ FormsModule],
+ providers: [provideHttpClient(withInterceptorsFromDi())]
+}).createComponent(RouterLinkComponent);
+
+ component = fixture.componentInstance;
+ router = TestBed.inject(Router);
+
+ fixture.detectChanges(); // initial binding
+ });
+
+ it('should create the app', waitForAsync(() => {
+ const app = fixture.debugElement.componentInstance;
+ expect(app).toBeTruthy();
+ }));
+
+ it('should have title "Router Link"', waitForAsync(() => {
+ const app = fixture.debugElement.componentInstance as RouterLinkComponent;
+ expect(app.pageTitle).toBe('Router Link');
+ }));
+
+ it('should respond to button click event inside TemplateRef', async () => {
+ await fixture.whenStable();
+
+ const query = fixture.debugElement.query(By.directive(DataTableDirective));
+ const dir = query.injector.get(DataTableDirective);
+ expect(dir).toBeTruthy();
+
+ const rSpy = spyOn(router, 'navigate');
+
+ const row: HTMLTableRowElement = fixture.nativeElement.querySelector('tbody tr:first-child');
+ const button = row.querySelector('button.btn-sm') as HTMLButtonElement;
+ button.click();
+
+ expect(rSpy).toHaveBeenCalled();
+ });
+
+});
diff --git a/demo/src/app/advanced/router-link.component.ts b/demo/src/app/advanced/router-link.component.ts
index c3a30be82..f32344ed9 100644
--- a/demo/src/app/advanced/router-link.component.ts
+++ b/demo/src/app/advanced/router-link.component.ts
@@ -1,41 +1,77 @@
-import { AfterViewInit, Component, OnInit, Renderer } from '@angular/core';
+import { AfterViewInit, Component, OnDestroy, OnInit, TemplateRef, ViewChild } from '@angular/core';
import { Router } from '@angular/router';
+import { Subject } from 'rxjs';
+import { IDemoNgComponentEventType } from './demo-ng-template-ref-event-type';
+import { DemoNgComponent } from './demo-ng-template-ref.component';
+import { ADTSettings } from 'angular-datatables/src/models/settings';
@Component({
- selector: 'app-router-link',
- templateUrl: 'router-link.component.html'
+ selector: 'app-router-link',
+ templateUrl: 'router-link.component.html',
+ standalone: false
})
-export class RouterLinkComponent implements AfterViewInit, OnInit {
- dtOptions: DataTables.Settings = {};
+export class RouterLinkComponent implements AfterViewInit, OnInit, OnDestroy {
- constructor(private renderer: Renderer, private router: Router) { }
+ pageTitle = 'Router Link';
+ mdIntro = 'assets/docs/advanced/router-link/intro.md';
+ mdHTML = 'assets/docs/advanced/router-link/source-html.md';
+ mdTSV1 = 'assets/docs/advanced/router-link/source-ts-dtv1.md';
+ mdTS = 'assets/docs/advanced/router-link/source-ts.md';
+ mdTSHeading = 'TypeScript';
+
+ dtOptions: ADTSettings = {};
+ dtTrigger = new Subject();
+
+ @ViewChild('demoNg') demoNg!: TemplateRef;
+
+ constructor(
+ private router: Router
+ ) { }
ngOnInit(): void {
+ }
+
+ ngAfterViewInit() {
+ const self = this;
+ // init here as we use ViewChild ref
this.dtOptions = {
ajax: 'data/data.json',
- columns: [{
- title: 'ID',
- data: 'id'
- }, {
- title: 'First name',
- data: 'firstName'
- }, {
- title: 'Last name',
- data: 'lastName'
- }, {
- title: 'Action',
- render: function (data: any, type: any, full: any) {
- return 'View ';
+ columns: [
+ {
+ title: 'ID',
+ data: 'id'
+ }, {
+ title: 'First name',
+ data: 'firstName'
+ }, {
+ title: 'Last name',
+ data: 'lastName'
+ },
+ {
+ title: 'Action',
+ defaultContent: '',
+ ngTemplateRef: {
+ ref: this.demoNg,
+ context: {
+ // needed for capturing events inside
+ captureEvents: self.onCaptureEvent.bind(self)
+ }
+ }
}
- }]
+ ]
};
+
+ // race condition fails unit tests if dtOptions isn't sent with dtTrigger
+ setTimeout(() => {
+ this.dtTrigger.next(this.dtOptions);
+ }, 200);
+ }
+
+ onCaptureEvent(event: IDemoNgComponentEventType) {
+ this.router.navigate(["/person/" + event.data.id]);
}
- ngAfterViewInit(): void {
- this.renderer.listenGlobal('document', 'click', (event) => {
- if (event.target.hasAttribute("view-person-id")) {
- this.router.navigate(["/person/" + event.target.getAttribute("view-person-id")]);
- }
- });
+ ngOnDestroy(): void {
+ this.dtTrigger?.unsubscribe();
}
}
diff --git a/demo/src/app/advanced/row-click-event-snippet.component.ts b/demo/src/app/advanced/row-click-event-snippet.component.ts
deleted file mode 100644
index 493761d32..000000000
--- a/demo/src/app/advanced/row-click-event-snippet.component.ts
+++ /dev/null
@@ -1,72 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
- selector: 'app-row-click-event-snippet',
- template: `
-
-
-
-
-
-
-
-
- `
-})
-export class RowClickEventSnippetComponent {
- htmlSnippet = `
-
-<blockquote>Please click on a row</blockquote>
-<p class="text-danger">You clicked on: <strong>{{ message }}</strong></p>
-<br />
-<table datatable [dtOptions]="dtOptions" class="row-border hover"></table>
-
- `;
-
- tsSnippet = `
-
-import { Component, OnInit } from '@angular/core';
-
-@Component({
- selector: 'row-click-event',
- templateUrl: 'row-click-event.component.html'
-})
-export class RowClickEventComponent implements OnInit {
- message = '';
- dtOptions: DataTables.Settings = {};
-
- constructor() { }
-
- someClickHandler(info: any): void {
- this.message = info.id + ' - ' + info.firstName;
- }
-
- ngOnInit(): void {
- this.dtOptions = {
- ajax: 'data/data.json',
- columns: [{
- title: 'ID',
- data: 'id'
- }, {
- title: 'First name',
- data: 'firstName'
- }, {
- title: 'Last name',
- data: 'lastName'
- }],
- 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', row).unbind('click');
- $('td', row).bind('click', () => {
- self.someClickHandler(data);
- });
- return row;
- }
- };
- }
-}
-
- `;
-}
diff --git a/demo/src/app/advanced/row-click-event.component.html b/demo/src/app/advanced/row-click-event.component.html
index e4bdc2171..d1d15f2a2 100644
--- a/demo/src/app/advanced/row-click-event.component.html
+++ b/demo/src/app/advanced/row-click-event.component.html
@@ -1,35 +1,8 @@
-
-
-
-
-
-
- Simple example to bind a click event on each row of the DataTable with the help of rowCallback .
-
-
-
-
-
Please click on a row
-
You clicked on: {{ message }}
-
-
-
-
-
-
-
-
+Please click on a row
+You clicked on: {{ message }}
+
+
+
diff --git a/demo/src/app/advanced/row-click-event.component.spec.ts b/demo/src/app/advanced/row-click-event.component.spec.ts
new file mode 100644
index 000000000..f770c82a5
--- /dev/null
+++ b/demo/src/app/advanced/row-click-event.component.spec.ts
@@ -0,0 +1,69 @@
+import { RouterTestingModule } from '@angular/router/testing';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
+import { NO_ERRORS_SCHEMA, SecurityContext } from '@angular/core';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { DataTableDirective, DataTablesModule } from 'angular-datatables';
+import { MarkdownModule } from 'ngx-markdown';
+import { BaseDemoComponent } from '../base-demo/base-demo.component';
+import { AppRoutingModule } from '../app.routing';
+import { FormsModule } from '@angular/forms';
+import { RowClickEventComponent } from './row-click-event.component';
+
+
+let fixture: ComponentFixture, component: null| RowClickEventComponent = null;
+
+describe('RowClickEventComponent', () => {
+ beforeEach(() => {
+ fixture = TestBed.configureTestingModule({
+ declarations: [
+ BaseDemoComponent,
+ RowClickEventComponent,
+ DataTableDirective
+ ],
+ schemas: [NO_ERRORS_SCHEMA],
+ imports: [AppRoutingModule,
+ RouterTestingModule,
+ DataTablesModule,
+ MarkdownModule.forRoot({
+ sanitize: SecurityContext.NONE
+ }),
+ FormsModule],
+ providers: [provideHttpClient(withInterceptorsFromDi())]
+}).createComponent(RowClickEventComponent);
+
+ component = fixture.componentInstance;
+
+ fixture.detectChanges(); // initial binding
+ });
+
+ it('should create the app', waitForAsync(() => {
+ const app = fixture.debugElement.componentInstance;
+ expect(app).toBeTruthy();
+ }));
+
+ it('should have title "Row click event"', waitForAsync(() => {
+ const app = fixture.debugElement.componentInstance as RowClickEventComponent;
+ expect(app.pageTitle).toBe('Row click event');
+ }));
+
+ it('should display row data on table cell click', async () => {
+ const app = fixture.debugElement.componentInstance as RowClickEventComponent;
+ await fixture.whenStable();
+
+ // Test
+ const tr1 = fixture.nativeElement.querySelector('tbody tr:nth-child(1)');
+ $('td:first-child', tr1).trigger('click');
+ expect(app.message).toBe('3 - Cartman');
+
+ // Test 2
+ const tr4 = fixture.nativeElement.querySelector('tbody tr:nth-child(4)');
+ $('td:first-child', tr4).trigger('click');
+ expect(app.message).toBe('22 - Luke');
+
+ // Test 3
+ const tr7 = fixture.nativeElement.querySelector('tbody tr:nth-child(7)');
+ $('td:first-child', tr7).trigger('click');
+ expect(app.message).toBe('32 - Batman');
+ });
+
+});
diff --git a/demo/src/app/advanced/row-click-event.component.ts b/demo/src/app/advanced/row-click-event.component.ts
index 249c7182a..447da5503 100644
--- a/demo/src/app/advanced/row-click-event.component.ts
+++ b/demo/src/app/advanced/row-click-event.component.ts
@@ -1,12 +1,21 @@
import { Component, OnInit } from '@angular/core';
+import { Config } from 'datatables.net';
@Component({
- selector: 'app-row-click-event',
- templateUrl: 'row-click-event.component.html'
+ selector: 'app-row-click-event',
+ templateUrl: 'row-click-event.component.html',
+ standalone: false
})
export class RowClickEventComponent implements OnInit {
+
+ pageTitle = 'Row click event';
+ mdIntro = 'assets/docs/advanced/row-click/intro.md';
+ mdHTML = 'assets/docs/advanced/row-click/source-html.md';
+ mdTS = 'assets/docs/advanced/row-click/source-ts.md';
+ mdTSV1 = 'assets/docs/advanced/row-click/source-ts-dtv1.md';
+
message = '';
- dtOptions: DataTables.Settings = {};
+ dtOptions: Config = {};
constructor() { }
@@ -31,8 +40,10 @@ export class RowClickEventComponent implements OnInit {
const self = this;
// Unbind first in order to avoid any duplicate handler
// (see https://github.com/l-lin/angular-datatables/issues/87)
- $('td', row).unbind('click');
- $('td', row).bind('click', () => {
+ // Note: In newer jQuery v3 versions, `unbind` and `bind` are
+ // deprecated in favor of `off` and `on`
+ $('td', row).off('click');
+ $('td', row).on('click', () => {
self.someClickHandler(data);
});
return row;
diff --git a/demo/src/app/advanced/using-ng-pipe.component.html b/demo/src/app/advanced/using-ng-pipe.component.html
new file mode 100644
index 000000000..b24f96867
--- /dev/null
+++ b/demo/src/app/advanced/using-ng-pipe.component.html
@@ -0,0 +1,5 @@
+
+
+
+
+
diff --git a/demo/src/app/advanced/using-ng-pipe.component.spec.ts b/demo/src/app/advanced/using-ng-pipe.component.spec.ts
new file mode 100644
index 000000000..86ec17dad
--- /dev/null
+++ b/demo/src/app/advanced/using-ng-pipe.component.spec.ts
@@ -0,0 +1,131 @@
+import { RouterTestingModule } from '@angular/router/testing';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
+import { NO_ERRORS_SCHEMA, SecurityContext } from '@angular/core';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { DataTableDirective, DataTablesModule } from 'angular-datatables';
+import { MarkdownModule } from 'ngx-markdown';
+import { BaseDemoComponent } from '../base-demo/base-demo.component';
+import { AppRoutingModule } from '../app.routing';
+import { FormsModule } from '@angular/forms';
+import { UsingNgPipeComponent } from './using-ng-pipe.component';
+import { UpperCasePipe, CurrencyPipe } from '@angular/common';
+import { By } from '@angular/platform-browser';
+import { Person } from 'app/person';
+
+
+let fixture: ComponentFixture, component: null| UsingNgPipeComponent = null;
+
+describe('UsingNgPipeComponent', () => {
+ beforeEach(() => {
+ fixture = TestBed.configureTestingModule({
+ declarations: [
+ BaseDemoComponent,
+ UsingNgPipeComponent,
+ DataTableDirective
+ ],
+ schemas: [NO_ERRORS_SCHEMA],
+ imports: [AppRoutingModule,
+ RouterTestingModule,
+ DataTablesModule,
+ MarkdownModule.forRoot({
+ sanitize: SecurityContext.NONE
+ }),
+ FormsModule],
+ providers: [
+ UpperCasePipe,
+ CurrencyPipe,
+ provideHttpClient(withInterceptorsFromDi())
+ ]
+}).createComponent(UsingNgPipeComponent);
+
+ component = fixture.componentInstance;
+
+ fixture.detectChanges(); // initial binding
+ });
+
+ it('should create the app', waitForAsync(() => {
+ const app = fixture.debugElement.componentInstance;
+ expect(app).toBeTruthy();
+ }));
+
+ it('should have title "Using Angular Pipe"', waitForAsync(() => {
+ const app = fixture.debugElement.componentInstance as UsingNgPipeComponent;
+ expect(app.pageTitle).toBe('Using Angular Pipe');
+ }));
+
+ it('should have firstName, lastName columns have text in uppercase', async () => {
+ const app = fixture.debugElement.componentInstance as UsingNgPipeComponent;
+ await fixture.whenStable();
+
+ const query = fixture.debugElement.query(By.directive(DataTableDirective));
+ const dir = query.injector.get(DataTableDirective);
+ expect(dir).toBeTruthy();
+
+ const instance = await dir.dtInstance;
+
+ const rows = fixture.nativeElement.querySelectorAll('tbody tr');
+
+ const testsArray = [0, 3, 6];
+ const expectedArray = testsArray.map(_ => true);
+
+ expect(testsArray.map(index => {
+ const dataRow = rows[index];
+
+ const firstNameFromData = (instance.row(dataRow).data() as Person).firstName;
+ const firstNameFromTable = $('td:nth-child(2)', dataRow).text();
+
+ const lastNameFromData = (instance.row(dataRow).data() as Person).lastName;
+ const lastNameFromTable = $('td:nth-child(3)', dataRow).text();
+ return firstNameFromTable === firstNameFromData.toUpperCase() && lastNameFromTable === lastNameFromData.toUpperCase();
+ }))
+ .toEqual(expectedArray);
+ });
+
+
+ it('should have money on id column', async () => {
+ const app = fixture.debugElement.componentInstance as UsingNgPipeComponent;
+ await fixture.whenStable();
+
+ const query = fixture.debugElement.query(By.directive(DataTableDirective));
+ const dir = query.injector.get(DataTableDirective);
+ expect(dir).toBeTruthy();
+
+ const instance = await dir.dtInstance;
+
+ const rows = fixture.nativeElement.querySelectorAll('tbody tr');
+
+ const testsArray = [0, 3, 6];
+ const expectedArray = testsArray.map(_ => true);
+
+ expect(testsArray.map(index => {
+ const dataRow = rows[index];
+
+ const pipeInstance = app.pipeCurrencyInstance;
+
+ const IdFromData = (instance.row(dataRow).data() as Person).id;
+ const IdFromTable = $('td:nth-child(1)', dataRow).text();
+ return IdFromTable === pipeInstance.transform(IdFromData,'USD','symbol');
+ }))
+ .toEqual(expectedArray);
+ });
+
+
+ it('should not crash when using "visible: false" for columns', async () => {
+ await fixture.whenStable();
+ fixture.detectChanges();
+
+ const query = fixture.debugElement.query(By.directive(DataTableDirective));
+ const dir = query.injector.get(DataTableDirective);
+ expect(dir).toBeTruthy();
+
+ // hide first column
+ (await dir.dtInstance).columns(0).visible(false);
+ await fixture.whenRenderingDone();
+
+ fixture.detectChanges();
+
+ // verify app still works
+ expect((await dir.dtInstance).column(0).visible()).toBeFalse();
+ });
+
+});
diff --git a/demo/src/app/advanced/using-ng-pipe.component.ts b/demo/src/app/advanced/using-ng-pipe.component.ts
new file mode 100644
index 000000000..337a2a169
--- /dev/null
+++ b/demo/src/app/advanced/using-ng-pipe.component.ts
@@ -0,0 +1,52 @@
+import { CurrencyPipe, 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',
+ standalone: false
+})
+export class UsingNgPipeComponent implements OnInit {
+
+ constructor(
+ private pipeInstance: UpperCasePipe,
+ public pipeCurrencyInstance: CurrencyPipe
+ ) { }
+
+ pageTitle = 'Using Angular Pipe';
+ mdIntro = 'assets/docs/advanced/using-ng-pipe/intro.md';
+ mdHTML = 'assets/docs/advanced/using-ng-pipe/source-html.md';
+ mdTSV1 = 'assets/docs/advanced/using-ng-pipe/source-ts-dtv1.md';
+ mdTS = 'assets/docs/advanced/using-ng-pipe/source-ts.md';
+
+
+ dtOptions: ADTSettings = {};
+
+ ngOnInit(): void {
+
+ this.dtOptions = {
+ ajax: 'data/data.json',
+ columns: [
+ {
+ title: 'Id (Money)',
+ data: 'id',
+ ngPipeInstance: this.pipeCurrencyInstance,
+ ngPipeArgs: ['USD','symbol']
+ },
+ {
+ title: 'First name',
+ data: 'firstName',
+ ngPipeInstance: this.pipeInstance
+ },
+ {
+ title: 'Last name',
+ data: 'lastName',
+ ngPipeInstance: this.pipeInstance
+ }
+ ]
+ };
+
+ }
+
+}
diff --git a/demo/src/app/advanced/using-ng-template-ref.component.html b/demo/src/app/advanced/using-ng-template-ref.component.html
new file mode 100644
index 000000000..321058603
--- /dev/null
+++ b/demo/src/app/advanced/using-ng-template-ref.component.html
@@ -0,0 +1,13 @@
+
+ Please click on Action button
+ You clicked on: {{ message }}
+
+
+
+
+
+
+
diff --git a/demo/src/app/advanced/using-ng-template-ref.component.spec.ts b/demo/src/app/advanced/using-ng-template-ref.component.spec.ts
new file mode 100644
index 000000000..3c4ba2ef7
--- /dev/null
+++ b/demo/src/app/advanced/using-ng-template-ref.component.spec.ts
@@ -0,0 +1,115 @@
+import { RouterTestingModule } from '@angular/router/testing';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
+import { NO_ERRORS_SCHEMA, SecurityContext } from '@angular/core';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { DataTableDirective, DataTablesModule } from 'angular-datatables';
+import { MarkdownModule } from 'ngx-markdown';
+import { BaseDemoComponent } from '../base-demo/base-demo.component';
+import { AppRoutingModule } from '../app.routing';
+import { FormsModule } from '@angular/forms';
+import { UpperCasePipe } from '@angular/common';
+import { By } from '@angular/platform-browser';
+import { UsingNgTemplateRefComponent } from './using-ng-template-ref.component';
+import { DemoNgComponent } from './demo-ng-template-ref.component';
+
+
+let fixture: ComponentFixture, component: null| UsingNgTemplateRefComponent = null;
+
+describe('UsingNgTemplateRefComponent', () => {
+ beforeEach(() => {
+ fixture = TestBed.configureTestingModule({
+ declarations: [
+ BaseDemoComponent,
+ UsingNgTemplateRefComponent,
+ DemoNgComponent,
+ DataTableDirective
+ ],
+ schemas: [NO_ERRORS_SCHEMA],
+ imports: [AppRoutingModule,
+ RouterTestingModule,
+ DataTablesModule,
+ MarkdownModule.forRoot({
+ sanitize: SecurityContext.NONE
+ }),
+ FormsModule],
+ providers: [
+ UpperCasePipe,
+ provideHttpClient(withInterceptorsFromDi())
+ ]
+}).createComponent(UsingNgTemplateRefComponent);
+
+ component = fixture.componentInstance;
+
+ fixture.detectChanges(); // initial binding
+ });
+
+ it('should create the app', waitForAsync(() => {
+ const app = fixture.debugElement.componentInstance;
+ expect(app).toBeTruthy();
+ }));
+
+ it('should have title "Using Angular TemplateRef"', waitForAsync(() => {
+ const app = fixture.debugElement.componentInstance as UsingNgTemplateRefComponent;
+ expect(app.pageTitle).toBe('Using Angular TemplateRef');
+ }));
+
+ it('should have firstName, lastName columns have text in uppercase', async () => {
+ const app = fixture.debugElement.componentInstance as UsingNgTemplateRefComponent;
+ await fixture.whenStable();
+
+ const query = fixture.debugElement.query(By.directive(DataTableDirective));
+ const dir = query.injector.get(DataTableDirective);
+ expect(dir).toBeTruthy();
+
+ expect(app.message).toBe('');
+
+ const row: HTMLTableRowElement = fixture.nativeElement.querySelector('tbody tr:first-child');
+ const button = row.querySelector('button.btn-sm') as HTMLButtonElement;
+ button.click();
+
+ expect(app.message).toBe(`Event 'action1' with data '{}`);
+
+ });
+
+ it('should not crash when using "visible: false" for columns', async () => {
+ await fixture.whenStable();
+ fixture.detectChanges();
+
+ const query = fixture.debugElement.query(By.directive(DataTableDirective));
+ const dir = query.injector.get(DataTableDirective);
+ expect(dir).toBeTruthy();
+
+ // hide first column
+ (await dir.dtInstance).columns(0).visible(false);
+ await fixture.whenRenderingDone();
+
+ fixture.detectChanges();
+
+ // verify app still works
+ expect((await dir.dtInstance).column(0).visible()).toBeFalse();
+ });
+
+
+ it('should not have duplicate contents in ngTemplateRef column when navigating pages', async () => {
+ await fixture.whenStable();
+ fixture.detectChanges();
+
+ const query = fixture.debugElement.query(By.directive(DataTableDirective));
+ const dir = query.injector.get(DataTableDirective);
+ expect(dir).toBeTruthy();
+
+ // trigger pagination events
+ (await dir.dtInstance).page(2).draw(false);
+ await fixture.whenRenderingDone();
+
+ (await dir.dtInstance).page(0).draw(false);
+ await fixture.whenRenderingDone();
+ fixture.detectChanges();
+
+ // verify no duplication
+ const firstRow = fixture.debugElement.query(By.css('tbody'));
+ const templatedCell = firstRow.children[0].children[3];
+ expect(templatedCell.children.length).toBe(1);
+ });
+
+});
diff --git a/demo/src/app/advanced/using-ng-template-ref.component.ts b/demo/src/app/advanced/using-ng-template-ref.component.ts
new file mode 100644
index 000000000..450f642cc
--- /dev/null
+++ b/demo/src/app/advanced/using-ng-template-ref.component.ts
@@ -0,0 +1,78 @@
+import { AfterViewInit, Component, OnInit, TemplateRef, ViewChild } from '@angular/core';
+import { Subject } from 'rxjs';
+import { IDemoNgComponentEventType } from './demo-ng-template-ref-event-type';
+import { DemoNgComponent } from './demo-ng-template-ref.component';
+import { ADTSettings } from 'angular-datatables/src/models/settings';
+
+@Component({
+ selector: 'app-using-ng-template-ref',
+ templateUrl: './using-ng-template-ref.component.html',
+ standalone: false
+})
+export class UsingNgTemplateRefComponent implements OnInit, AfterViewInit {
+
+ constructor() { }
+
+ pageTitle = 'Using Angular TemplateRef';
+ mdIntro = 'assets/docs/advanced/using-ng-template-ref/intro.md';
+ mdHTML = 'assets/docs/advanced/using-ng-template-ref/source-html.md';
+ mdTS = 'assets/docs/advanced/using-ng-template-ref/source-ts.md';
+
+ dtOptions: ADTSettings = {};
+ dtTrigger: Subject = new Subject();
+
+ @ViewChild('demoNg') demoNg!: TemplateRef;
+ message = '';
+
+ ngOnInit(): void {
+ // use setTimeout as a hack to ensure the `demoNg` is usable in the datatables rowCallback function
+ setTimeout(() => {
+ const self = this;
+ this.dtOptions = {
+ ajax: 'data/data.json',
+ columns: [
+ {
+ title: 'ID',
+ data: 'id'
+ },
+ {
+ title: 'First name',
+ data: 'firstName',
+ },
+ {
+ title: 'Last name',
+ data: 'lastName'
+ },
+ {
+ title: 'Actions',
+ data: null,
+ defaultContent: '',
+ ngTemplateRef: {
+ ref: this.demoNg,
+ context: {
+ // needed for capturing events inside
+ captureEvents: self.onCaptureEvent.bind(self)
+ }
+ }
+ }
+ ]
+ };
+ });
+ }
+
+ ngAfterViewInit() {
+ setTimeout(() => {
+ // race condition fails unit tests if dtOptions isn't sent with dtTrigger
+ this.dtTrigger.next(this.dtOptions);
+ }, 200);
+ }
+
+ onCaptureEvent(event: IDemoNgComponentEventType) {
+ this.message = `Event '${event.cmd}' with data '${JSON.stringify(event.data)}`;
+ }
+
+ ngOnDestroy(): void {
+ // Do not forget to unsubscribe the event
+ this.dtTrigger.unsubscribe();
+ }
+}
diff --git a/demo/src/app/app.component.css b/demo/src/app/app.component.css
index 1e1cae81f..b1ba4c114 100644
--- a/demo/src/app/app.component.css
+++ b/demo/src/app/app.component.css
@@ -9,8 +9,9 @@ header .container a {
}
.plus {
- font-size: 65px;
- text-shadow: 4px 4px rgba(0, 0, 0, 0.21);
+ font-size: 35px;
+ position: relative;
+ top: -2vh;
}
ul.side-nav.fixed ul.collapsible-accordion a.collapsible-header {
@@ -34,8 +35,8 @@ ul.side-nav.fixed ul.collapsible-accordion .collapsible-body li a {
}
.side-nav .logo a {
- height: 140px;
- background-color: #66ceff;
+ min-height: 120px !important;
+ background-color: #2196f3;
color: #fff;
}
@@ -73,3 +74,14 @@ ul.side-nav.fixed ul.collapsible-accordion .collapsible-body li a {
#logo-container {
display: block;
}
+
+
+.dt-version-button {
+ text-transform: none;
+ text-align: center;
+}
+
+.dt-version-button svg {
+ position: relative;
+ top: 6px;
+}
diff --git a/demo/src/app/app.component.html b/demo/src/app/app.component.html
index 472fc2229..53e99c196 100644
--- a/demo/src/app/app.component.html
+++ b/demo/src/app/app.component.html
@@ -1,134 +1,180 @@
-
- +
- 
- 
-
- 
-
-