0

I have a requirement in LWC. My scenario is as below: I need to dynamically change the label, icon-name attributes on the HTML element based on one of the data field which I receive while looping the Apex data using for:each directive.

 <template for:each={DatafromApex.Data} for:item="DataItem">
 <tr key={DataItem.Id}>
        <td role="gridcell">
<lightning-formatted-text value= {DataItem.Name}> </lightning-formatted-text>
          </td>
<td role="gridcell">
            <!-- Toggle visibility of a content block when clicked -->
            <lightning-button label={toggleButtonLabel} title="Hello" icon-name={toggleIconName}
                value = {DataItem.Id} onclick={handleToggleClick}>
            </lightning-button>

</td>

</tr>
</template>

Notes: The below are JS Property toggleButtonLabel toggleIconName

I need to set these properties dyanmically based on the Apex data I am receiving from Apex which I am looping in HTML using the For:each directive.

Eg :

If The Apex data for the data field DataItem.action is 'Attach' then the icon-name attribute on the HTML element should be set to attach icon and if The Apex data for the data field DataItem.action is 'Detach' then the icon-name attribute on the HTML element should be set to Detach icon and so on. Same goes for label attribute as well.

Please could someone provide their input.

With Regards Ashfaq Mohammed

8
  • 1
    Hi and welcome to SFSE. Please take a moment to read How to Ask then edit your question to add detail. Specific things to include are code snippets showing what the data structure is and exactly what you iterate and render. This might be a snippet from your Apex code as well as your LWC JavaScript plus template HTML. Without this detail the question is too vague to give an answer that is accurately focused on your problem. Make sure to include the snippets as text, not screenshots.
    – Phil W
    Commented Sep 17, 2022 at 9:40
  • I am not sure why my code is being skipped on the body. Though I put the code, it disappears on the post Commented Sep 17, 2022 at 9:53
  • Use the markdown triple back tick on the line above the code and the line following the code. See the editor help for more.
    – Phil W
    Commented Sep 17, 2022 at 9:56
  • Thanks this works Commented Sep 17, 2022 at 18:23
  • The label and icon values to be rendered need to be stored in the objects you are iterating in the loop. Note that you need to clone the response data from your Apex in order to modify it to add the icon and label values.
    – Phil W
    Commented Sep 17, 2022 at 18:51

0

You must log in to answer this question.

Browse other questions tagged .