feat: add NgModuleRef and EnvironmentInjector inputs to ndc-dynamic component

* Add `ndcDynamicNgModuleRef` input to `ndc-dynamic` component
* Add `ndcDynamicEnvironmentInjector` input to `ndc-dynamic` component

Co-authored-by: Mihail Goloborodov <[email protected]>
Co-authored-by: Alex Malkevich <[email protected]>

Author: 3 people

README.md

@@ -418,6 +418,9 @@ You can have more advanced stuff over your dynamically rendered components like
 or providing additional/overriding providers (`[ndcDynamicProviders]`) or both simultaneously
 or projecting nodes (`[ndcDynamicContent]`).
 
+**Since v10.6.0**: You can provide custom NgModuleRef (`[ndcDynamicNgModuleRef]`)
+or EnvironmentInjector (`[ndcDynamicEnvironmentInjector]`) for your dynamic component.
+
 NOTE: In practice functionality of this library is split in two pieces:
 
 - one - component (`ndc-dynamic`) that is responsible for instantiating and rendering of dynamic components;

projects/ng-dynamic-component/src/lib/dynamic.component.spec.ts

@@ -1,8 +1,12 @@
 /* eslint-disable @angular-eslint/component-selector */
 import {
   Component,
+  createNgModule,
+  EnvironmentInjector,
   InjectionToken,
   Injector,
+  NgModule,
+  NgModuleRef,
   StaticProvider,
   Type,
 } from '@angular/core';
