How to use callbacks of converted web components in angular?

[buxbunny110]

I've tried many things, but it's not working. Is it even possible? please at least explain how to do that, I can't seem to find anywhere. I have 'on-expand' prop for example how to bind it to angular handler?

[mchill]

I managed to get it working. One caveat about your example is that you can't bind a property in Angular that starts with on. You'll have to change the name of your prop.

The trick is to change the R2WC prop type. The function prop should be given the value undefined instead of 'function'. This lets R2WC pass the raw value of the web component property to your React component.

const WebComponent = r2wc(ReactComponent, { props: {
  handleExpand: undefined,
} });

After that, I was able to add a function in my Angular component:

handleExpand = () => {
  console.log('called handleExpand');
};

And bind it in the template:

<my-component [handleExpand]="handleExpand"></my-component>