Cleaning up resources with MutationObserver: Final Version

MyD3Component.ts

class MyD3Component {
  private observer: MutationObserver;

  constructor(targetElement: HTMLElement) {
    //create some resources that need to be cleaned up

    this.observer = new MutationObserver(mutations => {
      //get a flattened list of all removed elements
      const removedElements = mutations.map(m => m.removedNodes)
        .reduce((a, b) => a.concat(Array.prototype.slice.apply(b)), []);

      //dispose if my target element was removed
      if (removedElements.indexOf(targetElement) !== -1)
        this.dispose();
    });

    this.observer.observe(targetElement.parentNode, { childList: true });
  }

  dispose() {
    //clean up my resources

    //clean up the observer
    this.observer && this.observer.disconnect();
    delete this.observer;
  }
}