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

<template> 
    <div class="slds-p-top_x-small">
            <lightning-button label={clickedButtonLabel} title="Show Addresses" onclick={showcomp}  
            style="padding:5px;">
            </lightning-button>

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

    </div>
                  
</template>

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 = [];
    error;
    @track clickedButtonLabel = 'Show Addresses'; 
    @track showaddress = false;
    
    
    @wire(getAddresses,{
       RecId:'$recordId'
   })
   wiredclass({
       data, error
       
   }){
   if(data){
       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">
    <apiVersion>52.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordAction</target>
    </targets>
     <targetConfigs>
    <targetConfig targets="lightning__RecordAction">
      <actionType>ScreenAction</actionType>
    </targetConfig>
  </targetConfigs>
  </LightningComponentBundle>

Apex Controller for Child LWC: Here AddressCardController

public without sharing class AddressCardController {
@AuraEnabled(cacheable=true)
    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

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

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

After clicking

Hope you have an easy day after finding this piece!