When an SVG element is being detached, remove its events

[wflemingnz-retired]

In NgxD3timelineComponent, the setter of svgElement attaches events to the SVG when the SVG element itself is attached to the DOM.

We likely should also detach the events in the case where the SVG element is removed or changed. This can be achieved by:

ElementRef<SVGElement> _svgElement;
@ViewChild('svgEl') set svgElement(el: ElementRef<SVGElement>) {
  if(_svgElement){
    this.detachZoom(_svgElement);
  }

  _svgElement = el;
  this.setupZoom(_svgElement);
}

[umarmohammed]

Could we remove the event handler in onDestroy?

[wflemingnz-retired]

We could but as I understand it, it wouldn't be as comprehensive as the method I gave.

Consider if view is set(SVG element A), then unset and set again(SVG element B).

Using onDestroy, events will be detached from B but not A.

[umarmohammed]

I'm not sure that its possible to unset without destroying the component

[wflemingnz-retired]

If you assign 0,0 to view (or later set view to null), I thought the elements in the ngIf are removed from the DOM - this includes the SVG element.

If inconclusive we could test it.

[umarmohammed]

Good point. I guess once we start using the view selectors, this should prevent the svg from getting removed.

[wflemingnz-retired]

I think we might still need the ngIf, as the view has not yet been populated via the ResizeObserver when the app first starts up.