fix: DT v2 bug fixes

Author: shanmukhateja

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 = {};