Setting public properties of dynamically created lwc component

Telegram logo Join our Telegram Channel
Setting public properties of dynamically created lwc component

Greetings Trailblazers!

In the previous blog - Dynamic Component Creation in LWC, we saw how to create and use Lightning web components dynamically. But now, you need to send data to the dynamically created component using the public properties.

There are two ways to set property values to the dynamically added components.

  • Statically from the HTML markup, when the component is known in advance.
  • At the run time from using the lwc:spread directive, this is the most suitable and flexible approach.

Example dynamic component

To demonstrate I have created a simple component that is dynamically callable, it has three public properties firstName, lastName, and email.


// myDynamicCmp.js
import { LightningElement, api } from "lwc";

export default class extends LightningElement {
  @api firstName;
  @api lastName;
  @api email;


<!-- myDynamicCmp.html -->
  First Name: {firstName}
  Last Name: {lastName} 
  Email: {email}


<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="">

Set properties to lwc:component tag directly.

This option can be used only when the component is imported statically and the component is known in advance. Let us see this with an example.


// myComponent.js
import { LightningElement } from "lwc";
import MyDynamicCmp from "c/myDynamicCmp";

export default class extends LightningElement {
  componentConstructor = MyDynamicCmp;
  // props
  firstName = "Rahul";
  lastName = "Gawale";
  email = "";

In the below HTML markup, I have set the properties first-name, last-name, and email directly on the lwc:component directive. This is possible because I have static import in the myComponent.js.



Setting dynamic Lwc component properties using lwc:spread directive

Now that we have the myDynamicCmp component available to call dynamically let us see how can we pass the public property values to it when called dynamically.


// myComponent.js
import { LightningElement } from "lwc";

export default class MyComponent extends LightningElement {
  // constructor for the dynamically created lwc component
  // these props are passed to the dynamic component.
  childProps = { firsName: "Rahul", lastName: "Gawale", email: "" };

  connectedCallback() {
    // import custom dynamic component
      .then(({ default: ctor }) => (this.componentConstructor = ctor))
      .catch((err) => console.log("Error importing component"));


<!-- myComponent.html-->
  <lwc:component lwc:is={componentConstructor} lwc:spread={childProps}></lwc:component>

No comments :
Post a Comment

Hi there, comments on this site are moderated, you might need to wait until your comment is published. Spam and promotions will be deleted. Sorry for the inconvenience but we have moderated the comments for the safety of this website users. If you have any concern, or if you are not able to comment for some reason, email us at