Nsryjdtyk

I am new to angularjs, I am using this https://www.gyrocode.com/articles/jquery-datatables-how-to-add-a-checkbox-column/ example in Components for my project but I am getting these Errors like

ERROR in src/app/users/users-list/users-list.component.ts(42,60): error TS2339: Property 'checked' does not exist on type 'HTMLElement'.
src/app/users/users-list/users-list.component.ts(48,14): error TS2339: Property 'checked' does not exist on type 'HTMLElement'.
src/app/users/users-list/users-list.component.ts(51,20): error TS2339: Property 'checked' does not exist on type 'HTMLElement'.
src/app/users/users-list/users-list.component.ts(54,14): error TS2339: Property 'indeterminate' does not exist on type 'never'.
src/app/users/users-list/users-list.component.ts(64,23): error TS2345: Argument of type 'Document' is not assignable to parameter of type 'Element'.
Property 'classList' is missing in type 'Document'.
src/app/users/users-list/users-list.component.ts(66,19): error TS2339: Property 'checked' does not exist on type 'HTMLElement'.
src/app/users/users-list/users-list.component.ts(71,39): error TS2339: Property 'name' does not exist on type 'HTMLElement'.
src/app/users/users-list/users-list.component.ts(72,30): error TS2339: Property 'value' does not exist on type 'HTMLElement'.

here is my component.ts

import { User } from './../../../_models/user';

import { UserService } from './../../_services/user.service';

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';

import { first } from 'rxjs/operators';



@Component({

  templateUrl: './users-list.component.html',

})

export class UsersListComponent implements OnInit {

    dtOptions: DataTables.Settings = {};

    users: User = ;

    checked: any;



  constructor(private userService: UserService) { }



  ngOnInit(): void {

    this.dtOptions = {

      pagingType: 'full_numbers'

  };

  this.loadAllUsers();



  ///////////////////////// temp code///////////////////////////////////

  var table = $('#example').DataTable({

    'ajax': 'https://api.myjson.com/bins/1us28',

    'columnDefs': [{

       'targets': 0,

       'searchable': false,

       'orderable': false,

       'className': 'dt-body-center',

       'render': function (data, type, full, meta){

           return '<input type="checkbox" name="id" value="' 

              + $('<div/>').text(data).html() + '">';

       }

    }],

    'order': [1, 'asc']

 });



 // Handle click on "Select all" control

 $('#example-select-all').on('click', function(){

    // Check/uncheck all checkboxes in the table

    var rows = table.rows({ 'search': 'applied' }).nodes();

    $('input[type="checkbox"]', rows).prop('checked', this.checked);

 });



 // Handle click on checkbox to set state of "Select all" control

 $('#example tbody').on('change', 'input[type="checkbox"]', function(){

    // If checkbox is not checked

    if(!this.checked){

       var el = $('#example-select-all').get(0);

       // If "Select all" control is checked and has 'indeterminate' property

       if(el && el.checked && ('indeterminate' in el)){

          // Set visual state of "Select all" control 

          // as 'indeterminate'

          el.indeterminate = true;

       }

    }

 });

 $('#frm-example').on('submit', function(e){

    var form = this;



    // Iterate over all checkboxes in the table

    table.$('input[type="checkbox"]').each(function(){

       // If checkbox doesn't exist in DOM

       if(!$.contains(document, this)){

          // If checkbox is checked

          if(this.checked){

             // Create a hidden element 

             $(form).append(

                $('<input>')

                   .attr('type', 'hidden')

                   .attr('name', this.name)

                   .val(this.value)

             );

          }

       } 

    });



    // FOR TESTING ONLY



    // Output form data to a console

    $('#example-console').text($(form).serialize()); 

    console.log("Form submission", $(form).serialize()); 



    // Prevent actual form submission

    e.preventDefault();

 });



  //////////////////////////end here/////////////////////////////////////





  }



  deleteUser(id: number) {

    this.userService.delete(id).pipe(first()).subscribe(() => { 

        this.loadAllUsers(); 

    });

}

  private loadAllUsers() {

    this.userService.getAll().pipe(first()).subscribe(users => {

        this.users = users;

        console.log(JSON.stringify({users}));

    });

}

}

and html

<div class="container-fluid">

    <div class="page-title">        



    </div>

    <div class="row">

        <div class="col-md-12">

            <div class="card">

                <div class="card-block"> 

                    <div class="row">                        

                    <div class="col-md-8">

                    <a href="" class="btn btn-primary" [routerLink]="['/users/add-user']" >

                            <i class="ti-plus pdd-right-5"></i>

                            <span>Add User</span>

                        </a>

                    </div>

                    <div class="col-md-2">

                            <a href="" class="btn btn-danger">

                                    <i class="ti-trash pdd-right-5"></i>

                                    <span>Delete User</span>

                                </a>

                    </div>

                    <div class="col-md-2">

                            <a href="" class="btn btn-default">

                                    <i class="ti-reload pdd-right-5"></i>

                                    <span>Block User</span>

                                </a>

                    </div>                        

                    </div>

                    <form id="frm-example" action="/path/to/your/script.php" method="POST">



                        <table id="example" class="display" cellspacing="0" width="100%">

                           <thead>

                              <tr>

                                 <th></th>

                                 <th>Name</th>

                                 <th>Position</th>

                                 <th>Office</th>

                                 <th>Extn</th>

                                 <th>Start date</th>

                                 <th>Salary</th>

                              </tr>

                           </thead>

                           <tfoot>

                              <tr>

                                 <th></th>

                                 <th>Name</th>

                                 <th>Position</th>

                                 <th>Office</th>

                                 <th>Age</th>

                                 <th>Start date</th>

                                 <th>Salary</th>

                              </tr>

                           </tfoot>

                        </table>



                        <hr>



                        <p>Press <b>Submit</b> and check console for URL-encoded form data that would be submitted.</p>



                        <p><button>Submit</button></p>



                        <p><b>Selected rows data:</b></p>

                        <pre id="example-console-rows"></pre>



                        <p><b>Form data as submitted to the server:</b></p>

                        <pre id="example-console-form"></pre>



                        </form>



                </div>

            </div>

        </div>

    </div>

</div>    

Can anybody tell me what could be replacement of this.checked to fix error in my component, Or any idea how i can fix these errors

One more thing, Select all is not working in angulerjs project

Thanks in advance for suggestions and answers....

When JQuery handles an event it will point the 'this' keyword to the current HTML element. From the JQuery docs:

When jQuery calls a handler, the this keyword is a reference to the
element where the event is being delivered; for directly bound events
this is the element where the event was attached and for delegated
events this is an element matching selector

So 'this' will currently point to the HTML checkbox and not to your component. In order to bind 'this' to you component you could use the fat arrow syntax:

$('#example tbody').on('change', 'input[type="checkbox"]', () => {

  if (this.checked) // Now works

}

However, I would recommend you to start learning start exploring Angulars event binding and rendering. Otherwise you might end up with two libraries that are both fighting for the dom and run into some weird behaviours.