import { AfterViewInit , Component , OnDestroy , OnInit , ViewChild } from '@angular/core' ; import { DataTableDirective } from 'angular-datatables' ; import { Subject } from 'rxjs' ; @ Component ( { selector : 'app-rerender' , templateUrl : 'rerender.component.html' } ) export class RerenderComponent implements AfterViewInit , OnDestroy , OnInit { pageTitle = 'Rerender' ; mdIntro = 'assets/docs/advanced/rerender/intro.md' ; mdHTML = 'assets/docs/advanced/rerender/source-html.md' ; mdTS = 'assets/docs/advanced/rerender/source-ts.md' ; @ ViewChild ( DataTableDirective , { static : false } ) dtElement : DataTableDirective ; dtOptions : DataTables . Settings = { } ; dtTrigger : Subject < any > = new Subject ( ) ; ngOnInit ( ) { this . dtOptions = { ajax : 'data/data.json' , columns : [ { title : 'ID' , data : 'id' } , { title : 'First name' , data : 'firstName' } , { title : 'Last name' , data : 'lastName' } ] } ; } ngAfterViewInit ( ) { this . dtTrigger . next ( null ) ; } ngOnDestroy ( ) { this . dtTrigger . unsubscribe ( ) ; } rerender ( ) { this . dtElement . dtInstance . then ( ( dtInstance ) => { dtInstance . destroy ( ) ; this . dtTrigger . next ( null ) ; } ) ; } }