Navigate Lightning Components in Salesforce

Lightning Component :- Component1
<aura:component implements="force:appHostable">
<aura:attribute name="Txt" type="String" default=""/>
<div class="slds-box slds-theme_default">
This is component 1.<br/><br/>
<lightning:input type="text" value="{!v.Txt}" label="Enter Text : "/><br/><br/>
<lightning:button variant="brand" label="Navigate" onclick="{!c.navigateToCompTwo}"/>
</div>
</aura:component>
Component1 Controller.js
({
navigateToCompTwo : function(component, event, helper) {
var evt = $A.get("e.force:navigateToComponent");
evt.setParams({
componentDef: "c:Component2" ,
componentAttributes :{ Text : component.get("v.Txt") }
});
evt.fire();
}
})
Lightning Componnet:- Component2
<aura:component implements="force:appHostable"  access="global">
<aura:attribute name="Text" type="String" default=""/>
<div class="slds-box slds-theme_default">
This is component two.<br/><br/>
Text is {!v.Text}.<br/><br/>
<lightning:button variant="brand" label="Back to Component One" onclick="{!c.navigateToCompOne}"/>
</div>
</aura:component>
Component2 Controller.js
({
navigateToCompOne : function(component, event, helper) {
var evt = $A.get("e.force:navigateToComponent");
evt.setParams({
componentDef : "c:Component1"
});
evt.fire();
}
})
For output, 
1st create a Lightning Tab for components.
(a) Go to Setup.
(b) In Quick Find (Search box -> Enter -> Tab -> "Lightning Component Tabs" -> Click on New Button.)
2nd Step, 
(a) Go to Setup.
(b) In Quick Find (Search box -> Enter -> App Manager -> "Click on New Lightning App ".)
Final Output:-

One thought on “Navigate Lightning Components in Salesforce

Leave a Reply