Simple Hello World Program in Lightning Component

By | October 30, 2019

Hi, Simple hello world program for basic learners. In this post we have shown dynamically value change when we enter the value in input field.

Lightning Component

<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId" access="global" >
    <aura:attribute name="greeting" type="string" default="World" />  
    <article class="slds-card">
        <div class="slds-card__body slds-card__body_inner slds-p-top_medium">
            <lightning:input aura:id="myInput" type="text" value="{!v.greeting}" /><br/>
            Hello, {!v.greeting}!            
        </div>
    </article>
</aura:component>

Js Controller

({
	updateValue : function(component, event, helper) {        
        var val = component.find("myInput").getElement().value;
        component.set("v.greeting", val);		
	}
})

Application

<aura:application extends="force:slds">
    <c:HelloWorld />
</aura:application>

Output

when we enter any value in text box, then it will be displayed below in the place of world…
Share this...
Share on Facebook
Facebook
Email this to someone
email

Leave a Reply

Your email address will not be published. Required fields are marked *