feat: 🎸 introduce injectTippyRef

Author: NetanelBasal

projects/ngneat/helipopper/src/lib/providers.ts

@@ -1,6 +1,16 @@
-import { makeEnvironmentProviders } from '@angular/core';
-import { TIPPY_CONFIG, TippyConfig } from './tippy.types';
+import { inject, makeEnvironmentProviders } from '@angular/core';
+import { TIPPY_CONFIG, TIPPY_REF, TippyConfig, TippyInstance } from './tippy.types';
 
 export function provideTippyConfig(config: Partial<TippyConfig> = {}) {
   return makeEnvironmentProviders([{ provide: TIPPY_CONFIG, useValue: config }]);
 }
+
+export function injectTippyRef(): TippyInstance {
+  const instance = inject(TIPPY_REF, { optional: true });
+
+  if (instance) {
+    return instance;
+  }
+
+  throw new Error('tp is not provided in the current context or on one of its ancestors');
+}

projects/ngneat/helipopper/src/lib/tippy.directive.ts

@@ -345,21 +345,24 @@ export class TippyDirective implements OnChanges, AfterViewInit, OnDestroy, OnIn
 
   protected resolveContent(instance: TippyInstance) {
     if (!this.viewOptions$ && !isString(this.content)) {
+      const injector = Injector.create({
+        providers: [
+          {
+            provide: TIPPY_REF,
+            useValue: this.instance,
+          },
+        ],
+        parent: this.injector,
+      });
       if (isComponent(this.content)) {
         this.instance.data = this.data;
+
         this.viewOptions$ = {
-          injector: Injector.create({
-            providers: [
-              {
-                provide: TIPPY_REF,
-                useValue: this.instance,
-              },
-            ],
-            parent: this.injector,
-          }),
+          injector,
         };
       } else if (isTemplateRef(this.content)) {
         this.viewOptions$ = {
+          injector,
           context: {
             $implicit: this.hide.bind(this),
             data: this.data,

projects/ngneat/helipopper/src/public-api.ts

@@ -3,4 +3,4 @@ export { tooltipVariation, popperVariation, withContextMenuVariation } from './l
 export { TippyService } from './lib/tippy.service';
 export { inView, overflowChanges } from './lib/utils';
 export { ExtendedTippyInstance, TippyInstance, TIPPY_REF, TippyConfig, TIPPY_CONFIG } from './lib/tippy.types';
-export { provideTippyConfig } from './lib/providers';
+export { provideTippyConfig, injectTippyRef } from './lib/providers';

src/app/example/example.component.ts

@@ -1,18 +1,22 @@
 import { Component, Inject, OnDestroy, OnInit } from '@angular/core';
 import { TIPPY_REF, TippyInstance } from '@ngneat/helipopper';
+import { injectTippyRef } from 'projects/ngneat/helipopper/src/lib/providers';
 
 @Component({
   selector: 'app-example',
   templateUrl: './example.component.html',
-  styleUrls: ['./example.component.scss']
+  styleUrls: ['./example.component.scss'],
 })
 export class ExampleComponent implements OnInit, OnDestroy {
   name: string;
+  tippy = injectTippyRef();
 
-  constructor(@Inject(TIPPY_REF) tippy: TippyInstance) {
-    console.log(tippy);
+  constructor() {
+    const { name = 'world!' } = this.tippy.data ?? {};
 
-    const { name = 'world!' } = tippy.data ?? {};
+    setTimeout(() => {
+      this.tippy.hide();
+    }, 1000);
 
     this.name = name;
   }

src/app/playground/playground.component.html

@@ -84,6 +84,7 @@ <h6>Custom Template</h6>
     </div>
 
     <ng-template #tpl let-hide>
+      <app-example />
       <div *ngFor="let item of tooltipPositions" class="positions">
         {{ item }}
       </div>