fix: DT v2 bug fixes

DEVELOPER.md

@@ -159,9 +159,18 @@ To test schematics, you will need to setup `verdaccio`, publish the library loca
    - Run `npm adduser --registry=http://localhost:4873`
    - Give a username, password and an email address to create an account in `verdaccio`.
 
-4. Now, publish the library to `verdaccio` by running the command:
+4. Make your changes in the project.
 
-   `npm publish angular-datatables --registry http://localhost:4873`
+5. Run `npm run build:lib` to build the library and `ng add` functionality related code.
+
+6. Now, publish the library to `verdaccio` by running the command:
+
+   ```sh
+   # Make sure you compiled the library first! 
+   # `npm run build:lib`
+   cd dist/lib
+   npm publish --registry http://localhost:4873
+   ```
 
 5. Create an empty Angular project like:
 

angular.json

@@ -153,7 +153,7 @@
         "build": {
           "builder": "@angular-devkit/build-angular:ng-packagr",
           "options": {
-            "project": "lib/ng-package.json"
+            "project": "lib/ng-package.prod.json"
           },
           "configurations": {
             "production": {

demo/README.md

@@ -8,22 +8,21 @@ Run `npm start` for a dev server. Navigate to `http://localhost:4200/`. The app
 
 ## Build
 
-Run `npm run build:prod` to build the project. The build artifacts will be stored in the `dist/` directory.
+Run `npm run demo:build:prod` to build the project. The build artifacts will be stored in the `dist/` directory.
 
 ## Further help
 
 To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
 
 ## Using the current version of angular-datatables
 
-If you need to check if the currenct version of angular-datatables still works with the demo, you can use [node-install-local](https://github.com/nicojs/node-install-local):
+If you need to check if the currenct version of angular-datatables still works with the demo, simply follow the instructions below:
+
+> We use [linklocal](https://npmjs.org/package/linklocal) to link library with demo app. 
 
 ```bash
 cd /path/to/angular-datatables
-npm run build
-cd demo/
-rm -rf node-modules/angular-datatables
-install-local ..
 npm start
-# Application will run on localhost:4200
+# The application will first build library (under dist/lib), 
+# copy it to demo/node_modules and run the app on localhost:4200
 ```

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

@@ -11,7 +11,7 @@ import { CustomRangeSearchComponent } from './custom-range-search.component';
 import { FormsModule } from '@angular/forms';
 
 
-let fixture: ComponentFixture<CustomRangeSearchComponent>, component: CustomRangeSearchComponent = null;
+let fixture: ComponentFixture<CustomRangeSearchComponent>, component: null| CustomRangeSearchComponent = null;
 
 describe('CustomRangeSearchComponent', () => {
   beforeEach(() => {
@@ -24,7 +24,7 @@ describe('CustomRangeSearchComponent', () => {
       imports: [
         AppRoutingModule,
         RouterTestingModule,
-        DataTablesModule.forRoot(),
+        DataTablesModule,
         HttpClientModule,
         MarkdownModule.forRoot(
           {

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

@@ -17,9 +17,9 @@ export class CustomRangeSearchComponent implements OnDestroy, OnInit {
   mdTSV2 = 'assets/docs/advanced/custom-range/source-ts-dtv2.md';
 
   @ViewChild(DataTableDirective, {static: false})
-  datatableElement: DataTableDirective;
-  min: number;
-  max: number;
+  datatableElement!: DataTableDirective;
+  min!: number;
+  max!: number;
 
   dtOptions: Config = {};
 

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

@@ -5,7 +5,7 @@
     </button>
   </p>
   <blockquote>
-    The DataTable instance ID is: {{ $any((datatableElement?.dtInstance | async)?.table().node())['id'] }}
+    The DataTable instance ID is: {{ $any((datatableElement?.dtInstance | async)?.table()?.node())['id'] }}
   </blockquote>
   <table datatable [dtOptions]="dtOptions" class="row-border hover"></table>
 </ng-template>

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

@@ -11,7 +11,7 @@ import { FormsModule } from '@angular/forms';
 import { DtInstanceComponent } from './dt-instance.component';
 
 
-let fixture: ComponentFixture<DtInstanceComponent>, component: DtInstanceComponent = null;
+let fixture: ComponentFixture<DtInstanceComponent>, component: null| DtInstanceComponent = null;
 
 describe('DtInstanceComponent', () => {
   beforeEach(() => {
@@ -24,7 +24,7 @@ describe('DtInstanceComponent', () => {
       imports: [
         AppRoutingModule,
         RouterTestingModule,
-        DataTablesModule.forRoot(),
+        DataTablesModule,
         HttpClientModule,
         MarkdownModule.forRoot(
           {

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

@@ -16,11 +16,12 @@ export class DtInstanceComponent implements OnInit {
   mdTSV2 = 'assets/docs/advanced/dt-instance/source-ts-dtv2.md';
 
   @ViewChild(DataTableDirective, {static: false})
-  datatableElement: DataTableDirective;
+  datatableElement: DataTableDirective|undefined;
 
   dtOptions: Config = {};
 
-  displayToConsole(datatableElement: DataTableDirective): void {
+  displayToConsole(datatableElement: DataTableDirective | undefined): void {
+    if (!datatableElement) return;
     datatableElement.dtInstance.then(dtInstance => console.log(dtInstance));
   }
 

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

@@ -12,7 +12,7 @@ import { IndividualColumnFilteringComponent } from './individual-column-filterin
 import { Api } from 'datatables.net';
 
 
-let fixture: ComponentFixture<IndividualColumnFilteringComponent>, component: IndividualColumnFilteringComponent = null;
+let fixture: ComponentFixture<IndividualColumnFilteringComponent>, component: null| IndividualColumnFilteringComponent = null;
 
 function applyValueToInput(inputElement: HTMLInputElement, value: string, table: Api) {
   inputElement.value = value;
@@ -32,7 +32,7 @@ describe('IndividualColumnFilteringComponent', () => {
       imports: [
         AppRoutingModule,
         RouterTestingModule,
-        DataTablesModule.forRoot(),
+        DataTablesModule,
         HttpClientModule,
         MarkdownModule.forRoot(
           {
@@ -72,9 +72,9 @@ describe('IndividualColumnFilteringComponent', () => {
     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");
+    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);

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

@@ -16,7 +16,7 @@ export class IndividualColumnFilteringComponent implements OnInit, AfterViewInit
   mdTSV2 = 'assets/docs/advanced/indi-col-filter/source-ts-dtv2.md';
 
   @ViewChild(DataTableDirective, {static: false})
-  datatableElement: DataTableDirective;
+  datatableElement!: DataTableDirective;
 
   dtOptions: Config = {};
 

demo/src/app/advanced/load-dt-options-with-promise.component.spec.ts

@@ -11,7 +11,7 @@ import { FormsModule } from '@angular/forms';
 import { LoadDtOptionsWithPromiseComponent } from './load-dt-options-with-promise.component';
 
 
-let fixture: ComponentFixture<LoadDtOptionsWithPromiseComponent>, component: LoadDtOptionsWithPromiseComponent = null;
+let fixture: ComponentFixture<LoadDtOptionsWithPromiseComponent>, component: null| LoadDtOptionsWithPromiseComponent = null;
 
 describe('LoadDtOptionsWithPromiseComponent', () => {
   beforeEach(() => {
@@ -24,7 +24,7 @@ describe('LoadDtOptionsWithPromiseComponent', () => {
       imports: [
         AppRoutingModule,
         RouterTestingModule,
-        DataTablesModule.forRoot(),
+        DataTablesModule,
         HttpClientModule,
         MarkdownModule.forRoot(
           {

demo/src/app/advanced/load-dt-options-with-promise.component.ts

@@ -14,7 +14,7 @@ export class LoadDtOptionsWithPromiseComponent implements OnInit {
   mdTS = 'assets/docs/advanced/load-dt-opt-with-promise/source-ts.md';
   mdTSV2 = 'assets/docs/advanced/load-dt-opt-with-promise/source-ts-dtv2.md';
 
-  dtOptions: Promise<Config>;
+  dtOptions!: Promise<Config>;
 
   constructor(@Inject(HttpClient) private httpClient: HttpClient) {}
 

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

@@ -11,7 +11,7 @@ import { FormsModule } from '@angular/forms';
 import { MultipleTablesComponent } from './multiple-tables.component';
 
 
-let fixture: ComponentFixture<MultipleTablesComponent>, component: MultipleTablesComponent = null;
+let fixture: ComponentFixture<MultipleTablesComponent>, component: null| MultipleTablesComponent = null;
 
 describe('MultipleTablesComponent', () => {
   beforeEach(() => {
@@ -24,7 +24,7 @@ describe('MultipleTablesComponent', () => {
       imports: [
         AppRoutingModule,
         RouterTestingModule,
-        DataTablesModule.forRoot(),
+        DataTablesModule,
         HttpClientModule,
         MarkdownModule.forRoot(
           {

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

@@ -15,7 +15,7 @@ export class MultipleTablesComponent implements OnInit {
   mdTSV2 = 'assets/docs/advanced/multiple-tables/source-ts-dtv2.md';
 
   @ViewChildren(DataTableDirective)
-  dtElements: QueryList<DataTableDirective>;
+  dtElements!: QueryList<DataTableDirective>;
 
   dtOptions: Config[] = [];
 

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

@@ -10,7 +10,7 @@ import { FormsModule } from '@angular/forms';
 import { RerenderComponent } from './rerender.component';
 
 
-let fixture: ComponentFixture<RerenderComponent>, component: RerenderComponent = null;
+let fixture: ComponentFixture<RerenderComponent>, component: null| RerenderComponent = null;
 
 describe('RerenderComponent', () => {
   beforeEach(() => {
@@ -23,7 +23,7 @@ describe('RerenderComponent', () => {
       imports: [
         AppRoutingModule,
         RouterTestingModule,
-        DataTablesModule.forRoot(),
+        DataTablesModule,
         HttpClientModule,
         MarkdownModule.forRoot(
           {
@@ -56,8 +56,8 @@ describe('RerenderComponent', () => {
 
     const rerenderSpy = spyOn(app, 'rerender' as any);
 
-    const triggerBtns: HTMLButtonElement[] = Array.from(fixture.nativeElement.querySelectorAll('button'));
-    const triggerBtn: HTMLButtonElement = triggerBtns.find(e => e.textContent.includes('Rerender'));
+    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'));

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

@@ -17,7 +17,7 @@ export class RerenderComponent implements AfterViewInit, OnDestroy, OnInit {
 
 
   @ViewChild(DataTableDirective, {static: false})
-  dtElement: DataTableDirective;
+  dtElement!: DataTableDirective;
 
   dtOptions: Config = {};
 

demo/src/app/advanced/router-link.component.spec.ts

@@ -13,7 +13,7 @@ import { By } from '@angular/platform-browser';
 import { DemoNgComponent } from './demo-ng-template-ref.component';
 
 
-let fixture: ComponentFixture<RouterLinkComponent>, component: RouterLinkComponent = null, router: Router = null;
+let fixture: ComponentFixture<RouterLinkComponent>, component: null| RouterLinkComponent = null, router!: Router;
 
 describe('RouterLinkComponent', () => {
   beforeEach(() => {
@@ -27,7 +27,7 @@ describe('RouterLinkComponent', () => {
       imports: [
         AppRoutingModule,
         RouterTestingModule,
-        DataTablesModule.forRoot(),
+        DataTablesModule,
         HttpClientModule,
         MarkdownModule.forRoot(
           {
@@ -65,7 +65,7 @@ describe('RouterLinkComponent', () => {
     const rSpy = spyOn(router, 'navigate');
 
     const row: HTMLTableRowElement = fixture.nativeElement.querySelector('tbody tr:first-child');
-    const button: HTMLButtonElement = row.querySelector('button.btn-sm');
+    const button = row.querySelector('button.btn-sm') as HTMLButtonElement;
     button.click();
 
     expect(rSpy).toHaveBeenCalled();

demo/src/app/advanced/router-link.component.ts

@@ -21,7 +21,7 @@ export class RouterLinkComponent implements AfterViewInit, OnInit, OnDestroy {
   dtOptions: ADTSettings = {};
   dtTrigger = new Subject<ADTSettings>();
 
-  @ViewChild('demoNg') demoNg: TemplateRef<DemoNgComponent>;
+  @ViewChild('demoNg') demoNg!: TemplateRef<DemoNgComponent>;
 
   constructor(
     private router: Router

demo/src/app/advanced/row-click-event.component.spec.ts

@@ -10,7 +10,7 @@ import { FormsModule } from '@angular/forms';
 import { RowClickEventComponent } from './row-click-event.component';
 
 
-let fixture: ComponentFixture<RowClickEventComponent>, component: RowClickEventComponent = null;
+let fixture: ComponentFixture<RowClickEventComponent>, component: null| RowClickEventComponent = null;
 
 describe('RowClickEventComponent', () => {
   beforeEach(() => {
@@ -23,7 +23,7 @@ describe('RowClickEventComponent', () => {
       imports: [
         AppRoutingModule,
         RouterTestingModule,
-        DataTablesModule.forRoot(),
+        DataTablesModule,
         HttpClientModule,
         MarkdownModule.forRoot(
           {

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

@@ -13,7 +13,7 @@ import { By } from '@angular/platform-browser';
 import { Person } from 'app/person';
 
 
-let fixture: ComponentFixture<UsingNgPipeComponent>, component: UsingNgPipeComponent = null;
+let fixture: ComponentFixture<UsingNgPipeComponent>, component: null| UsingNgPipeComponent = null;
 
 describe('UsingNgPipeComponent', () => {
   beforeEach(() => {
@@ -26,7 +26,7 @@ describe('UsingNgPipeComponent', () => {
       imports: [
         AppRoutingModule,
         RouterTestingModule,
-        DataTablesModule.forRoot(),
+        DataTablesModule,
         HttpClientModule,
         MarkdownModule.forRoot(
           {

demo/src/app/advanced/using-ng-template-ref.component.spec.ts

@@ -13,7 +13,7 @@ import { UsingNgTemplateRefComponent } from './using-ng-template-ref.component';
 import { DemoNgComponent } from './demo-ng-template-ref.component';
 
 
-let fixture: ComponentFixture<UsingNgTemplateRefComponent>, component: UsingNgTemplateRefComponent = null;
+let fixture: ComponentFixture<UsingNgTemplateRefComponent>, component: null| UsingNgTemplateRefComponent = null;
 
 describe('UsingNgTemplateRefComponent', () => {
   beforeEach(() => {
@@ -27,7 +27,7 @@ describe('UsingNgTemplateRefComponent', () => {
       imports: [
         AppRoutingModule,
         RouterTestingModule,
-        DataTablesModule.forRoot(),
+        DataTablesModule,
         HttpClientModule,
         MarkdownModule.forRoot(
           {
@@ -68,7 +68,7 @@ describe('UsingNgTemplateRefComponent', () => {
     expect(app.message).toBe('');
 
     const row: HTMLTableRowElement = fixture.nativeElement.querySelector('tbody tr:first-child');
-    const button: HTMLButtonElement = row.querySelector('button.btn-sm');
+    const button = row.querySelector('button.btn-sm') as HTMLButtonElement;
     button.click();
 
     expect(app.message).toBe(`Event 'action1' with data '{}`);

demo/src/app/advanced/using-ng-template-ref.component.ts

@@ -21,7 +21,7 @@ export class UsingNgTemplateRefComponent implements OnInit, AfterViewInit {
   dtOptions: ADTSettings = {};
   dtTrigger: Subject<ADTSettings> = new Subject<ADTSettings>();
 
-  @ViewChild('demoNg') demoNg: TemplateRef<DemoNgComponent>;
+  @ViewChild('demoNg') demoNg!: TemplateRef<DemoNgComponent>;
   message = '';
 
   ngOnInit(): void {

demo/src/app/app.component.ts

@@ -12,9 +12,9 @@ declare var $: any;
 })
 export class AppComponent implements OnInit, OnDestroy {
 
-  routerEventsSub$: Subscription = null;
+  routerEventsSub$!: Subscription;
 
-  dtVersion: 'v2' | 'v1' = null;
+  dtVersion: 'v2' | 'v1' = 'v2';
 
   constructor(
     private router: Router,

demo/src/app/base-demo/base-demo.component.html

@@ -18,7 +18,7 @@ <h3 class="header center-on-small-only">{{pageTitle}}</h3>
 
 <div class="section" *ngIf="dtVersion == 'v1'">
   <div class="container red white-text dtv1-notice">
-    You are viewing documentation for v1.x of datatables.net. This version is not supported anymore. It is listed here for documentation purposes only.
+    You are viewing documentation for v1.x of datatables.net. This version is not supported anymore since v17.1.0. It is listed here for documentation purposes only.
   </div>
 </div>