0.7.6 feature integration on Angular


#1

Hey guys! I’ve been trying to integrate the new Stencil feature released on 0.7.6 (add listeners to specific elements within JSX) with Angular, but nothing seems to work so far.
Stencil component:

Calling stencil component on angular:

<base-input onValueChange={"(ev) => this.testing(ev)"} ></base-input>

Function used:

testing(ev){
    console.log("it works!");
    console.log(ev);
}

Result:

As you can see, only the stencil console.log has been fired.
Am i doing something wrong? Im new to Stencil and to web components, sorry if i did something very newbie here.

ps: sorry to not provide the source code, it’s from an already growth project… and i didnt had time to make a simple example…
ps2: if someone could make this work, even on a simple example, would be so awesome!
Thank you!


#2

ionic-angular doesn’t talk well to the Stencil shadow dom. This problem is fixed in Ionic 4, but I’ve temporarily stopped developing with Stencil because I got burned by this. I think for now it’s safest to use Stencil to create web components that communicate with vanilla JS.