bug: Two-way binding broken between Angular template-driven forms and Stencil

[fredppro]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Stencil Version

4.36.0-current

Current Behavior

When using Stencil’s Angular value accessor, the writeValue method is invoked as expected and receives the correct value from the Angular form. However, the underlying logic responsible for applying this value to the Stencil web component (i.e., writing to the host component’s value property) does not appear to execute correctly. As a result, the value is not actually set on the host component. This issue only occurs when using Angular Template-driven forms; Reactive forms continue to function as expected. This behavior appears to be a regression introduced in Stencil v4.36.0 and later versions, as the same setup works correctly in v4.35.3.

Expected Behavior

When using Stencil’s Angular value accessor with template-driven forms, the value provided by Angular (via ngModel) should be correctly propagated through the writeValue method and applied to the Stencil web component by updating the host component’s value property. The component should remain fully synchronized with the form state, behaving consistently with reactive forms and with prior Stencil versions (e.g. v4.35.3), where this integration worked as expected.

System Info

Platform: windows (10.0.26100)
   CPU Model: Intel Xeon Processor (Icelake) (4 cpus)
    Compiler: C:\dev\projects\design-system\node_modules\@stencil\core\compiler\stencil.js
       Build: 1752598220
     Stencil: 4.36.0
  TypeScript: 5.5.4
      Rollup: 4.34.9
      Parse5: 7.2.1
      jQuery: 4.0.0-pre
      Terser: 5.37.0

Steps to Reproduce

1. Create a form-associated Stencil web component (using ElementInternals) that exposes a value property (e.g. a text input–like component).
2. Enable Angular support for the component and use the Stencil-generated Angular value accessor for a text-type value.
3. Build the Stencil component and include it in an Angular application.
4. In Angular, create a template-driven form using FormsModule.
5. Use the Stencil web component inside the template-driven form and bind it with ngModel, for example:

<my-text-field [(ngModel)]="modelValue" name="field"></my-text-field>

6. Initialize or update modelValue from the Angular component class.
7. Observe that the Angular value accessor’s writeValue method is called with the correct value.
8. Observe that the value is not written to the Stencil web component’s host element (the component’s value property is not updated) - using lifecycle hooks also doesn't seem to do the job as the value is not even received in any of them.

Code Reproduction URL

to-be-added

Additional Information

• I've tested the subsequent versions since v4.35.3 and they all seem to suffer from the same issue;
• Used @stencil/angular-output-target@0.10.2 to generate all Angular related code - also tested with later versions, the issue seems to persist.

[github-actions]

We need a minimal reproduction to be able to triage this issue.

Why do we need a minimal reproduction?

Reproductions allow the team to triage and fix issues quickly with a relatively small team. They help us identify the source of the problem and verify that the issue is not caused by something specific to your project.

How can I create a reproduction?

Please use our Stencil Starter to create a minimal reproduction.

Other starter templates

Template	CodeSandbox
Stencil + Vitest	stencil-starter-vitest
Angular	stencil-angular-starter
NextJs	stencil-starter-next
React	stencil-starter-react
Vue	stencil-starter-vue

A reproduction should be as minimal as possible. This means removing any code that is not directly related to the issue. The less code there is, the easier it is to identify the problem.

You can also provide a link to a public GitHub repository that demonstrates the issue.

What happens next?

• If you provide a valid reproduction link, this issue will be triaged and addressed based on priority.
• If no reproduction is provided within 14 days, this issue may be automatically closed.
• You can always reopen the issue by providing a reproduction link.

---

Resources:

• How to create a Minimal, Reproducible Example
• The Importance of Reproductions