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

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

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

myDynamicCmp.html

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

myDynamicCmp.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
  <apiVersion>59.0</apiVersion>
  <capabilities>
    <capability>lightning__dynamicComponent</capability>
  </capabilities>
</LightningComponentBundle>

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

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

export default class extends LightningElement {
  componentConstructor = MyDynamicCmp;
  
  // props
  firstName = "Rahul";
  lastName = "Gawale";
  email = "rahul@forcetrails.com";
}

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.

myComponent.html

<template>
	<lwc:component 
		lwc:is={componentConstructor} 
		first-name={firstName}
		last-name={lastName}
		email={email}
		>
	</lwc:component>
</template>

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

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

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

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

myComponent.html

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