title: Angular 4 ObjectUnsubscribedError error while removing and adding datatable
body: <p>I am getting ObjectUnsubscribedError while toggling the Click button(view_click).</p>
  
  <blockquote>
    <p>ObjectUnsubscribedError {name: "ObjectUnsubscribedError", stack:
    "ObjectUnsubscribedError: object unsubscribed↵<br>
    a…(ng:///AppModule/UserComponent.ngfactory.js:43:5)", message: "object
    unsubscribed", ngDebugContext: DebugContext_, ngErrorLogger: ƒ}</p>
  </blockquote>
  
  <p>View as following:</p>
  
  <pre><code> &lt;button class="btn" (click)="view_click(e)"&gt;Click&lt;/button&gt;
              &lt;div class="container-fluid" *ngIf="list_v; "&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="col-md-12"&gt;
                          &lt;div class="card"&gt;
                              &lt;div class="header"&gt;
                                  &lt;h4 class="title"&gt;User List&lt;/h4&gt;
                                  &lt;p class="category"&gt;List all users&lt;/p&gt;
                              &lt;/div&gt;
                              &lt;div class="content table-responsive table-full-width"&gt;
                                &lt;table datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="row-border hover" (click)="table_click($event.target)"&gt;&lt;/table&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt; 
  </code></pre>
  
  <p>component as following:</p>
  
  <pre><code>import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core';
  import { DataTableDirective } from 'angular-datatables';
  import { HttpClient } from '@angular/common/http';
  import { Subject } from 'rxjs/Subject';
  
  @Component({
    selector: 'app-user',
    templateUrl: 'user.component.html'
  })
  export class UserComponent implements OnInit, AfterViewInit {
    list_v=true;    
  
    constructor(private http: HttpClient){ }    
  
     view_click(e:HTMLElement){
         if(this.list_v){
             this.list_v=false;
         }else{
             this.list_v=true;
         }
     }
  
    @ViewChild(DataTableDirective)
    dtElement: DataTableDirective;
  
    dtOptions: DataTables.Settings = {};
  
    dtTrigger: Subject&lt;any&gt; = new Subject();
  
    ngOnInit(): void {
      this.dtOptions = {
        ajax: 'http://localhost/angular/backend/users',
        columns: [{
          title: 'ID',
          data: 'id'
        }, {
          title: 'Name',
          data: 'name'
        }, {
          title: 'Action',
          data: 'action'
        }]
      };
    }
    ngOnDestroy() {
  
  }
  
    ngAfterViewInit(): void {
      this.dtTrigger.next();
    }
  
     table_click(e:HTMLElement){
      //   if(e.attributes.getNamedItem('delete_id')){
      //          var id=e.attributes.getNamedItem('delete_id').nodeValue;
      //      this.http.get('http://localhost/angular/backend/delete/user/'+id,)
        //     .subscribe(    
        //    (data) =&gt; this.delete(data), //For Success Response
        //   err =&gt; {console.error(err)} //For Error Response
        // );   
        // }
  
     }
     delete(data){
             this.rerender();
     }
  
    rerender(): void {
      this.dtElement.dtInstance.then((dtInstance: DataTables.Api) =&gt; {
        // Destroy the table first
        dtInstance.destroy();
        // Call the dtTrigger to rerender again
        this.dtTrigger.next();
      });
    }
  } 
  </code></pre>