Dynamic Show and Hide Button in Lightning Web Component embedded in another LWC

Let’s create a simple LWC Component to dynamically change the label of the button with the click. In this example, I created a button in LWC to show and hide the saved addresses on an Account record with the click of a button. I further intend to make a tile of selectable address list that we will take care of, in another post.

This post also demonstrates how we can embed one LWC in another LWC. In other words how to call child Lightning Web Component from a parent Lightning Web Component and pass attributes like recordId.

Sample Code:

Child Component HTML:
Here, the address.html file

    <div class="slds-p-top_x-small">
            <lightning-button label={clickedButtonLabel} title="Show Addresses" onclick={showcomp}  

        <template if:true={showaddress}>
            <div class="slds-grid">
                <lightning-radio-group name="radioGroup"
                label="Saved Addresses"


Child Component JAVASCRIPT: Here, the address.js file

import { LightningElement ,track,api,wire} from 'lwc';
import getAddresses from '@salesforce/apex/AddressCardController.getAddresses';
export default class Address extends LightningElement {
    @api recordId;
    @track options = [];
    @track adds = [];
    @track clickedButtonLabel = 'Show Addresses'; 
    @track showaddress = false;
       data, error
       let dataEditing = JSON.parse(JSON.stringify(data));
       console.log('data here: '+JSON.stringify(dataEditing));
       console.log('data here: '+JSON.stringify(data));
       console.log('data here: '+dataEditing);
       //var data1 = JSON.stringify(dataEditing);
       var data1 = dataEditing;

       for(var index in data1){
           console.log('ndx data here: '+JSON.stringify(data1[index].Name)); 
           console.log('ndx data here: '+JSON.stringify(data1[index])); 
           const option = {
             label: data1[index].Address__c +' '+ data1[index].City__c+' '+ data1[index].State__c+' '+ data1[index].Pincode__c,
             value: data1[index]
         this.options = [ ...this.options, option ];
         this.adds = data1;
   }else if(error){
       this.error = error;

showcomp(event) {  
    const label = event.target.label;  

    if ( label === 'Show Addresses' ) {  

        this.clickedButtonLabel = 'Hide Addresses';  
        this.showaddress = true;  

    } else if  ( label === 'Hide Addresses' ) {  
        this.clickedButtonLabel = 'Show Addresses';  
        this.showaddress = false;  



Child Component MetaXML: Here, the address.js-meta.xml file

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <targetConfig targets="lightning__RecordAction">

Apex Controller for Child LWC: Here AddressCardController

public without sharing class AddressCardController {
    public static List<Acc_Address__c> getAddresses (id RecId){
        string query= 'Select id,AccountId,Name,Address__c,City__c,Pincode__c,State__c'+
                ' FROM Acc_Address__c where AccountId = :RecId LIMIT 5';
         return Database.query( query );

Parent Component codes to embed the child Lightning Web Component inside parent Lightning Web Component

Parent Component HTML: Here, the parent.html file

<p>Parent Component</p>
<c-address record-id={recordId}></c-address>

Parent Component JAVASCRIPT: Here, the parent.js file

import { LightningElement } from 'lwc';
export default class parent extends LightningElement {
    @api recordId;

Images to demonstrate the working of the LWC inside LWC and dynamic button

embedded lwc in lwc
LWC inside LWC

After clicking

showing child LWC on click of a dynamic labeled button

Hope you have an easy day after finding this piece!

6 thoughts on “Dynamic Show and Hide Button in Lightning Web Component embedded in another LWC”

  1. Your example has nothing to do with hiding and showing buttons. You’re changing the label which is not the same. Your blog is fine but the title is very misleading and click bait.

    • Dear John, it indeed has nothing to do with that. You have got the context wrong, please refer to the first paragraph of the blog or the lil screenshots at the end. Its to create a button to show n hide data and thereby dynamically change label to match the context of it.

      Lemme kno of any specific requirements you had or any solutions u thought. Would try to contribute it to the next post. Thanks for taking the time to let me kno your thoughts


Leave a comment

error: Content is protected !!