0

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.

<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>

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

this.template.querySelector('c-new-acre-comp').handleValueChange();

Can someone suggest, what I am missing here?

5
  • 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 '20 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 '20 at 3:44
  • I am trying to call the child component through a button in the Parent Component.
    – user80357
    Mar 25 '20 at 3:46
  • 1
    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 '20 at 3:47
  • 1
    I am trying to display the child component through a button in the parent component.
    – user80357
    Mar 25 '20 at 3:50
2

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}>
            <c-new-acre-comp></c-new-acre-comp>
        </template>
        <lightning-button label="New Acre" onclick={handleClick} class="slds-float--right">
        </lightning-button>
    </div>

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

showNewAcreComponent = false;
handleClick() {
    this.showNewAcreComponent = true;
}
1
  • 1
    Thank you sanket.
    – user80357
    Mar 25 '20 at 18:44

This site is temporarily in read only mode and not accepting new answers.

Not the answer you're looking for? Browse other questions tagged .