Simple Hello World Program using 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

One thought on “Simple Hello World Program using Lightning Component

  1. Food

    Excellent website. Plenty of helpful information here. I am sending it to a few friends ans also sharing in delicious. And naturally, thank you in your sweat!

    Reply

Leave a Reply

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