function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Amanda Benzon 15Amanda Benzon 15 

Lightning Component for Community display text when button is clicked

Hi All,

I am new to creating custom lightning components and I am trying to create a button/link in a Community so that when the button/link is clicked a string of text is shown below the button.  How can I accomplish this?  Thank you in advance!
Best Answer chosen by Amanda Benzon 15
RSuzukiRSuzuki
You can build it all in one component. 

For example:
LWC HTML:  
<template>
    <lightning-button label="Show Text" title="Show text" onclick={handleClick} class="slds-m-left_x-small"></lightning-button>
    <div if:true={showText}>{textValue}</div>
</template>
LWC JS: 
import { LightningElement, track, api } from 'lwc';

export default class App extends LightningElement {
    showText = false;
    textValue = 'Some text value';
    handleClick(event){
        this.showText = true;
    }

}

 

All Answers

RSuzukiRSuzuki
You can build it all in one component. 

For example:
LWC HTML:  
<template>
    <lightning-button label="Show Text" title="Show text" onclick={handleClick} class="slds-m-left_x-small"></lightning-button>
    <div if:true={showText}>{textValue}</div>
</template>
LWC JS: 
import { LightningElement, track, api } from 'lwc';

export default class App extends LightningElement {
    showText = false;
    textValue = 'Some text value';
    handleClick(event){
        this.showText = true;
    }

}

 
This was selected as the best answer
B KarthickeyanB Karthickeyan
Hi @RSuzki,
The requirement will be solved with your code. but I feel it is good to use '@track' decorator because if any data changes in the javascript it should reflect back to the HTML page. what is your opinion on this?

Happy to receive comments.
RSuzukiRSuzuki
Hello, actually '@track' is no longer a requirement for strings or bools, only to keep track of information inside objects and arrays.. Refer to this release note: https://releasenotes.docs.salesforce.com/en-us/spring20/release-notes/rn_lwc_track.htm