Remove directive instance from storage on destruction

* Implement unit test for wrapper component remove

projects/demo/package.json

@@ -20,7 +20,7 @@
     "@angular/platform-browser": "^11.2.5",
     "@angular/platform-browser-dynamic": "^11.2.5",
     "@angular/router": "^11.2.5",
-    "ngx-tippy-wrapper": "^3.0.0",
+    "ngx-tippy-wrapper": "^3.0.1",
     "rxjs": "~6.6.6",
     "tslib": "^2.1.0",
     "zone.js": "^0.11.4"

projects/ngx-tippy-wrapper/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-tippy-wrapper",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "description": "Angular 8+ wrapper for Tippy.js",
   "keywords": [
     "tooltip",

projects/ngx-tippy-wrapper/src/lib/ngx-tippy-group.component.ts

@@ -1,5 +1,5 @@
-import { Component, ElementRef, Input, ViewChild, Inject, PLATFORM_ID, AfterViewInit } from '@angular/core';
 import { isPlatformServer } from '@angular/common';
+import { AfterViewInit, Component, ElementRef, Inject, Input, PLATFORM_ID, ViewChild } from '@angular/core';
 import tippy from 'tippy.js';
 import { NgxTippyProps } from './ngx-tippy.interfaces';
 

projects/ngx-tippy-wrapper/src/lib/ngx-tippy-singleton.component.ts

@@ -1,13 +1,13 @@
-import { Component, Input, Inject, PLATFORM_ID, AfterViewInit, ViewChild, ElementRef } from '@angular/core';
 import { isPlatformServer } from '@angular/common';
+import { AfterViewInit, Component, ElementRef, Inject, Input, PLATFORM_ID, ViewChild } from '@angular/core';
 import { createSingleton } from 'tippy.js';
-import { NgxTippyService } from './ngx-tippy.service';
 import {
+  NgxSingletonProps,
   NgxTippyInstance,
   NgxTippySingletonInstance,
   TippyHTMLElement,
-  NgxSingletonProps,
 } from './ngx-tippy.interfaces';
+import { NgxTippyService } from './ngx-tippy.service';
 
 /**
  * Tippy singleton - single tippy element that takes the place of an array of regular tippy instances

projects/ngx-tippy-wrapper/src/lib/ngx-tippy.directive.ts

@@ -1,19 +1,21 @@
-import { Directive, OnInit, ElementRef, Input, Renderer2, Inject, PLATFORM_ID } from '@angular/core';
 import { isPlatformServer } from '@angular/common';
+import { Directive, ElementRef, Inject, Input, OnDestroy, OnInit, PLATFORM_ID, Renderer2 } from '@angular/core';
 import tippy from 'tippy.js';
+import { NgxTippyContent, NgxTippyInstance, NgxTippyProps, TippyHTMLElement } from './ngx-tippy.interfaces';
 import { NgxTippyService } from './ngx-tippy.service';
-import { NgxTippyProps, NgxTippyInstance, NgxTippyContent, TippyHTMLElement } from './ngx-tippy.interfaces';
 import { setTemplateVisible } from './ngx-tippy.utils';
 
 @Directive({
   selector: '[ngxTippy]',
 })
-export class NgxTippyDirective implements OnInit {
+export class NgxTippyDirective implements OnInit, OnDestroy {
   @Input() ngxTippy?: NgxTippyContent | null;
   @Input() tippyProps?: NgxTippyProps;
   @Input() tippyName?: string;
   @Input() tippyClassName?: string;
 
+  private tippyInstance!: NgxTippyInstance;
+
   constructor(
     private tippyEl: ElementRef,
     private ngxTippyService: NgxTippyService,
@@ -26,6 +28,10 @@ export class NgxTippyDirective implements OnInit {
     this.initTippy();
   }
 
+  ngOnDestroy() {
+    this.deleteEntryInStorage();
+  }
+
   /**
    * Tooltip initialize
    * Content can be directly passed through `ngxTippy` selector
@@ -43,10 +49,9 @@ export class NgxTippyDirective implements OnInit {
   }
 
   private setTippyInstance(tippyTarget: TippyHTMLElement) {
-    const tippyInstance: NgxTippyInstance = tippyTarget._tippy;
-
-    this.setClassName(tippyInstance);
-    this.writeInstancesToStorage(tippyInstance);
+    this.tippyInstance = tippyTarget._tippy;
+    this.setClassName(this.tippyInstance);
+    this.writeInstancesToStorage(this.tippyInstance);
   }
 
   private setClassName(tippyInstance: NgxTippyInstance) {
@@ -69,4 +74,8 @@ export class NgxTippyDirective implements OnInit {
   private writeInstancesToStorage(tippyInstance: NgxTippyInstance) {
     this.ngxTippyService.setInstance(this.tippyName || `tippy-${tippyInstance.id}`, tippyInstance);
   }
+
+  private deleteEntryInStorage() {
+    this.ngxTippyService.getInstances()?.delete(this.tippyName || `tippy-${this.tippyInstance.id}`);
+  }
 }

projects/ngx-tippy-wrapper/src/lib/ngx-tippy.interfaces.ts

@@ -1,4 +1,4 @@
-import { Instance, Props, Content } from 'tippy.js';
+import { Content, Instance, Props } from 'tippy.js';
 
 export interface NgxTippyProps extends Partial<Props> {}
 

projects/ngx-tippy-wrapper/src/lib/ngx-tippy.module.ts

@@ -1,8 +1,7 @@
-import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-
-import { NgxTippySingletonComponent } from './ngx-tippy-singleton.component';
+import { NgModule } from '@angular/core';
 import { NgxTippyGroupComponent } from './ngx-tippy-group.component';
+import { NgxTippySingletonComponent } from './ngx-tippy-singleton.component';
 import { NgxTippyDirective } from './ngx-tippy.directive';
 
 @NgModule({

projects/ngx-tippy-wrapper/src/lib/ngx-tippy.service.ts

@@ -1,13 +1,13 @@
-import { Injectable, Renderer2, RendererFactory2, isDevMode } from '@angular/core';
+import { Injectable, isDevMode, Renderer2, RendererFactory2 } from '@angular/core';
 import { Observable, Subject } from 'rxjs';
 import tippy, { hideAll } from 'tippy.js';
 import {
+  InstanceChangeReason,
+  InstancesChanges,
+  NgxHideAllOptions,
+  NgxTippyContent,
   NgxTippyInstance,
   NgxTippyProps,
-  NgxTippyContent,
-  NgxHideAllOptions,
-  InstancesChanges,
-  InstanceChangeReason,
   NgxTippySingletonInstance,
 } from './ngx-tippy.interfaces';
 import { setTemplateVisible } from './ngx-tippy.utils';

projects/ngx-tippy-wrapper/src/public-api.ts

@@ -2,9 +2,9 @@
  * Public API Surface of ngx-tippy-wrapper
  */
 
-export * from './lib/ngx-tippy.interfaces';
-export * from './lib/ngx-tippy.directive';
 export * from './lib/ngx-tippy-group.component';
 export * from './lib/ngx-tippy-singleton.component';
-export * from './lib/ngx-tippy.service';
+export * from './lib/ngx-tippy.directive';
+export * from './lib/ngx-tippy.interfaces';
 export * from './lib/ngx-tippy.module';
+export * from './lib/ngx-tippy.service';

projects/ngx-tippy-wrapper/src/test.ts

@@ -3,18 +3,12 @@
 import 'zone.js/dist/zone';
 import 'zone.js/dist/zone-testing';
 import { getTestBed } from '@angular/core/testing';
-import {
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting
-} from '@angular/platform-browser-dynamic/testing';
+import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
 
 declare const require: any;
 
 // First, initialize the Angular testing environment.
-getTestBed().initTestEnvironment(
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting()
-);
+getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
 // Then we find all the tests.
 const context = require.context('./', true, /\.spec\.ts$/);
 // And load the modules.

projects/ngx-tippy-wrapper/src/unit-tests/ngx-tippy-group.spec.ts

@@ -1,5 +1,5 @@
 import { Component, DebugElement, PLATFORM_ID } from '@angular/core';
-import { TestBed, ComponentFixture, getTestBed, fakeAsync, tick } from '@angular/core/testing';
+import { ComponentFixture, fakeAsync, getTestBed, TestBed, tick } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { NgxTippyGroupComponent } from '../lib/ngx-tippy-group.component';
 import { NgxTippyProps } from '../lib/ngx-tippy.interfaces';

projects/ngx-tippy-wrapper/src/unit-tests/ngx-tippy-singleton.spec.ts

@@ -1,10 +1,10 @@
 import { Component, DebugElement, PLATFORM_ID } from '@angular/core';
+import { ComponentFixture, fakeAsync, getTestBed, TestBed, tick } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
-import { TestBed, ComponentFixture, getTestBed, fakeAsync, tick } from '@angular/core/testing';
-import { NgxSingletonProps, NgxTippyProps } from '../lib/ngx-tippy.interfaces';
 import { NgxTippySingletonComponent } from '../lib/ngx-tippy-singleton.component';
-import { NgxTippyService } from '../lib/ngx-tippy.service';
 import { NgxTippyDirective } from '../lib/ngx-tippy.directive';
+import { NgxSingletonProps, NgxTippyProps } from '../lib/ngx-tippy.interfaces';
+import { NgxTippyService } from '../lib/ngx-tippy.service';
 
 const template = `
   <div class="singleton">

projects/ngx-tippy-wrapper/src/unit-tests/ngx-tippy.directive.spec.ts

@@ -1,9 +1,9 @@
-import { TestBed, ComponentFixture, getTestBed, fakeAsync, tick } from '@angular/core/testing';
-import { DebugElement, Component, ViewChild, ViewContainerRef, Compiler, NgModule, PLATFORM_ID } from '@angular/core';
+import { Compiler, Component, DebugElement, NgModule, PLATFORM_ID, ViewChild, ViewContainerRef } from '@angular/core';
+import { ComponentFixture, fakeAsync, getTestBed, TestBed, tick } from '@angular/core/testing';
 import { BrowserModule, By } from '@angular/platform-browser';
+import { fakeInstance } from '../fixtures/tippy-instance.fixture';
 import { NgxTippyDirective } from '../lib/ngx-tippy.directive';
 import { NgxTippyService } from '../lib/ngx-tippy.service';
-import { fakeInstance } from '../fixtures/tippy-instance.fixture';
 
 const styles = [
   `
@@ -132,10 +132,36 @@ describe('Directive: NgxTippyDirective', () => {
     tooltipDebugEl.nativeElement.dispatchEvent(new MouseEvent('click'));
     fixture.detectChanges();
     const tooltip = fixture.debugElement.query(By.css('.tippy-content'));
-
     expect(tooltip).toBeNull('Tooltip initialized');
   });
 
+  it('Should destroy tooltip in case component destruction', () => {
+    component.addComponent(
+      `
+      <div class="test">
+        <button
+          class="test__btn"
+          [ngxTippy]="'Value'"
+          [tippyProps]="{
+            appendTo: 'parent',
+            trigger: 'click'
+          }"
+        >
+          Element with tooltip
+        </button>
+      </div>
+      `,
+      styles
+    );
+
+    fixture.destroy();
+    fixture.detectChanges();
+    tooltipDebugEl = fixture.debugElement.query(By.directive(NgxTippyDirective));
+    tooltipDebugEl.nativeElement.dispatchEvent(new MouseEvent('click'));
+    const tooltip = fixture.debugElement.query(By.css('.tippy-content'));
+    expect(tooltip).toBeNull('Tooltip did not destroy');
+  });
+
   it('Should show tooltip on hover', () => {
     component.addComponent(
       `

projects/ngx-tippy-wrapper/src/unit-tests/ngx-tippy.service.spec.ts

@@ -1,7 +1,7 @@
-import { TestBed, getTestBed, fakeAsync } from '@angular/core/testing';
-import { DevModeService, NgxTippyService } from '../lib/ngx-tippy.service';
+import { fakeAsync, getTestBed, TestBed } from '@angular/core/testing';
 import { fakeInstance } from '../fixtures/tippy-instance.fixture';
 import { NgxTippyProps } from '../lib/ngx-tippy.interfaces';
+import { DevModeService, NgxTippyService } from '../lib/ngx-tippy.service';
 
 describe('Service: NgxTippyWrapperService - Instance exist ', () => {
   let injector: TestBed;