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....
