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

Question

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

I am trying to implement Sticky Magellan in my Angular2 application. Once I have left the view, I want to remove the plugin because otherwise I am having problems when I revisit the view.

So I am using:

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

Result:

Error: impurity (in promise): ReferenceError: We're sorry, "destroy" is not an accessible method for this item. ReferenceError: Sorry, "destroy" is not available for this item. 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 ) in Wrapper_ComplexDetailsComponent.ngOnDestroy (/AppModule/ComplexDetailsComponent/wrapper.ngfactory.js:13:16ComponentComponentViewView (/AppModule/ComplexDetailsComponent/host.ngfactory.js:38:37) at CompiledTemplate.proxyViewClass.AppView.destroy (http: // localhost: 4200 / vendor.bundle.js: 104561: 14 ) in CompiledTemplate.proxyViewClass.DebugAppView.destroy ( http: // localhost: 4200 / vendor.bundle.js: 104964: 38 ) in 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 ) to ActivateRoutes.deactiveRouteAndOutlet ( http: // localhost: 4200 / vendor.bundle.js: 26420: 20 ) to ActivateRoutes.deactiveRouteAndItsChildren ( http: // localhost: 4200 / vendor.bundle.js: 26380: 18 ) to ActivateRoutes.deactivateRoutes (http: // localhost: 4200 / vendor.bundle.js: 26295: 22 ) to http: // localhost: 4200 / vendor.bundle.js: 26257: 19 to Array.forEach (native) to 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] in 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 ) [] in 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.js .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 ZoneDerlegate.handle @ 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 encountered this before?

Update 1

The $('#element').foundation('destroy');

console call works. And the foundation is initialized at the time I call $('#element').foundation('destroy');

in ngOnDestroy()

.