fix(lib): make sure all inputs chanegs are sent to new component

Also refactor ReflectService to simplify it and remove WindowRef related services

README.md

@@ -203,7 +203,7 @@ _HINT:_ You can override event literal by providing
 
 #### Output Handler Context
 
-**Since v7.1.0**
+**Since v10.4.0**
 
 You can specify the context (`this`) that will be used when calling
 the output handlers by providing either:

projects/ng-dynamic-component/src/lib/component-injector/component-outlet-injector.directive.spec.ts → projects/ng-dynamic-component/src/lib/component-injector/component-outlet/component-outlet-injector.directive.spec.ts

@@ -1,6 +1,6 @@
 /* eslint-disable @angular-eslint/component-selector */
 import { Component, ComponentRef, Type, ViewChild } from '@angular/core';
-import { TestSetup } from '../../test';
+import { TestSetup } from '../../../test';
 import { ComponentOutletInjectorDirective } from './component-outlet-injector.directive';
 
 describe('ComponentOutletInjectorDirective', () => {

projects/ng-dynamic-component/src/lib/component-injector/component-outlet-injector.directive.ts → projects/ng-dynamic-component/src/lib/component-injector/component-outlet/component-outlet-injector.directive.ts

@@ -4,7 +4,7 @@ import { ComponentRef, Directive, Host } from '@angular/core';
 import {
   DynamicComponentInjector,
   DynamicComponentInjectorToken,
-} from './token';
+} from '../token';
 
 @Directive({
   // eslint-disable-next-line @angular-eslint/directive-selector

projects/ng-dynamic-component/src/lib/component-injector/component-outlet-injector.module.ts → projects/ng-dynamic-component/src/lib/component-injector/component-outlet/component-outlet-injector.module.ts

@@ -2,10 +2,11 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
 import { ComponentOutletInjectorDirective } from './component-outlet-injector.directive';
+import { ComponentOutletIoDirective } from './component-outlet-io.directive';
 
 @NgModule({
   imports: [CommonModule],
-  exports: [ComponentOutletInjectorDirective],
-  declarations: [ComponentOutletInjectorDirective],
+  exports: [ComponentOutletInjectorDirective, ComponentOutletIoDirective],
+  declarations: [ComponentOutletInjectorDirective, ComponentOutletIoDirective],
 })
 export class ComponentOutletInjectorModule {}

projects/ng-dynamic-component/src/lib/component-injector/component-outlet/component-outlet-io.directive.spec.ts

@@ -0,0 +1,68 @@
+/* eslint-disable @angular-eslint/component-selector */
+import { Component, EventEmitter, Input, Output, Type } from '@angular/core';
+import { TestSetup } from '../../../test';
+import { ComponentOutletInjectorDirective } from './component-outlet-injector.directive';
+import { ComponentOutletIoDirective } from './component-outlet-io.directive';
+
+describe('Directive: ComponentOutletIo', () => {
+  @Component({ selector: 'dynamic', template: 'DynamicComponent' })
+  class DynamicComponent {
+    @Input() prop1: any;
+    @Input() prop2: any;
+    @Output() output = new EventEmitter<any>();
+  }
+
+  @Component({
+    selector: 'host',
+    template: `<ng-container *ngComponentOutlet="component"></ng-container>`,
+  })
+  class HostComponent {
+    component: Type<any>;
+  }
+
+  const testSetup = new TestSetup(HostComponent, {
+    props: { component: DynamicComponent },
+    ngModule: {
+      declarations: [
+        ComponentOutletIoDirective,
+        ComponentOutletInjectorDirective,
+        DynamicComponent,
+      ],
+    },
+  });
+
+  describe('inputs with `NgComponentOutlet` * syntax', () => {
+    it('should be passed to dynamic component instance', async () => {
+      const inputs = { prop1: '123', prop2: 1 };
+
+      const fixture = await testSetup.redner<{ inputs: any }>({
+        props: { inputs },
+        template: `<ng-container *ngComponentOutlet="component; ndcDynamicInputs: inputs"></ng-container>`,
+      });
+
+      expect(fixture.getComponent(DynamicComponent)).toEqual(
+        expect.objectContaining({
+          prop1: '123',
+          prop2: 1,
+        }),
+      );
+    });
+  });
+
+  describe('outputs with `NgComponentOutlet` * syntax', () => {
+    it('should be passed to dynamic component instance', async () => {
+      const outputs = { output: jest.fn() };
+
+      const fixture = await testSetup.redner<{ outputs: any }>({
+        props: { outputs },
+        template: `<ng-container *ngComponentOutlet="component; ndcDynamicOutputs: outputs"></ng-container>`,
+      });
+
+      expect(outputs.output).not.toHaveBeenCalled();
+
+      fixture.getComponent(DynamicComponent).output.emit('data');
+
+      expect(outputs.output).toHaveBeenCalledWith('data');
+    });
+  });
+});

projects/ng-dynamic-component/src/lib/component-injector/component-outlet/component-outlet-io.directive.ts

@@ -0,0 +1,26 @@
+import { Directive, DoCheck, Input } from '@angular/core';
+
+import { InputsType, IoService, OutputsType } from '../../io';
+
+@Directive({
+  selector:
+    // eslint-disable-next-line @angular-eslint/directive-selector
+    '[ngComponentOutletNdcDynamicInputs],[ngComponentOutletNdcDynamicOutputs]',
+  exportAs: 'ndcDynamicIo',
+  providers: [IoService],
+})
+export class ComponentOutletIoDirective implements DoCheck {
+  @Input()
+  ngComponentOutletNdcDynamicInputs: InputsType;
+  @Input()
+  ngComponentOutletNdcDynamicOutputs: OutputsType;
+
+  constructor(private ioService: IoService) {}
+
+  ngDoCheck() {
+    this.ioService.update(
+      this.ngComponentOutletNdcDynamicInputs,
+      this.ngComponentOutletNdcDynamicOutputs,
+    );
+  }
+}

projects/ng-dynamic-component/src/lib/component-injector/component-outlet/index.ts

@@ -0,0 +1,3 @@
+export * from './component-outlet-io.directive';
+export * from './component-outlet-injector.directive';
+export * from './component-outlet-injector.module';

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

@@ -1,3 +1,2 @@
 export * from './token';
-export * from './component-outlet-injector.directive';
-export * from './component-outlet-injector.module';
+export * from './component-outlet';

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

@@ -2,7 +2,6 @@ import {
   Directive,
   DoCheck,
   Inject,
-  Injector,
   Input,
   KeyValueChanges,
   KeyValueDiffers,
@@ -45,17 +44,17 @@ export class DynamicAttributesDirective implements DoCheck {
     );
   }
 
-  private get _nativeElement() {
+  private get nativeElement() {
     return this.componentInjector.componentRef?.location.nativeElement;
   }
 
-  private get _compType() {
+  private get compType() {
     return this.componentInjector.componentRef?.componentType;
   }
 
-  private get _isCompChanged() {
-    if (this.lastCompType !== this._compType) {
-      this.lastCompType = this._compType;
+  private get isCompChanged() {
+    if (this.lastCompType !== this.compType) {
+      this.lastCompType = this.compType;
       return true;
     }
     return false;
@@ -64,40 +63,38 @@ export class DynamicAttributesDirective implements DoCheck {
   constructor(
     private renderer: Renderer2,
     private differs: KeyValueDiffers,
-    private injector: Injector,
     @Inject(DynamicComponentInjectorToken)
     @Optional()
     private componentInjector?: DynamicComponentInjector,
   ) {}
 
   ngDoCheck(): void {
-    const isCompChanged = this._isCompChanged;
+    const isCompChanged = this.isCompChanged;
     const changes = this.attrsDiffer.diff(this._attributes);
 
     if (changes) {
-      this.lastAttrActions = this._changesToAttrActions(changes);
+      this.lastAttrActions = this.changesToAttrActions(changes);
     }
 
     if (changes || (isCompChanged && this.lastAttrActions)) {
-      this._updateAttributes(this.lastAttrActions);
+      this.updateAttributes(this.lastAttrActions);
     }
   }
 
   setAttribute(name: string, value: string, namespace?: string) {
-    if (this._nativeElement) {
-      this.renderer.setAttribute(this._nativeElement, name, value, namespace);
+    if (this.nativeElement) {
+      this.renderer.setAttribute(this.nativeElement, name, value, namespace);
     }
   }
 
   removeAttribute(name: string, namespace?: string) {
-    if (this._nativeElement) {
-      this.renderer.removeAttribute(this._nativeElement, name, namespace);
+    if (this.nativeElement) {
+      this.renderer.removeAttribute(this.nativeElement, name, namespace);
     }
   }
 
-  private _updateAttributes(actions: AttributeActions) {
-    // ? Early exit if no dynamic component
-    if (!this._compType) {
+  private updateAttributes(actions: AttributeActions) {
+    if (!this.compType) {
       return;
     }
 
@@ -108,7 +105,7 @@ export class DynamicAttributesDirective implements DoCheck {
     actions.remove.forEach((key) => this.removeAttribute(key));
   }
 
-  private _changesToAttrActions(
+  private changesToAttrActions(
     changes: KeyValueChanges<string, string>,
   ): AttributeActions {
     const attrActions: AttributeActions = {

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

@@ -23,7 +23,7 @@ import {
 } from '../component-injector';
 import { InputsType, IoFactoryService, IoService, OutputsType } from '../io';
 import { extractNgParamTypes, isOnDestroy } from '../util';
-import { ReflectRefService } from '../window-ref/reflect-ref.service';
+import { ReflectService } from '../reflect';
 
 export interface DynamicDirectiveDef<T> {
   type: Type<T>;
@@ -109,7 +109,7 @@ export class DynamicDirectivesDirective implements OnDestroy, DoCheck {
     private injector: Injector,
     private iterableDiffers: IterableDiffers,
     private ioFactoryService: IoFactoryService,
-    private reflectRefService: ReflectRefService,
+    private reflectService: ReflectService,
     @Inject(DynamicComponentInjectorToken)
     @Optional()
     private componentInjector?: DynamicComponentInjector,
@@ -209,10 +209,9 @@ export class DynamicDirectivesDirective implements OnDestroy, DoCheck {
     dirRef: DirectiveRef<any>,
     dirDef: DynamicDirectiveDef<any>,
   ) {
-    const io = this.ioFactoryService.create();
-    io.init(
+    const io = this.ioFactoryService.create(
       { componentRef: this.dirToCompDef(dirRef, dirDef) },
-      { trackOutputChanges: true },
+      { trackOutputChanges: true, injector: this.injector },
     );
     io.update(dirDef.inputs, dirDef.outputs);
     this.dirIo.set(dirRef.type, io);
@@ -266,7 +265,7 @@ export class DynamicDirectivesDirective implements OnDestroy, DoCheck {
       // First try Angular Compiler's metadata
       extractNgParamTypes(dirType) ??
       // Then fallback to Reflect API
-      this.reflectRefService.getCtorParamTypes(dirType) ??
+      this.reflectService.getCtorParamTypes(dirType) ??
       // Bailout
       []
     );

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

@@ -17,9 +17,9 @@ import {
 import { TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { TestFixture, TestSetup } from '../../test';
-import { ComponentOutletInjectorDirective } from '../component-injector';
+import { ComponentOutletInjectorModule } from '../component-injector';
 import { DynamicComponent as NdcDynamicComponent } from '../dynamic.component';
-import { IoEventArgumentToken, InputsType, OutputsType } from '../io';
+import { InputsType, IoEventArgumentToken, OutputsType } from '../io';
 import {
   IoEventContextProviderToken,
   IoEventContextToken,
@@ -81,12 +81,8 @@ describe('Directive: DynamicIo', () => {
   const testSetup = new TestSetup(HostComponent, {
     props: { component: DynamicComponent },
     ngModule: {
-      imports: [CommonModule],
-      declarations: [
-        DynamicComponent,
-        DynamicIoDirective,
-        ComponentOutletInjectorDirective,
-      ],
+      imports: [CommonModule, ComponentOutletInjectorModule],
+      declarations: [DynamicComponent, DynamicIoDirective],
     },
     fixtureCtor: DynamicTestFixture,
   });
@@ -209,6 +205,29 @@ describe('Directive: DynamicIo', () => {
       });
     });
 
+    it('should trigger `ngOnChanges` life-cycle hook if inputs and component updated', async () => {
+      @Component({ selector: 'dynamic2', template: '' })
+      class Dynamic2Component extends DynamicComponent {}
+
+      const inputs = { input1: 'val1', input2: 'val2' };
+
+      const fixture = await testSetup.redner({
+        props: { inputs },
+        ngModule: { declarations: [Dynamic2Component] },
+      });
+
+      inputs.input1 = 'new-val1';
+      fixture.setHostProps({ component: Dynamic2Component });
+
+      const component = fixture.getComponent(Dynamic2Component);
+
+      expect(component.ngOnChangesSpy).toHaveBeenCalledTimes(1);
+      expect(component.ngOnChangesSpy).toHaveBeenCalledWith({
+        input1: new SimpleChange(undefined, 'new-val1', true),
+        input2: new SimpleChange(undefined, 'val2', true),
+      });
+    });
+
     it('should render inputs with Default strategy', async () => {
       const inputs = { input1: 'val1', input2: 'val2', input3Renamed: 'val3' };
 
@@ -297,36 +316,6 @@ describe('Directive: DynamicIo', () => {
         testSetup.redner({ props: { inputs, component: null } }),
       ).resolves.not.toThrow();
     });
-
-    it('should call `ngOnChanges` once when inputs and component updated', async () => {
-      @Component({ selector: 'dynamic2', template: '' })
-      class Dynamic2Component implements OnChanges {
-        @Input() input1: any;
-        @Input() input2: any;
-        ngOnChangesSpy = jest.fn();
-        ngOnChanges(changes: SimpleChanges): void {
-          this.ngOnChangesSpy(changes);
-        }
-      }
-
-      const inputs = { input1: 'val1', input2: 'val2' };
-
-      const fixture = await testSetup.redner({
-        props: { inputs },
-        ngModule: { declarations: [Dynamic2Component] },
-      });
-
-      inputs.input1 = 'new-val1';
-      fixture.setHostProps({ component: Dynamic2Component });
-
-      const component = fixture.getComponent(Dynamic2Component);
-
-      expect(component.ngOnChangesSpy).toHaveBeenCalledTimes(1);
-      expect(component.ngOnChangesSpy).toHaveBeenCalledWith({
-        input1: new SimpleChange(undefined, 'new-val1', true),
-        input2: new SimpleChange(undefined, 'val2', true),
-      });
-    });
   });
 
   describe('outputs', () => {
@@ -647,7 +636,7 @@ describe('Directive: DynamicIo', () => {
           <ng-container
             *ngComponentOutlet="component; ndcDynamicInputs: inputs"
           ></ng-container>
-      `,
+        `,
       });
 
       expect(fixture.getDynamicComponent()).toEqual(
@@ -669,7 +658,7 @@ describe('Directive: DynamicIo', () => {
             [ndcDynamicComponent]="component"
             [ndcDynamicInputs]="inputs"
           ></ndc-dynamic>
-      `,
+        `,
         ngModule: { declarations: [NdcDynamicComponent] },
       });