feat: added inject-destroy

libs/ngxtension/computed-from/src/computed-from.spec.ts

@@ -147,9 +147,6 @@ describe(computedFrom.name, () => {
  let fixture: ComponentFixture<TestComponent>;
 
  beforeEach(async () => {
- await TestBed.configureTestingModule({
- imports: [TestComponent],
- }).compileComponents();
  fixture = TestBed.createComponent(TestComponent);
  component = fixture.componentInstance;
  });
@@ -209,9 +206,6 @@ describe(computedFrom.name, () => {
  let component: InInitComponent;
 
  beforeEach(async () => {
- await TestBed.configureTestingModule({
- imports: [InInitComponent],
- }).compileComponents();
  const fixture = TestBed.createComponent(InInitComponent);
  component = fixture.componentInstance;
  });

libs/ngxtension/inject-destroy/README.md

@@ -0,0 +1,3 @@
+# ngxtension/inject-destroy
+
+Secondary entry point of `ngxtension`. It can be used by importing from `ngxtension/inject-destroy`.

libs/ngxtension/inject-destroy/ng-package.json

@@ -0,0 +1,5 @@
+{
+ "lib": {
+ "entryFile": "src/index.ts"
+ }
+}

libs/ngxtension/inject-destroy/src/index.ts

@@ -0,0 +1 @@
+export * from './inject-destroy';

libs/ngxtension/inject-destroy/src/inject-destroy.spec.ts

@@ -0,0 +1,48 @@
+import { Component, OnInit } from '@angular/core';
+import {
+ ComponentFixture,
+ TestBed,
+ fakeAsync,
+ tick,
+} from '@angular/core/testing';
+import { interval, takeUntil } from 'rxjs';
+import { injectDestroy } from './inject-destroy';
+
+describe(injectDestroy.name, () => {
+ describe('emits when the component is destroyed', () => {
+ @Component({ standalone: true, template: '' })
+ class TestComponent implements OnInit {
+ destroy$ = injectDestroy();
+ count = 0;
+
+ ngOnInit() {
+ interval(1000)
+ .pipe(takeUntil(this.destroy$))
+ .subscribe(() => this.count++);
+ }
+ }
+
+ let component: TestComponent;
+ let fixture: ComponentFixture<TestComponent>;
+
+ beforeEach(async () => {
+ fixture = TestBed.createComponent(TestComponent);
+ component = fixture.componentInstance;
+ });
+
+ it('should handle async stuff', fakeAsync(() => {
+ component.ngOnInit();
+
+ expect(component.count).toBe(0);
+ tick(1000);
+ expect(component.count).toBe(1);
+ tick(1000);
+ expect(component.count).toBe(2);
+
+ fixture.destroy(); // destroy the component here
+
+ tick(1000);
+ expect(component.count).toBe(2);
+ }));
+ });
+});

libs/ngxtension/inject-destroy/src/inject-destroy.ts

@@ -0,0 +1,44 @@
+import {
+ DestroyRef,
+ inject,
+ Injector,
+ runInInjectionContext,
+} from '@angular/core';
+import { assertInjector } from 'ngxtension/assert-injector';
+import { ReplaySubject } from 'rxjs';
+
+/**
+ * Injects the `DestroyRef` service and returns a `ReplaySubject` that emits
+ * when the component is destroyed.
+ *
+ * @throws {Error} If no `DestroyRef` is found.
+ * @returns {ReplaySubject<void>} A `ReplaySubject` that emits when the component is destroyed.
+ *
+ * @example
+ * // In your component:
+ * export class MyComponent {
+ * private destroy$ = injectDestroy();
+ *
+ * getData() {
+ * return this.service.getData()
+ * .pipe(takeUntil(this.destroy$))
+ * .subscribe(data => { ... });
+ * }
+ * }
+ */
+export const injectDestroy = (injector?: Injector) => {
+ injector = assertInjector(injectDestroy, injector);
+
+ return runInInjectionContext(injector, () => {
+ const destroyRef = inject(DestroyRef);
+
+ const subject$ = new ReplaySubject<void>(1);
+
+ destroyRef.onDestroy(() => {
+ subject$.next();
+ subject$.complete();
+ });
+
+ return subject$;
+ });
+};

libs/ngxtension/project.json

@@ -53,7 +53,9 @@
  "libs/ngxtension/repeat/**/*.ts",
  "libs/ngxtension/repeat/**/*.html",
  "libs/ngxtension/computed-from/**/*.ts",
- "libs/ngxtension/computed-from/**/*.html"
+ "libs/ngxtension/computed-from/**/*.html",
+ "libs/ngxtension/inject-destroy/**/*.ts",
+ "libs/ngxtension/inject-destroy/**/*.html"
  ]
  }
  },

tsconfig.base.json

@@ -25,6 +25,9 @@
  "ngxtension/create-injection-token": [
  "libs/ngxtension/create-injection-token/src/index.ts"
  ],
+ "ngxtension/inject-destroy": [
+ "libs/ngxtension/inject-destroy/src/index.ts"
+ ],
  "ngxtension/repeat": ["libs/ngxtension/repeat/src/index.ts"],
  "ngxtension/resize": ["libs/ngxtension/resize/src/index.ts"]
  }