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
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"
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