+ Start a Discussion
Debasish Paul 6Debasish Paul 6 

How to Navigate between Lightning Components?

How to navigate between Lightning components and pass value between them? Please explain with example.
Mohith Kumar ShrivastavaMohith Kumar Shrivastava
You can use navigate event to navigate between pages 
 
({

navigate : function(component, event, helper) {

	    //Find the text value of the component with aura:id set to "address"
	    var address = 'your url';
	    var urlEvent = $A.get("e.force:navigateToURL");
	    urlEvent.setParams({
	      "url": address,
	      "isredirect" :false
	    });
	    urlEvent.fire();
	}

})

 
Piyush Kumar 58Piyush Kumar 58
Hello Debasish Paul
 
Let’s take a scenario there are two components i.e Component1 and Component2. Component1 accepts two user input values and we need to add these values and display the result in Component2. So, how will the component1 pass on the result to component2 ? We have to use a lightning event in this case which will allow component1 to fire the event, and can be caught by the event handlers of component2.

Lightning Event :- First create a event named "Result.evt". Since, component1 will have a value to be passed on to component2, the event should also need to have an attribute associated with it.
<aura:event type="APPLICATION">
<aura:attribute name="Show_Result" type="String"/>
</aura:event>
Component:-
Component1.cmp which would accept two input values from the user and sum it.
<aura:component implements="force:appHostable">
<aura:attribute name="Result" type="String"/>
<aura:registerEvent name="navigate" type="c:Result"/>
<ui:inputText aura:id="n1" label="Number1" required="true"/>
<ui:inputText aura:id="n2" label="Number2" required="true"/>
<ui:button label="Sum" press="{!c.Add}"/>
</aura:component>

Look at the above component, you will see that this component has registered the event “Result” using the <aura:registerEvent> tag. This is a declaration that the component states to notify that component will fire the “Result” event at some point of time.
Now create the controller for Component1.cmp
Component1Controller.js
({
   Add : function(component, event, helper) {
   var num1 = component.find("n1").get("v.value");
   var num2 = component.find("n2").get("v.value");
   var res = parseInt(num1) + parseInt(num1);
   res = res + '';
   var evt = $A.get("e.c:Result");
   evt.setParams({ "Show_Result": res});
   evt.fire();
   }
})
In the above controller of Component1, we are capturing the user inputs, converting it to integer data type, adding the two values and again converting it back to String data type. The final result is then passed to the “Result” event and fired.
Now, we need to define the Component2, which will display the result.
Component2.cmp
<aura:component >
  <aura:attribute name="res" type="String" />
  <aura:handler event="c:result" action="{!c.handleApplicationEvent}"/>
  The result is {!v.res}
</aura:component>
In component2 <aura:handler> tag to register that it handles the application event.
When the event is fired, the handleApplicationEvent action in the client-side controller of the handler component is invoked.
Now create the controller for Component2.cmp
Component2Controller.js
({
handleApplicationEvent : function(cmp, event) {
       var ResultValue = event.getParam("Show_Result");
       // set the handler attributes based on event data
       cmp.set("v.res", ResultValue);
   }
})
The controller retrieves the data from the Event named "Result" and set the retrive data in the component2 attribute name "res".
Now create a Lightning Application named "MyApp" to access these component in salesforce:-
<aura:application >
   <c:component1/>
   <c:component2/>
</aura:application>


Thanks,
Piyush Kumar
Debasish Paul 6Debasish Paul 6
Thank you Piyush, It helps.
Piyush Kumar 58Piyush Kumar 58
Hello Debasish Paul,

If  this solution hepls to solve your query then please mark is solve that will help outher to get this solutions.

Thanks.
Pankaj Singh 54Pankaj Singh 54
sir i try above code but its not work plz help me