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

2 thoughts on “Simple Hello World Program in 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
  2. Nona Ardd

    Hi, Neat post. There is a problem with your web site in internet explorer, would test this… IE still is the market leader and a huge portion of people will miss your great writing due to this problem.

    Reply

Leave a Reply

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