function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Rajalakshmi SubramaniamRajalakshmi Subramaniam 

Invoke child LWC from parent dynamically

Hi All,

I need to invoke child LWC from parent dyanmically.Below syntax has been given in saleforce documentation for invoking child component.
<c-child-cmp></c-child-cmp>. 

But can i pass this value "c-child-cmp" dynamically. for example
in JS,
var cmpName  = c-child-cmp;

in HTML,
<{cmpName}></{cmpName}>

can i  invoke  like this ? 
Appreciate your help!
Abdul KhatriAbdul Khatri
Hi Rajalakshmi,

Not sure about that but one other way to handle you scenarion is using a flag like this

Parent Component 
<template>
    <template if:true={displayChild}>
        <c-child-component}></c-child-component>
    </template>
</template>
Parent Component Js
  
@track displayChild = false;
.
.
.
.
someMethod() {
     if(someCondition){
         this.displayChild = true;
     }else{
         this.displayChild = false;
     }
}

I hope this will help
Rajalakshmi SubramaniamRajalakshmi Subramaniam
Hi Abdul Khatri,

Thank you for your prompt response. I have around 25 child LWCs. i need to call one child LWC whose name matches. For example,

Scenario 1:
Parent.js
@track  cmpName  = c-child5-cmp; ---->(This name could be any one of 25 LWCs which i already have)

Parent.html
invoke {c-child5-cmp}

Scenario 2:
Parent.js
@track  cmpName  = c-child8-cmp; ---->(This name could be any one of 25 LWCs which i already have)

Parent.html
invoke {c-child8-cmp}

Please let me know is it  possible to call them dynamically?
Thanks in advance!
Abdul KhatriAbdul Khatri
Hey Sorry for the very delay.

So on each possible parent you have multiple options of calling any child cmp. Trying to understand how you are choosing to call any child from parent.
Preeti NelapatiPreeti Nelapati
Hi Rajyalakshmi,
Did you find the solution for this? I have a similar requirement and unable to render child components dynamically. Help would be appreciated.

Thanks