Angular Wrapper doesnt add properties to proxies interface

Stencil
1

Hi,

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.

Is there any config or something like that to force stencil to add the component properties to the component interface too?

1 Like