Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

property binding to web component doesn't work as expected #153

Open
PatrickSys opened this issue Oct 17, 2023 · 0 comments
Open

property binding to web component doesn't work as expected #153

PatrickSys opened this issue Oct 17, 2023 · 0 comments

Comments

@PatrickSys
Copy link

PatrickSys commented Oct 17, 2023

Might be related to #50 and #54

Hello,
I am consuming web components (built using @angular/elements) on my SPA the following way as stated in the docs and examples:
<ax-lazy-element
*axLazyElementDynamic="
'tag'';
url: 'http://127.0.0.1:8080/main.js';
module: false;
"
[language]="language"
[configuration]=configuration
>

The problem I am having is that the first onChanges and the inputs are actually bound after the ngOnInit, so on the ngOnInit none of the inputs are available.
I have done a workaround through this by doing a setTimeout on the ngOnInit and executing all stuff inside it but that is kind of ugly.

If loading the web component the "static way" then the sequence is as expected: input bound -> onChanges -> onInit:
<my-web-comp
[language]="language"
[configuration]="configuration"

(bundle is load through code)

The only thing that has worked so far is passing the inputs as attributes, e.g: configuration='configuration' then the web component follows the expected sequence again: input bound -> onChanges ->onInit, however the value received is a string, not the variable.
Doing configuration={{configuration}} will bind the inputs late as well, and the value will be '[object] [object]' which is even worse.
I have also tried binding the props as attributes: [attr.configuration]=configuration, which will also bind the inputs after the onInit.

One thing that might be related, is that the angular language service complains about that the inputs are not known: Property configuration is not provided by any applicable directives nor by ax-lazy-element element, but I have followed the docs and I cannot find any mistake by my side.

Is there any known workaround, or fix I could do from the shell app?
Thanks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant