I am trying to call a Child LWC from a Parent LWC through a button, But child component gets displayed along with the parent component.

<div style="height: 300px;" >
        <lightning-button label="New Acre" onclick={handleClick} class="slds-float--right">

and passing my component through the query selector in the handleClick method in JS.


Can someone suggest, what I am missing here?

  • Hi, and welcome to SFSE! Please take a moment to read about How to Ask, and take the tour to get an idea of what good questions should look like. Then, edit your question to include additional information, such as what you're trying to accomplish and what challenges you're facing. As it is, I have no idea what you're asking for or how to help you. – sfdcfox Mar 25 at 3:43
  • <template> <div style="height: 300px;" > <div> <c-new-acre-comp></c-new-acre-comp> <lightning-button label="New Acre" onclick={handleClick} class="slds-float--right"> </lightning-button> </div> </div> <div> <template if:true={seededAcres.data}> <lightning-datatable key-field="Id" data={Acres.data} show-row-number-column row-number-offset={rowOffset} – user80357 Mar 25 at 3:44
  • I am trying to call the child component through a button in the Parent Component. – user80357 Mar 25 at 3:46
  • What does it mean to "call the child component"? Are you trying to display it? Call a method in it? Pass data into it? – sfdcfox Mar 25 at 3:47
  • I am trying to display the child component through a button in the parent component. – user80357 Mar 25 at 3:50

You need to understand how you can Render DOM Elements Conditionally in Lightning Web Component.

To render HTML conditionally, add the if:true|false directive to a nested tag that encloses the conditional content.

The if:true|false={property} directive binds data to the template and removes and inserts DOM elements based on whether the data is a truthy or falsy value.

In your case, You need to define a boolean property in js file and use <template if:true={showNewAcreComponent}><c-new-acre-comp></c-new-acre-comp></template> to conditionally show and hide in html file.Let's say, you have defined the property with name showNewAcreComponent having default value as false. Whenever value of showNewAcreComponent property defined in js file returns true, the c-new-acre-comp will render on the screen. When showNewAcreComponent returns false, c-new-acre-comp will not render on the screen dynamically.

    <div style="height: 300px;">
        <template if:true={showNewAcreComponent}>
        <lightning-button label="New Acre" onclick={handleClick} class="slds-float--right">

In your js file, we are changing the property value to true:-

showNewAcreComponent = false;
handleClick() {
    this.showNewAcreComponent = true;
| improve this answer | |
  • Thank you sanket. – user80357 Mar 25 at 18:44

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.