ngOnDestroy and $('#element').foundation('destroy');

Question

I'm trying to implement a Sticky Magellan in my Angular2 application. Once I leave the view I want to remove the plugin, because otherwise I get problems when I'm revisiting the view.

So I'm using:

  ngOnDestroy(): void {
    $('#element').foundation('destroy');
  }

Which results in:

Error: Uncaught (in promise): ReferenceError: We're sorry, 'destroy' is not an available method for this element. ReferenceError: We're sorry, 'destroy' is not an available method for this element. at jQuery.fn.init.foundation (eval at webpackJsonp.67.module.exports (http://localhost:4200/scripts.bundle.js:156:8), :294:15) at ComplexDetailsComponent.webpackJsonp.502.ComplexDetailsComponent.ngOnDestroy (http://localhost:4200/main.bundle.js:1564:26) at Wrapper_ComplexDetailsComponent.ngOnDestroy (/AppModule/ComplexDetailsComponent/wrapper.ngfactory.js:13:16) at CompiledTemplate.proxyViewClass.View_ComplexDetailsComponent_Host0.destroyInternal (/AppModule/ComplexDetailsComponent/host.ngfactory.js:38:37) at CompiledTemplate.proxyViewClass.AppView.destroy (http://localhost:4200/vendor.bundle.js:104561:14) at CompiledTemplate.proxyViewClass.DebugAppView.destroy (http://localhost:4200/vendor.bundle.js:104964:38) at CompiledTemplate.proxyViewClass.AppView.detachAndDestroy (http://localhost:4200/vendor.bundle.js:104545:14) at ComponentRef_.destroy (http://localhost:4200/vendor.bundle.js:46645:70) at RouterOutlet.deactivate (http://localhost:4200/vendor.bundle.js:88910:28) at ActivateRoutes.deactiveRouteAndOutlet (http://localhost:4200/vendor.bundle.js:26420:20) at ActivateRoutes.deactiveRouteAndItsChildren (http://localhost:4200/vendor.bundle.js:26380:18) at ActivateRoutes.deactivateRoutes (http://localhost:4200/vendor.bundle.js:26295:22) at http://localhost:4200/vendor.bundle.js:26257:19 at Array.forEach (native) at ActivateRoutes.deactivateChildRoutes (http://localhost:4200/vendor.bundle.js:26256:29) at resolvePromise (http://localhost:4200/polyfills.bundle.js:7055:31) [angular] at resolvePromise (http://localhost:4200/polyfills.bundle.js:7026:17) [angular] at http://localhost:4200/polyfills.bundle.js:7103:17 [angular] at Object.onInvokeTask (http://localhost:4200/vendor.bundle.js:33595:37) [angular] at ZoneDelegate.invokeTask (http://localhost:4200/polyfills.bundle.js:6756:36) [angular] at Zone.runTask (http://localhost:4200/polyfills.bundle.js:6556:47) [ => angular] at drainMicroTaskQueue (http://localhost:4200/polyfills.bundle.js:6936:35) [] at HTMLAnchorElement.ZoneTask.invoke (http://localhost:4200/polyfills.bundle.js:6814:25) [] ErrorHandler.handleError @ error_handler.js:60 next @ application_ref.js:348 schedulerFn @ async.js:93 SafeSubscriber.__tryOrUnsub @ Subscriber.js:234 SafeSubscriber.next @ Subscriber.js:183 Subscriber._next @ Subscriber.js:125 Subscriber.next @ Subscriber.js:89 Subject.next @ Subject.js:55 EventEmitter.emit @ async.js:79 NgZone.triggerError @ ng_zone.js:333 onHandleError @ ng_zone.js:294 ZoneDelegate.handleError @ zone.js:338 Zone.runGuarded @ zone.js:142 _loop_1 @ zone.js:557 drainMicroTaskQueue @ zone.js:566 ZoneTask.invoke @ zone.js:424 zone.js:522

Has anyone come across this before?

Update 1

Calling $('#element').foundation('destroy'); in the console works. And foundation is initialised at the time I call $('#element').foundation('destroy'); in ngOnDestroy().

Update 2

I'm using version 6.2.4 of Foundation

Update 3

Please see also: Foundation Sticky element in Angular2