Styjun

Angular 7

"datatables.net-dt": "^1.10.19",

Angular Datatable

import Component, OnInit,Injectable ,AfterViewInit,ViewChild,OnDestroy from '@angular/core';
import Title from '@angular/platform-browser';
import HttpClient from '@angular/common/http';
import DataTableDirective from 'angular-datatables';

import Subject from 'rxjs';

class DataTablesResponse 
 data: any[];
 draw: number;
 recordsFiltered: number;
 recordsTotal: number;


@Component(
 selector: 'app-cheques',
 templateUrl: './cheques.component.html',
 styleUrls: ['./cheques.component.css']
)

export class ChequesComponent implements AfterViewInit,OnDestroy,OnInit {
 @ViewChild(DataTableDirective)
 public openForm = 0;
 dtOptions: DataTables.Settings = ;
 cheques: Cheque[] = [];
 dtElement: DataTableDirective;
 dtTrigger: Subject<any> = new Subject();

 constructor(private title: Title,private http: HttpClient) 

 ngOnInit() 
 this.title.setTitle('WalletCheques - Cheques');
 const that = this;

 this.dtOptions = 
 pagingType: 'full_numbers',
 pageLength: 10,
 serverSide: true,
 processing: false,
 ajax: (dataTablesParameters: any, callback) => 
 that.http
 .post<DataTablesResponse>(
 'http://localhost/wallet-cheques/api/get-cheques',
 dataTablesParameters, 
 ).subscribe(resp => 
 that.cheques = resp.data;

 callback(
 recordsTotal: resp.recordsTotal,
 recordsFiltered: resp.recordsFiltered,
 data: []
 );
 );
 ,
 columns: [
 data: 'cheque_id',orderable: false,
 data: 'amount',orderable: false,
 data: 'lastName',orderable: false 
 ]
 



rerender(): void 
 this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => 
 // Destroy the table first
 dtInstance.destroy();
 // Call the dtTrigger to rerender again
 this.dtTrigger.next();
 );

I want to refresh the table like draw method I when click a button.

The documentation getting error like ChequesComponent.html:20 ERROR TypeError: Cannot read property 'dtInstance' of undefined