Dynamic component creation in Lightning Web Components

Is there any way to create and add lightning web components dynamically in the component tree ? I mean the equivalent one in Aura is $A.createComponent().

The usual Web Components can be dynamically created through standard DOM APIs like document.createElement('c-my-cmp') or element.appendChild(element), but as far as I tried in pre-release org it would not work at all.

Answer

This question has been posted multiple times in the pilot group. The short answer is there is no equivalent for the $A.createComponent() API currently in the LWC .

Currently, the team recommends the below options

  1. Create if branches on the template only load them when a certain condition is meet (yes this is no ideal and not what you are looking for).

  2. You can have multiple html templates in your component. You can have a render() method that can switch which template to use based on some conditions.

Looks like option 2 seems a more viable approach.

Below is the example is shown for this use case

import { LightningElement } from "lwc";

import loadingTemplate from "./loading.html";
import finalTemplate from "./fancyTemplate.html";

export default class HelloWorld extends LightningElement {
@track isLoading = false;

  render() {
     return this.isLoading ? loadingTemplate : finalTemplate;
   }
}

Providing true dynamic creation seems to be technically challenging as per the conversation in the pilot chatter group.

Update

Although there is nothing like this on the salesforce platform today, if you are using lwc-oss on say platform like Heroku or on your website, you can achieve the dynamic component insertion.

Please check an example of the usage here.

Attribution
Source : Link , Question Author : stomita , Answer Author : Mohith Shrivastava

Leave a Comment