cant bind web components attributes to angular functions

[oskarerikssoncab]

I am using the Tinymce web component in my Angular 11 project and can't bind the event attributes to functions in my controller.

The attributes for styling the editor works.

If I use [attr.on-change]="someMethod()" the method gets invoked in some kind of forever loop and runs all the time even if the event are not suppose to be triggered. (see image below)

If I use [attr.on-change]="someMethod" (without invoking the function) i get this error (see image below)

And if i remove the on as the error message says, nothing happens. How do i use this web component in angular?
Thx

[exalate-issue-sync]

Ref: INT-2672

[tiny-james]

In case you were unaware there is a TinyMCE integration for Angular:
https://github.com/tinymce/tinymce-angular

[oskarerikssoncab]

@tiny-james , I have seen and tried the angular integration. Sadly, it do not work since i am creating a web component with a shadowDOM. And for some reason the angular version do not work when i have shadowDOM activated. But as soon as I inactivated it , it works.....

Might I be missing something?

[tiny-james]

If you have a usecase for the angular integration that doesn't work then I'd suggest opening an issue on that repository with a replication case and we can take a look at it. We likely have not tried to use it with shadow-dom as it's not a common request.

As for the webcomponent - it was designed for working in a pure HTML situation so we haven't tested with any frameworks. I note that the error is not coming from our component so I don't know how we'd go about fixing it.