Error Property 'value' does not exist on type 'HTMLElement'.

[ulissesprev]

Hello Peoples...

I'm facing a problem and I can't find a solution, I started a clean project to install the datatable component to use the individual column filtering feature. I downloaded the original project from git, installed the same version of angular, but in the original project the error doesn't occur, only in my project, where can I be wrong?

package.json

{
"name": "test-datatable",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "^11.2.13",
"@angular/common": "^11.2.13",
"@angular/compiler": "^11.2.13",
"@angular/core": "^11.2.13",
"@angular/forms": "^11.2.13",
"@angular/platform-browser": "^11.2.13",
"@angular/platform-browser-dynamic": "^11.2.13",
"@angular/router": "^11.2.13",
"@ng-bootstrap/ng-bootstrap": "^9.0.0",
"@types/scriptjs": "0.0.2",
"animate.css": "^4.1.1",
"jwt-decode": "^3.0.0",
"ngx-custom-validators": "^8.0.0",
"ngx-spinner": "^11.0.2",
"ngx-toastr": "^13.2.1",
"primeicons": "^4.1.0",
"primeng": "^11.4.3",
"angular-datatables": "^11.1.0",
"clipboard": "^2.0.6",
"core-js": "^3.6.5",
"datatables.net": "^1.10.22",
"datatables.net-buttons": "^1.6.5",
"datatables.net-buttons-dt": "^1.6.5",
"datatables.net-colreorder": "^1.5.2",
"datatables.net-colreorder-dt": "^1.5.2",
"datatables.net-dt": "^1.10.22",
"datatables.net-responsive": "^2.2.6",
"datatables.net-responsive-dt": "^2.2.6",
"datatables.net-scroller": "^2.0.3",
"datatables.net-select": "^1.3.1",
"datatables.net-select-dt": "^1.3.1",
"jquery": "^3.5.1",
"scriptjs": "^2.5.9",
"jszip": "^3.5.0",
"materialize-css": "0.100.2",
"ngx-markdown": "^11.0.1",
"prism-themes": "^1.5.0",
"prismjs": "^1.23.0",
"rxjs": "^6.6.3",
"rxjs-compat": "^6.6.3",
"tether": "^1.4.7",
"ts-helpers": "^1.1.2",
"tslib": "^1.10.0",
"zone.js": "^0.11.3"
},
"devDependencies": {
"@angular/cli": "^11.2.13",
"@angular/compiler-cli": "^11.2.13",
"@angular/language-service": "^11.2.13",
"@angular-devkit/build-angular": "~0.1100.5",
"@types/datatables.net": "^1.10.19",
"@types/datatables.net-buttons": "^1.4.3",
"@types/datatables.net-select": "^1.2.6",
"@types/jasmine": "~3.6.0",
"@types/jasminewd2": "~2.0.8",
"@types/jquery": "~3.5.4",
"@types/node": "~14.14.6",
"chalk": "~4.1.0",
"codelyzer": "^6.0.0",
"jasmine-core": "~3.6.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~5.2.3",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "^3.0.3",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.0",
"protractor": "~7.0.0",
"ts-node": "~9.0.0",
"tslint": "~6.1.0",
"typescript": "~4.0.5"
}
}

### Error

The original project with the same version of the angular does not occur the error, I would like to know where I could be wrong..

[shanmukhateja]

Hi,

Could you provide a reproducible repo a GitHub repo or StackBlitz link to investigate?

This could be because some form of strict type checking.

[ulissesprev]

Hello...

thank you very much for support.
an example is in the repository: https://github.com/ulissesprev/TestDatatable.git

[shanmukhateja]

As suspected, this is indeed because of "strict type checking" enabled during Angular project initialization. I don't recommend enabling this setting as jQuery and strict typeings can causes issues like so.

FIX:

$('input', this.footer()).on('keyup change', function () {
       const self = this as HTMLInputElement;  //   <--- We enforce type of `this` to be HTMLInputELement
      if (that.search() !== self['value']) {            //    <--- Then use self['value'] instead of this['value'] 
        that
          .search(self['value'])                            //     <--- Same goes for here!
          .draw();
      }
});

[ulissesprev]

Hi...

Thank you very much.
I have already disabled this setting in my project.