feat(components/core): add ability to provide a parent injector when constructing components via the SkyDynamicComponentService (#793)

Author: Blackbaud-TrevorBurch

libs/components/core/src/lib/modules/dynamic-component/dynamic-component-options.ts

@@ -1,4 +1,4 @@
-import { StaticProvider } from '@angular/core';
+import { Injector, StaticProvider } from '@angular/core';
 
 import { SkyDynamicComponentLocation } from './dynamic-component-location';
 
@@ -20,4 +20,9 @@ export interface SkyDynamicComponentOptions {
    * The reference element used when using the `ElementTop` or `ElementBottom` locations.
    */
   referenceEl?: HTMLElement;
+
+  /**
+   * Parent injector to use instead of the dynamic component service's injector
+   */
+  parentInjector?: Injector;
 }

libs/components/core/src/lib/modules/dynamic-component/dynamic-component.service.spec.ts

@@ -2,6 +2,7 @@ import {
   ApplicationRef,
   ComponentRef,
   EmbeddedViewRef,
+  Injector,
   StaticProvider,
 } from '@angular/core';
 import { TestBed, inject } from '@angular/core/testing';
@@ -18,7 +19,8 @@ describe('Dynamic component service', () => {
   function createTestComponent(
     location?: SkyDynamicComponentLocation,
     reference?: HTMLElement,
-    providers?: StaticProvider[]
+    providers?: StaticProvider[],
+    injector?: Injector
   ): ComponentRef<DynamicComponentTestComponent> {
     const svc: SkyDynamicComponentService = TestBed.inject(
       SkyDynamicComponentService
@@ -29,6 +31,7 @@ describe('Dynamic component service', () => {
         location: location,
         referenceEl: reference,
         providers,
+        parentInjector: injector,
       });
 
     cmpRef.changeDetectorRef.detectChanges();
@@ -160,6 +163,21 @@ describe('Dynamic component service', () => {
     );
   });
 
+  it('should use a parent injector if supplied', () => {
+    const injector: Injector = Injector.create({
+      providers: [{ provide: 'greeting', useValue: 'My name is Pat.' }],
+      name: 'test injector',
+    });
+    createTestComponent(undefined, undefined, undefined, injector);
+
+    const el = getComponentEl(0);
+
+    expect(document.body.lastChild).toBe(el);
+    expect(el.querySelector('.component-test')).toHaveText(
+      'Hello world My name is Pat.'
+    );
+  });
+
   it('should throw error if placing a component before an undefined element', () => {
     expect(() =>
       createTestComponent(

libs/components/core/src/lib/modules/dynamic-component/dynamic-component.service.ts

@@ -64,7 +64,7 @@ export class SkyDynamicComponentService {
 
     const injector = Injector.create({
       providers: options.providers || [],
-      parent: this.#injector,
+      parent: options.parentInjector || this.#injector,
     });
 
     const componentRef = createComponent<T>(componentType, {