typeError: Cannot read property 'dtInstance' of undefined - angular2

[NikhilRadadiya]

What versions you are using?

• angular version:2.4.0
• jquery version: 3.2.1
• datatables version: 1.10.15
• angular-datatables version: 2.3.0
• angular-cli version: 1.0.0

What's the problem?

when I try to get instance of Datatable it gives typeError: Cannot read property 'dtInstance' of undefined.

Can you share your code?

datatableElement: DataTableDirective;
 dtOptions: DataTables.Settings = {};
 constructor(
 private employeeservice:EmployeeService,
 private route: ActivatedRoute,
 private router: Router,
 ) { 
  this.getEmployee();    
 }
 ngOnInit(): void {
 this.dtOptions = {
  paginationType: 'full_numbers',
  displayLength: 5
  };
 }
displayToConsole(datatableElement: DataTableDirective): void 
{
datatableElement.dtInstance.then((dtInstance: DataTables.Api) => 
console.log(dtInstance));
} 
getEmployee(){
this.employeeservice.getEmployees()
.subscribe(
    employees =>{ 
        this.employees = employees; 
        console.log(this.employees);
    (error:Response) => console.log(error)
  },
 )     
}

 deleteEmployee(employee){
 if (confirm("Are you sure you want to delete Employee ?")) {
 console.log(employee.id);
  var index = this.employees.indexOf(employee);
  this.employees.splice(index, 1);

  this.employeeservice.deleteEmployee(employee.id)
    .subscribe(
      data =>{
        this.emp_data = employee;
      },
      err => {
        alert("Could not delete employee.");
        // Revert the view back to its original state
        this.employees.splice(index, 0, employee);
      },
      () => this.router.navigate(['/employees'])
      );
  }
 }
}

[l-lin]

Did you forget to add the @ViewChild(DataTableDirective)? Can you provide your full typescript code?

[NikhilRadadiya]

What difference @ViewChild(DataTableDirective) will make? Though I have already tried it.
here is full typescript code https://kopy.io/5twM1.

tried using promise also,

ngOnInit(): void {
    this.dtOptions = this.http.get('data/dtOptions.json')
    .toPromise()
    .then(response => response.json())
    .catch(this.handleError);
  }

but it is giving, Promise is not assignable to type void

[l-lin]

It's to bind your <table datatable> directive so you can use it in your typescript code. Otherwise, it's undefined.

[NikhilRadadiya]

And what about data format returned in response, I'm getting this format

[
  {
    "id": 1,
    "name": "John",
    "email": "john@gmail.com",
    "created_at": "2017-05-10 06:14:50",
    "updated_at": "2017-05-10 07:57:27"
  }
]

Will it work?

[l-lin]

See the example in the DataTable's documentation:

{
   "data":[
      {
         "id":1,
         "name":"John",
         "email":"john@gmail.com",
         "created_at":"2017-05-10 06:14:50",
         "updated_at":"2017-05-10 07:57:27"
      }
   ]
}

You will need to put your data in a JSON object under the data attribute.

If you really need to have your response as an array, then you can use the ajax.dataSrc property:

ngOnInit(): void {
  this.dtOptions = {
    paginationType: 'full_numbers',
    displayLength: 5,
    ajax: {
      dataSrc: ''
    }
  };
}

[NikhilRadadiya]

One more question, if I define this
dtOptions: DataTables.Settings = {};
and then

 ngOnInit(): void {
    this.dtOptions = {
      paginationType: 'full_numbers',
      displayLength: 5
    };

I'm getting this error
Type '{ paginationType: string; }' is not assignable to type 'Settings'.
Object literal may only specify known properties, and 'paginationType' does not exist in type 'Settings'.

It's not giving when I define dtOptions: {};

[l-lin]

You are using Typings, so only those attributes are available.

[NikhilRadadiya]

What should I do to get rid of that error?

[l-lin]

You should try to use the settings defined in the typings, as they are close to the official attributes. And I'm guessing paginationType is a legacy attribute, and the one to use is pagingType.

[NikhilRadadiya]

Okay, @l-lin Thank you so much for your help.
Really, appreciate it

[NikhilRadadiya]

Hey, Again it is the same prolem, you can find full and updated typescript here https://kopy.io/kt473.
I can get dtInstance by using displayToConsole function like suggested in documentation. but when I use it in deleteEmployee this function I get EXCEPTION: Cannot read property 'dtInstance' of undefined
can you have a look at it and tell me what is the problem?

[NikhilRadadiya]

Removed
public datatableElement: DataTableDirective;
dtInstance: any;
and it is workin now.

what is a best way to show updated table after delete operation performed? for now I'm calling rerender().

[l-lin]

In your rerender function, use the datatableElement instead of dtElement that is not initialized:

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

Unfortunately, you will have to rerender if you want to have your table updated.

[NikhilRadadiya]

This rerender function is not helping, it is reloading but the table is not updating