Fix: Added support for new signal-based inputs

Author: MTobisch

CHANGELOG.md

@@ -4,6 +4,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+## [3.0.4] - 2024-09-26
+### Maintenance
+- Fix: Added support for new signal-based inputs
+
 ## [3.0.3] - 2024-09-05
 ### Maintenance
 - Fix: Change detection is now manually triggered when dynamic component inputs change in zoneless mode with OnPush strategy
@@ -138,7 +142,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 ### Added
 - This was the initial release, so everything was added here, really.
 
-[Unreleased]: https://github.com/Angular-Dynamic-Hooks/ngx-dynamic-hooks/compare/v3.0.3...HEAD
+[Unreleased]: https://github.com/Angular-Dynamic-Hooks/ngx-dynamic-hooks/compare/v3.0.4...HEAD
+[3.0.4]: https://github.com/Angular-Dynamic-Hooks/ngx-dynamic-hooks/compare/v3.0.3...v3.0.4
 [3.0.3]: https://github.com/Angular-Dynamic-Hooks/ngx-dynamic-hooks/compare/v3.0.2...v3.0.3
 [3.0.2]: https://github.com/Angular-Dynamic-Hooks/ngx-dynamic-hooks/compare/v3.0.1...v3.0.2
 [3.0.1]: https://github.com/Angular-Dynamic-Hooks/ngx-dynamic-hooks/compare/v3.0.0...v3.0.1

projects/ngx-dynamic-hooks/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-dynamic-hooks",
-  "version": "3.0.3",
+  "version": "3.0.4",
   "description": "Automatically insert live Angular components into a dynamic string of content (based on their selector or any pattern of your choice) and render the result in the DOM.",
   "person": "Marvin Tobisch <[email protected]>",
   "license": "MIT",

projects/ngx-dynamic-hooks/src/lib/services/core/componentUpdater.ts

@@ -158,8 +158,11 @@ export class ComponentUpdater {
 
     // Set inputs in component
     for (const {propName, templateName, value} of existingInputs) {
-      if (templateName) hook.componentRef?.setInput(templateName, value);   // Sets property, triggers OnChanges and marks for OnPush
-      if (propName) hook.componentRef!.instance[propName] = value;          // Manual setting of input for acceptInputsForAnyProperty
+      if (templateName) {
+        hook.componentRef?.setInput(templateName, value);             // Official method to set inputs. Sets property, triggers OnChanges and marks for OnPush. Also works with new signal inputs.
+      } else if (propName) {
+        hook.componentRef!.instance[propName] = value;                // Resort to manual setting only if prop isn't a declared input (may happen with "acceptInputsForAnyProperty")
+      }
     }
 
     // Important: Still need to trigger cd, even with componentRef.setInput

projects/ngx-dynamic-hooks/src/tests/integration/componentBindings.spec.ts

@@ -3,6 +3,7 @@ import { defaultBeforeEach } from './shared';
 import { TestBed, TestBedStatic } from '@angular/core/testing';
 import { DynamicHooksComponent, DynamicHooksService } from '../testing-api';
 import { GenericSingleTagStringParser } from '../resources/parsers/genericSingleTagStringParser';
+import { SingleTagTestComponent } from '../resources/components/singleTag/singleTagTest.c';
 
 describe('Component bindings', () => {
   let testBed: TestBedStatic;
@@ -42,6 +43,28 @@ describe('Component bindings', () => {
     expect(loadedComp.simpleObject).toBe(someObj);
   });
 
+  it('#should also work with the newer signal inputs (ng17+)', () => {
+    const someObj = {randomProperty: "Hopefully, it also works with signal inputs!"};
+
+    const genericSingleTagParser = TestBed.inject(GenericSingleTagStringParser);
+    genericSingleTagParser.onGetBindings = (hookId, hookValue, context) => {
+      return {
+        inputs: {
+          signalInput: someObj
+        }
+      }
+    }
+
+    const testText = `Just some component: [singletag-string]">`;
+    comp.content = testText;
+    comp.context = context;
+    comp.ngOnChanges({content: true, context: true, options: true} as any);
+
+    const loadedComp = comp.hookIndex[1].componentRef!.instance as SingleTagTestComponent;
+    expect(loadedComp.signalInput).toBeInstanceOf(Function);
+    expect(loadedComp.signalInput()).toBe(someObj);
+  });
+
   it('#should subscribe to outputs of dynamic components', () => {
     let testVar: any = null;
 

projects/ngx-dynamic-hooks/src/tests/resources/components/abstractTest.c.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, AfterViewInit, OnDestroy, Input, OnChanges, ChangeDetectorRef, Output, EventEmitter, Inject, DoCheck, Optional, InjectionToken, EnvironmentInjector, Injector, NgZone } from '@angular/core';
+import { Component, OnInit, AfterViewInit, OnDestroy, Input, OnChanges, ChangeDetectorRef, Output, EventEmitter, Inject, DoCheck, Optional, InjectionToken, EnvironmentInjector, Injector, NgZone, input } from '@angular/core';
 import { DynamicContentChild, OnDynamicData, OnDynamicChanges, OnDynamicMount } from '../../testing-api';
 import { RootTestService } from '../services/rootTestService';
 import { GENERICINJECTIONTOKEN } from '../services/genericInjectionToken';
@@ -34,6 +34,7 @@ export class AbstractTestComponent implements OnDynamicMount, OnDynamicChanges,
   @Input() nestedFunctions: any;
   @Input() nestedFunctionsInBrackets!: Array<any>;
   @Input() everythingTogether!: Array<any>;
+  signalInput = input();
   nonOutputEventEmitter: EventEmitter<number> = new EventEmitter();
   @Output() genericOutput: EventEmitter<number> = new EventEmitter();
   @Output() genericOtherOutput: EventEmitter<number> = new EventEmitter();