How to pass parameters from Lightning component to Controller.js(client side controller) with example

Lightning Tutorials Basics: Passing parameters from Lightning component to Controller.js(client side controller) and controller to Lightning component:


In this tutorial we are going to learn how to pass parameters from Lightning component to controller vice versa.

By using component.get(v.attrinuteName) or  component.find("aura:id").get("v.value") we can pass value from component to controller.
By using component.set("v.attrinuteName",value);  we can pass value from controller to lightning component.

In below code  empName attribute used to store the data which is entered by user in ui:inputText.
when user click on button "callme" function gets called and the value entered in inputText box will be passed to the attribute "empName" and the result will be printed.

<aura:component >
    <aura:attribute name="empName" type="String"/>
    <aura:attribute name="emp" type="String"/>
    <ui:inputText label="Enter Name"  aura:id="name" />
    <ui:button label="submit" press="{!c.callme}" /> <br />
    Employee Name Entered:  <ui:outputText value="{!v.empName}" />
</aura:component>

FirstComponent.js

({
    callme : function(component, event, helper) {
    var Name = component.find("name").get("v.value");
    component.set("v.empName",Name )
    }
})

Check Output
FitstComponentApp.app

<aura:application >
    <c:FirstComponent />
</aura:application>

when user entered something in input box and click on submit button "callme" function gets called and the value entered in inputText box will be passed to the attribute "empName" and the result will be printed as output below...

Subjects:

Lightning Components Salesforce Lightning Tutorials for beginers Salesforce Lightning Tutorials Basics

Share This: