bug: Angular Wrapper doesnt add properties to proxies interface

[DaniloATellinghusen]

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

3.3.1

Current Behavior

when I build my components with the Stencil Angular wrapper I found out that the wrapper is not adding the component properties to the proxies.d.ts interface.

So it is not possible to use the properties in Angular together with the Angular templates.

e.g. after build I got this proxies.d.ts

//proxies.d.ts

export declare interface MyInput extends Components.MyInput {
    myChangeEvent: EventEmitter<CustomEvent<void>>;

    myInvalidEvent: EventEmitter<CustomEvent<ValidityState>>;    
}

My Component events are in the interface so that I can use it in angular directly from the component ref element.

But I would assume something like that where my component properties are also added to the interface:

//proxies.d.ts

export declare interface MyInput extends Components.MyInput {
    myChangeEvent: EventEmitter<CustomEvent<void>>;

    myInvalidEvent: EventEmitter<CustomEvent<ValidityState>>;    

    value: string;

    maxlength: number;
}

When this would be the case I could use these properties directly from the Angular ref Element (templates)

e.g.

  <my-input #myPhoneInput placeholder="Phone Number" maxlength="16">
    <span slot="label">Label</span>
    <span slot="description">Description</span>
  </my-input>

  <button type="button" (click)="callPhone(myPhoneInput.value)">Call</button>

But when I try to use the template and to get the property “value” from it myPhoneInput.value then the IDE is complaining: “Unresolved variable value”. Because the property value is not part of the component interface.

Expected Behavior

Angular Wrapper add properties to proxies interface so that it is possible to use these properties with Angular templates.

System Info

No response

Steps to Reproduce

Build an Angular package within an stencil project.

Use this package in an Angular project.

Try to use component properties e.g. value in Angular templates:

`<my-input #myPhoneInput placeholder="Phone Number" maxlength="16">
Label
Description

<button type="button" (click)="callPhone(myPhoneInput.value)">Call`

Code Reproduction URL

https://github.com/DaniloATellinghusen/stencil-basic-project

Additional Information

No response

[ionitron-bot]

Thanks for the issue! This issue has been labeled as holiday triage. With the winter holidays quickly approaching, much of the Stencil Team will soon be taking time off. During this time, issue triaging and PR review will be delayed until the team begins to return. After this period, we will work to ensure that all new issues & PRs are properly triaged.

In the meantime, please read our 2023 Winter Holiday Triage Guide for information on how to ensure that your issue is triaged correctly.

Thank you!

[rwaskiewicz]

Hey @DaniloATellinghusen 👋

Thanks for the issue! I'm going to move this over to the stencil-ds-output-targets repo, as this pertains to the Angular Output Target. Please note that we are currently providing maintenance for the project for the Ionic Framework, and may not be able to investigate this deeper in a timely manner. Thanks for your understanding!

[ionitron-bot]

This issue has been labeled as help wanted. This label is added to issues that we believe would be good for contributors.

If you'd like to work on this issue, please comment here letting us know that you would like to submit a pull request for it. This helps us to keep track of the pull request and make sure there isn't duplicated effort.
Thank you!