fix(elements): return value on signal input getter (angular#62113)

BREAKING CHANGE: Fix signal input getter behavior in custom elements.

Before this change, signal inputs in custom elements required function calls to access their values (`elementRef.newInput()`), while decorator inputs were accessed directly (`elementRef.oldInput`). This inconsistency caused confusion and typing difficulties.

The getter behavior has been standardized so signal inputs can now be accessed directly, matching the behavior of decorator inputs:

Before:
- Decorator Input: `elementRef.oldInput`
- Signal Input: `elementRef.newInput()`

After:
- Decorator Input: `elementRef.oldInput`
- Signal Input: `elementRef.newInput`

closes angular#62097

PR Close angular#62113

Author: chintankavathia

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);

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() {}