angular · chintankavathia · Jun 18, 2025
diff --git a/packages/elements/src/create-custom-element.ts b/packages/elements/src/create-custom-element.ts
@@ -6,7 +6,7 @@
 * found in the LICENSE file at https://angular.dev/license
 */

-import {Injector, Type} from '@angular/core';
+import {Injector, Type, isSignal} from '@angular/core';
 import {Subscription} from 'rxjs';

 import {ComponentNgElementStrategyFactory} from './component-factory-strategy';
@@ -237,10 +237,11 @@ export function createCustomElement<P>(
  }

  // Add getters and setters to the prototype for each property input.
-  inputs.forEach(({propName, transform}) => {
+  inputs.forEach(({propName, transform, isSignal: _isSignal}) => {
    Object.defineProperty(NgElementImpl.prototype, propName, {
      get(): any {
-        return this.ngElementStrategy.getInputValue(propName);
+        const inputValue = this.ngElementStrategy.getInputValue(propName);
+        return _isSignal && isSignal(inputValue) ? inputValue() : inputValue;
      },
      set(newValue: any): void {
        this.ngElementStrategy.setInputValue(propName, newValue, transform);

diff --git a/packages/elements/test/create-custom-element_spec.ts b/packages/elements/test/create-custom-element_spec.ts
@@ -14,8 +14,11 @@ import {
  Injector,
  input,
  Input,
+  isSignal,
  NgModule,
  Output,
+  signal,
+  WritableSignal,
 } from '@angular/core';
 import {BrowserModule, platformBrowser} from '@angular/platform-browser';
 import {Subject} from 'rxjs';
@@ -316,6 +319,29 @@ describe('createCustomElement', () => {
    expect(strategy.inputs.get('fooSignal')).toBe('value-signal');
  });

+  it('should return value from input getter for input signal', () => {
+    const {selector, ElementCtor} = createTestCustomElementForSignal();
+    const element = document.createElement(selector) as HTMLElement & {
+      fooSignal: string | null;
+    };
+    element.setAttribute('foo-signal', 'value-signal');
+
+    customElements.define(selector, ElementCtor);
+    testContainer.appendChild(element);
+    expect(element.fooSignal).toBe('value-signal');
+  });
+
+  it('should not unpack signal value with input decorator having signal as value', () => {
+    const {selector, ElementCtor} = createTestCustomElementForSignal();
+    const element = document.createElement(selector) as HTMLElement & {
+      fooFoo: WritableSignal<string | null>;
+    };
+
+    customElements.define(selector, ElementCtor);
+    testContainer.appendChild(element);
+    expect(isSignal(element.fooFoo)).toBe(true);
+  });
+
  // Helpers
  function createAndRegisterTestCustomElement(strategyFactory: NgElementStrategyFactory) {
    const {selector, ElementCtor} = createTestCustomElement(strategyFactory);
@@ -332,6 +358,13 @@ describe('createCustomElement', () => {
    };
  }

+  function createTestCustomElementForSignal() {
+    return {
+      selector: `test-element-${++selectorUid}`,
+      ElementCtor: createCustomElement(TestSignalComponent, {injector}),
+    };
+  }
+
  @Component({
    selector: 'test-component',
    template: 'TestComponent|foo({{ fooFoo }})|bar({{ barBar }})',
@@ -349,9 +382,21 @@ describe('createCustomElement', () => {
    @Output() bazBaz = new EventEmitter<boolean>();
    @Output('quxqux') quxQux = new EventEmitter<Object>();
  }
+
+  @Component({
+    selector: 'test-signal-component',
+    template: 'TestSignalComponent|foo({{ fooFoo() }})|signal({{ fooSignal() }})',
+    standalone: false,
+  })
+  class TestSignalComponent {
+    @Input() fooFoo = signal<string | null>(null);
+    // This needs to apply the decorator and pass `isSignal`, because
+    // the compiler transform doesn't run against JIT tests.
+    @Input({isSignal: true} as Input) fooSignal = input<string | null>(null);
+  }
  @NgModule({
    imports: [BrowserModule],
-    declarations: [TestComponent],
+    declarations: [TestComponent, TestSignalComponent],
  })
  class TestModule implements DoBootstrap {
    ngDoBootstrap() {}