re-initialize angular 6 datatable shows this.dtElement undefined

Question

i have created a form for saving and the saved data will be displayed in the datatable at the same page. Datatable rerender() works fine with submission. but on edit rerender() showing "this.dtElement" undefined..

manage-templates.component.ts

import { Component, OnInit, ViewEncapsulation, AfterViewInit, OnDestroy, ViewChild } from '@angular/core';
import { HttpClient, HttpResponse } from '@angular/common/http';
import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
import { NotifierService } from 'angular-notifier';
import { emailTemplatesService } from '../email-templates.service';
import { Globals } from '../../app.global';
import { Subject } from 'rxjs';
import { DataTableDirective } from 'angular-datatables';
import { Router } from '@angular/router';

class Template {
    template_id: string;
    template_name: string;
    template_desc: string;
    template_status: boolean;
}

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

@Component({
    selector: 'app-manage-templates',
    templateUrl: './manage-templates.component.html',
    styleUrls: ['./manage-templates.component.scss'],
    encapsulation: ViewEncapsulation.None
})

export class ManageTemplatesComponent implements AfterViewInit, OnDestroy, OnInit {

    // Creating formgroup object
    createEmailTemplate = new FormGroup({
        templateName: new FormControl('', [Validators.required]),
        templateBody: new FormControl('', [Validators.required]),
        templateDesc: new FormControl('', [Validators.required])
    });

    // Initializing variables
    submitted = false;
    editFlag = false;


    @ViewChild(DataTableDirective)
    dtElement: DataTableDirective;

    dtOptions: DataTables.Settings = {};

    dtTrigger: Subject

user_5593684 · Answer

Here is my solution, the order of ViewChild/dtElement/... is important in this case

export class DemoComponent implements OnInit {

  @ViewChild(DataTableDirective)
  dtElement: DataTableDirective;
  dtOptions: any = {};
  dtInstance: DataTables.Api;
  dtTrigger: Subject = new Subject();

  dt_data: any = {};
  ......

  ngOnInit() {
    this.dtOptions = {
     ...
   };
  }

  ngAfterViewInit(){
    //Define datatable 
    this.dtTrigger.next();
  }

  ngOnDestroy(): void {
    this.dtTrigger.unsubscribe();
  }

  SomeFunction(){
    //return the updated record, all the update function must be using rerender 
    this.dt_data = resp;
    this.rerender();
  }

  rerender(): void {
    try {
      this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
        // Destroy the table first
        dtInstance.destroy();
        // Call the dtTrigger to rerender again
        this.dtTrigger.next();
      });
    } catch (err) {
      console.log(err);
    }
  }

user_9044445 · Answer

When I faced this same issue, I managed to solve it by using [hidden] instead of *ngIf. Aparently, ViewChild couldn't find the DataTableDirective because it wasn't in the HTML (thanks to *ngIf) resulting in the error, since this.dtElement was equal to undefined.

I suggest you try using this:

<div class="row" [hidden]="editFlag == true">
  <!-- DataTable Content -->
</div

I suggest you try using this:

user_3803899 · Answer

If you are using Forms and every time you submit new data and data coming from post request is different you can use something like this (angular 8) -

 export class Demo implements OnDestroy, OnInit, AfterViewInit {
   //this part did the job for me @view...
   @ViewChild(DataTableDirective, { static: false }) datatableElement: DataTableDirective;
  dtElement: DataTableDirective;
  dtOptions: any = {};
  dtInstance: DataTables.Api;
  dtTrigger: Subject = new Subject();

  dt_data: any = {};
  ......

  ngOnInit() {
    this.dtOptions = {
     paging: false,
     "ordering": false,
     dom: 'Bfrtip',
     buttons: [
     'copy',
     'csv',
     'excel'
     ]
    };
  }

  ngAfterViewInit(){
    this.dtTrigger.next();
  }

  ngOnDestroy(): void {
    this.dtTrigger.unsubscribe();
  }

  getData(){
    //post request and when assigning data to variable
    this.dt_data = resp;
    this.rerender();
  }

  rerender(): void {
      //this.datatableElement is important
      this.datatableElement.dtInstance.then((dtInstance: DataTables.Api) => {
              dtInstance.destroy();
              this.dtTrigger.next();
            });

  }

re-initialize angular 6 datatable shows this.dtElement undefined

3 Answers