@@ -21,6 +25,8 @@ describe('DynamicComponent', () => {
       [ndcDynamicInjector]="injector"
       [ndcDynamicProviders]="providers"
       [ndcDynamicContent]="content"
+      [ndcDynamicNgModuleRef]="ngModuleRef"
+      [ndcDynamicEnvironmentInjector]="environmentInjector"
       (ndcDynamicCreated)="createdComponent($event)"
     ></ndc-dynamic>`,
   })
@@ -29,6 +35,8 @@ describe('DynamicComponent', () => {
     injector?: Injector;
     providers?: StaticProvider[];
     content?: Node[][];
+    ngModuleRef?: NgModuleRef<unknown>;
+    environmentInjector?: EnvironmentInjector | NgModuleRef<unknown>;
     createdComponent = jest.fn();
   }
 
@@ -258,4 +266,104 @@ describe('DynamicComponent', () => {
       );
     });
   });
+
+  describe('@Input(ndcDynamicNgModuleRef)', () => {
+    const testToken = new InjectionToken<any>('TEST_TOKEN');
+    const testTokenValue = {};
+    let ngModuleRef: NgModuleRef<any>;
+    let parentInjector: Injector;
+
+    @NgModule({
+      providers: [{ provide: testToken, useValue: testTokenValue }],
+    })
+    class CustomNgModule {}
+
+    it('should use input if provided for ngModuleRef', async () => {
+      const fixture = await testSetup.redner();
+
+      parentInjector = TestBed.inject(NgModuleRef).injector;
+      ngModuleRef = createNgModule(CustomNgModule, parentInjector);
+      fixture.setHostProps({ ngModuleRef });
+
+      expect(fixture.getInjectedInjector().get(testToken)).toBe(testTokenValue);
+    });
+
+    it('should change component if input updated', async () => {
+      const fixture = await testSetup.redner();
+
+      parentInjector = TestBed.inject(NgModuleRef).injector;
+      ngModuleRef = createNgModule(CustomNgModule, parentInjector);
+      fixture.setHostProps({ ngModuleRef });
+
+      const injectedComp = fixture.getInjectedComponent();
+
+      expect(fixture.getInjectedInjector().get(testToken)).toBe(testTokenValue);
+
+      const testTokenValue2 = {};
+      @NgModule({
+        providers: [{ provide: testToken, useValue: testTokenValue2 }],
+      })
+      class CustomNgModule2 {}
+      ngModuleRef = createNgModule(CustomNgModule2, parentInjector);
+
+      fixture.setHostProps({ ngModuleRef });
+
+      expect(fixture.getInjectedInjector().get(testToken)).toBe(
+        testTokenValue2,
+      );
+      expect(fixture.getInjectedComponent()).not.toBe(injectedComp);
+    });
+  });
+
+  describe('@Input(ndcDynamicEnvironmentInjector)', () => {
+    const testToken = new InjectionToken<any>('TEST_TOKEN');
+    const testTokenValue = {};
+    let ngModuleRef: NgModuleRef<any>;
+    let environmentInjector: EnvironmentInjector;
+    let parentInjector: Injector;
+
+    @NgModule({
+      providers: [{ provide: testToken, useValue: testTokenValue }],
+    })
+    class CustomNgModule {}
+
+    it('should use input if provided for environmentInjector', async () => {
+      const fixture = await testSetup.redner();
+
+      parentInjector = TestBed.inject(NgModuleRef).injector;
+      ngModuleRef = createNgModule(CustomNgModule, parentInjector);
+      environmentInjector = ngModuleRef.injector;
+      fixture.setHostProps({ environmentInjector });
+
+      expect(fixture.getInjectedInjector().get(testToken)).toBe(testTokenValue);
+    });
+
+    it('should change component if input updated', async () => {
+      const fixture = await testSetup.redner();
+
+      parentInjector = TestBed.inject(NgModuleRef).injector;
+      ngModuleRef = createNgModule(CustomNgModule, parentInjector);
+      environmentInjector = ngModuleRef.injector;
+      fixture.setHostProps({ environmentInjector });
+
+      const injectedComp = fixture.getInjectedComponent();
+
+      expect(fixture.getInjectedInjector().get(testToken)).toBe(testTokenValue);
+
+      const testTokenValue2 = {};
+      @NgModule({
+        providers: [{ provide: testToken, useValue: testTokenValue2 }],
+      })
+      class CustomNgModule2 {}
+      ngModuleRef = createNgModule(CustomNgModule2, parentInjector);
+      environmentInjector = ngModuleRef.injector;
+
+      fixture.setHostProps({ environmentInjector });
+
+      expect(fixture.getInjectedInjector().get(testToken)).toBe(
+        testTokenValue2,
+      );
+      expect(fixture.getInjectedComponent()).not.toBe(injectedComp);
+    });
+  });
 });

projects/ng-dynamic-component/src/lib/dynamic.component.ts

@@ -1,9 +1,11 @@
 import {
   Component,
   ComponentRef,
+  EnvironmentInjector,
   EventEmitter,
   Injector,
   Input,
+  NgModuleRef,
   OnChanges,
   Output,
   SimpleChanges,
@@ -31,6 +33,8 @@ export class DynamicComponent<C = unknown>
     'ndcDynamicInjector',
     'ndcDynamicProviders',
     'ndcDynamicContent',
+    'ndcDynamicNgModuleRef',
+    'ndcDynamicEnvironmentInjector',
   ];
 
   @Input()
@@ -41,6 +45,10 @@ export class DynamicComponent<C = unknown>
   ndcDynamicProviders?: StaticProvider[] | null;
   @Input()
   ndcDynamicContent?: Node[][];
+  @Input()
+  ndcDynamicNgModuleRef?: NgModuleRef<unknown>;
+  @Input()
+  ndcDynamicEnvironmentInjector?: EnvironmentInjector | NgModuleRef<unknown>;
 
   @Output()
   ndcDynamicCreated = new EventEmitter<ComponentRef<C>>();
@@ -68,6 +76,8 @@ export class DynamicComponent<C = unknown>
         index: 0,
         injector: this._resolveInjector(),
         projectableNodes: this.ndcDynamicContent,
+        ngModuleRef: this.ndcDynamicNgModuleRef,
+        environmentInjector: this.ndcDynamicEnvironmentInjector,
       });
       this.ndcDynamicCreated.emit(this.componentRef);
     }