Angular datatable unsubscription error while closing ngx-bootstrap modal

Question

I am using Angular DataTable with ngx-bootstrap modal. When I close the modal the datatable throws unsubscription error and datatable does not initialize. I tried multiple workaround with re-render, unsubsc ribe on onHide event and it did not solve. Please help if anyone knows how to fix it

this.subscriptions.push(
      this.modalService.onHidden.subscribe((reason: string) => {
        alert('Hidden');
        this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
            alert('Destroying..')
              //Clear the table first
              dtInstance.clear();
              // Destroy the table 
              dtInstance.destroy();
           })
      this.dtTriggerFreshness.unsubscribe();
      })
    );

Answer 1

There are a context error.

    let trigger=this.dtTriggerFreshness;
    let dtElementVar= this.dtElement;
    let modalServiceVar=this.modalService;
    this.subscriptions.push(
          modalService.onHidden.subscribe((reason: string) => {
            alert('Hidden');
            dtElementVar.dtInstance.then((dtInstance: DataTables.Api) => {
                alert('Destroying..')
                  //Clear the table first
                  dtInstance.clear();
                  // Destroy the table 
                  dtInstance.destroy();
 trigger.dtTriggerFreshness.unsubscribe();
               })

          })
        );

Now it must work.