Skip to content

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

@PatrickSys

Description

@PatrickSys

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions