feat: Support angular template reference

[OrShalmayev]

Prerequisites

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

Describe the Feature Request

Currently, it's not possible to use a Stencil web component with template ref in Angular, which limits the flexibility of using Stencil components in Angular applications.

Describe the Use Case

I would like to request the feature of being able to use Stencil web components with template ref in Angular. Specifically, I want to be able to access the properties of the Stencil component using the template ref syntax in Angular templates.

For example, I have a Stencil component called "my-icon" with a property "iconName". I want to be able to use this component in an Angular template as follows:

<my-icon #myIcon [iconName]="myIcon.myIconProperty.ANNOUNCEMENT"></my-icon>

Here, the "myIcon" template reference variable is used to access the "myIconProperty" property of the Stencil component and set the value of the "iconName" property.

Describe Preferred Solution

No response

Describe Alternatives

No response

Related Code

No response

Additional Information

This feature will enhance the interoperability between Stencil and Angular, allowing developers to use Stencil components more easily in their Angular applications. It will also improve the developer experience and make it more intuitive and consistent with the Angular syntax.

[ionitron-bot[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!

[christian-bromann]

Thanks for raising this issue, any contributions would be much appreciated.