4

I am trying create components dynamically with the help of lwc:dynamic directive in LWC OSS.

I am able to create those comments dynamically, but not able to set the properties to them. For each different component I have different set of properties that I want to pass on to.

Here is the code I am trying.

JS

import { LightningElement } from 'lwc';

export default class CompositionDynamic extends LightningElement {
    componentConstructor;

    async loadComponent() {
        const ctor = await import('recipe/hello');
        // how can I set properties here? For example label,name etc.
        // Like the components i also want to import their default property values dynamically.
        this.componentConstructor = ctor.default; 
    }
}

HTML:

<template>
    <ui-card title="CompositionDynamic">
        <ui-button label="Load Hello Component" onclick={loadComponent}>
        </ui-button>

        <div class="dynamic-component">
            <!-- 
                You can use any tag name for the dynamic component as long as it belongs to your namespace and it's not an existing component in your project.
                For example: In this recipe, we use a "recipe-dynamic-import" tag, but there's no dynamicImport component in the recipe namespace.
            -->
            <recipe-dynamic-import
                lwc:dynamic={componentConstructor}
            ></recipe-dynamic-import>
        </div>

        <recipe-view-source source="recipe/compositionDynamic" slot="footer">
            Load a component dynamically by assigning a constructor at runtime.
        </recipe-view-source>
    </ui-card>
</template>

I have already tried the below code but didn't work

this.componentConstructor.prop = "value";
this.componentConstructor.setAttribute("prop", "value");

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.